javascript開發常用調試技巧總結

14個JavaScript調試技巧

1. ‘debugger;’

除瞭console.log,debugger;是我們最喜歡、快速且骯臟的調試工具。一旦執行到這行代碼，Chrome 會在執行時自動停止。 你甚至可以使用條件語句加上判斷，這樣可以隻在你需要的時候運行。愚人碼頭註：本人實在覺得這種調試方面很不好，因為後續的調試步驟和斷點調試沒什麼區別。而且調試完成後，還要記住刪掉這行代碼。確實有點骯臟。

JavaScript 代碼:
  1. if (thisThing) {
  2. debugger;
  3. }

2. 將 objects 顯示為表格

有時，你有一個復雜的對象要查看。你可以用console.log查看並滾動瀏覽該對象，或者使用console.table展開，更容易看到正在處理的內容！

JavaScript 代碼:
  1. var animals = [
  2. { animal: 'Horse', name: 'Henry', age: 43 },
  3. { animal: 'Dog', name: 'Fred', age: 13 },
  4. { animal: 'Cat', name: 'Frodo', age: 18 }
  5. ];
  6.  
  7. console.table(animals);
  8.  

輸出：

Screenshot showing the resulting table for JavaScript debugging tip 2

3. 嘗試所有的屏幕尺寸

雖然在桌面設備上安裝不同移動設備模擬器非常棒，但在現實世界中並不可行。 應該是調整你的可視窗口，而不是替換移動設備？ Chrome為你提供所需的一切。 進入Chrome 開發者調試工具，然後點擊‘toggle device mode(切換設備模式)’按鈕。 實時觀察窗口變化即可!

4. 如何快速找到DOM元素

在 Elements(元素) 面板中標記 DOM 元素，並可以在 console(控制臺) 中使用它。Chrome 檢測器會保留其歷史記錄中的最後 5 個元素，以便最終標記的元素顯示$0，倒數第二個標記元素$1，依此類推。

如果你按照“item-4”，“item-3”，“item-2”，“item-1”，“item-0”的順序標記下列項，則可以在控制臺中像這樣訪問DOM節點：

5. 使用console.time()和console.timeEnd()來標記循環耗時

要確切地知道某段代碼需要執行多長時間，尤其是在調試慢循環時，可能會非常有用。您甚至可以通過為該方法分配標簽來設置多個定時器。讓我們看看它是如何工作的：

JavaScript 代碼:
  1. console.time('Timer1');
  2.  
  3. var items = [];
  4.  
  5. for(var i = 0; i < 100000; i++){
  6. items.push({index: i});
  7. }
  8.  
  9. console.timeEnd('Timer1');
  10.  

運行產生瞭如下結果：

6. 獲取函數的堆棧跟蹤信息

你可能知道JavaScript框架，會引入大量代碼。

它創建視圖觸發事件，而且你最終會想知道函數調用是怎麼發生的。

因為 JavaScript 不是一個很結構化的語言，有時候很難完整的瞭解到底發生瞭什麼以及什麼時候發生的。 使用console.trace（(僅僅隻是在控制臺中跟蹤) 可以方便地調試JavaScript 。

假設你現在想看car實例在第24行調用funcZ函數的完整堆棧軌跡信息:

JavaScript 代碼:
  1. var car;
  2. var func1 = function() {
  3. func2();
  4. }
  5. var func2 = function() {
  6. func4();
  7. }
  8. var func3 = function() {
  9. }
  10. var func4 = function() {
  11. car = new Car();
  12. car.funcX();
  13. }
  14. var Car = function() {
  15. this.brand = ‘volvo’;
  16. this.color = ‘red’;
  17. this.funcX = function() {
  18. this.funcY();
  19. }
  20. this.funcY = function() {
  21. this.funcZ();
  22. }
  23. this.funcZ = function() {
  24. console.trace(‘trace car’)
  25. }
  26. }
  27. func1();
  28.  

24行將輸出：

現在我們可以看到func1調用func2，func2調用func4。Func4創建瞭一個Car的實例，然後調用函數car.funcX，依此類推。

即使你認為非常瞭解自己的代碼，這種分析仍然可以讓你感到很方便。假如你想改進你的代碼。獲取跟蹤信息和所有涉及的函數名單，每一項都可以點擊，你可以在他們之間來回切換。這就像一個特地為你準備的菜單。

7. 美化代碼使調試 JavaScript 變得簡單

有時你可能在生產環境中遇到問題，但是你的source maps沒有部署在服務器上。不要害怕。Chrome 可以將你的 Javascript 文件美化為更易閱讀的格式。雖然代碼不會像你的真實代碼那樣有用 – 但至少你可以看到發生瞭什麼。點擊檢查器中源代碼查看器下方的{}美化按鈕即可。

8. 快速查找要調試的函數

假設你想在一個函數中設置一個斷點。

最常見的兩種方法是：

  1. 在源代碼查看器查找到相應的行，並添加一個斷點
  2. 在代碼中添加debugger

    在這兩個解決方案中，您必須在文件中單擊以調試特定行。

    使用控制臺打斷點可能不太常見。在控制臺中使用debug(funcName)，當到達傳入的函數時，代碼將停止。

    這個調試方法很快, 但缺點是不適用於私有函數或匿名函數。但除瞭私有和匿名函數, 這可能是找到調試函數的最快方法。（註意：這個函數和console.debug函數是不同的東西。）

    JavaScript 代碼:
    1. var func1 = function() {
    2. func2();
    3. };
    4.  
    5. var Car = function() {
    6. this.funcX = function() {
    7. this.funcY();
    8. }
    9.  
    10. this.funcY = function() {
    11. this.funcZ();
    12. }
    13. }
    14.  
    15. var car = new Car();
    16.  

    在控制臺中輸入debug(car.funcY)，當調用car.funcY時，腳本將以調試模式停止：

    9. 屏蔽不相關的代碼

    現在，我們經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有陷阱。 但是，調試器仍然會進入與調試任務無關的文件。解決方案是屏蔽不需要調試的腳本。當然也可以包括你自己的腳本。在這篇文章中閱讀更多關於調試不相關代碼。

    10. 在復雜的調試過程中尋找重點

    在更復雜的調試中，我們有時希望輸出很多行。你可以做的事情就是使用更多控制臺函數來保持良好的輸出結構，例如,console.log,console.debug,console.warn,console.info,console.error等等。然後，可以在控制臺中快速瀏覽。但有時候，某些 JavaScrip 調試信息並不是你需要的。現在，可以自己美化調試信息瞭。在調試 JavaScript 時，可以使用 CSS 並自定義控制臺信息：

    JavaScript 代碼:
    1. console.todo = function(msg) {
    2. console.log(‘ % c % s % s % s‘, ‘color: yellow; background – color: black;’, ‘–‘, msg, ‘–‘);
    3. }
    4.  
    5. console.important = function(msg) {
    6. console.log(‘ % c % s % s % s’, ‘color: brown; font – weight: bold; text – decoration: underline;’, ‘–‘, msg, ‘–‘);
    7. }
    8.  
    9. console.todo(“This is something that’ s need to be fixed”);
    10. console.important(‘This is an important message’);
    11.  

    輸出：

    例如：

    在console.log()中， 可以用%s設置字符串，%i設置數字，%c設置自定義樣式等等，還有很多更好的console.log()使用方法。 如果使用的是單頁應用框架，可以為視圖（view）消息創建一個樣式，為模型（models），集合（collections），控制器（controllers）等創建另一個樣式。也許還可以像 wlog，clog 和 mlog 一樣發揮想象力！

    11. 觀察特定函數的調用及其參數

    在 Chrome 控制臺中，您可以關註特定的函數。 每次調用該函數時，都會對傳入的參數值進行記錄。

    JavaScript 代碼:
    1. var func1 = function(x, y, z) {
    2. //….
    3. };
    4.  

    輸出：

    這是查看哪些參數傳遞給函數的好方法。 但是我必須說，如果控制臺可以告訴我們需要多少參數，那將是一件好事。 在上面的例子中，func1 期望 3個參數，但是隻有 2 個參數被傳入。如果在代碼中沒有處理這個參數，它可能導致一個可能的 bug 。

    12. 在控制臺中快速訪問元素

    在控制臺中執行querySelector一種更快的方法是使用美元符。$('css-selector')將會返回CSS選擇器的第一個匹配項。$$('css-selector')將會返回所有匹配項。如果多次使用一個元素，可以把它保存為一個變量。

    13. Postman 很棒（但Firefox更快）

    許多開發人員使用 Postman 查看ajax請求。Postman真的很優秀。但打開一個新的瀏覽器窗口，新寫一個請求對象來測試，這確實顯得很麻煩。

    有時使用瀏覽器更容易。

    當你使用瀏覽器查看時，如果請求一個密碼驗證頁面，你不需要擔心身份驗證的cookie。下面看，在Firefox中如何編輯並重新發送請求。

    打開檢查員並轉到網絡選項卡。 右鍵單擊所需的請求，然後選擇編輯並重新發送。 現在你可以改變任何你想要的。 更改標題並編輯您的參數並點擊重新發送。

    下面我用不同的屬性提出兩次請求：

    When debugging JavaScript, Chrome lets you pause when a DOM element changes

    14. 節點變化時中斷

    DOM 是一個有趣的東西。 有時候它會被修改，但是你並不知道為什麼。 但是，當您需要調試 JavaScript 時，Chrome會讓您在DOM元素發生更改時暫停。 你甚至可以監視它的屬性。 在Chrome 檢查器中，右鍵單擊該元素，然後在設置中選擇一個中斷就可以瞭：

Related posts:

  1. 項目常用Javascript分享,包含常用驗證和Cookie操作
  2. 網站常用的一些javascript封裝 簡化調用
  3. JS操作JSON常用方法
  4. JS常用API匯總
  5. jstl的常用標簽分享
  6. JQuery的常用方法及使用教程
  7. jquery對dom的操作常用方法整理
  8. jquery中常用的SET和GET$(”#msg”).html循環介紹

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *