8. 快速查找要調試的函數
假設你想在一個函數中設置一個斷點。
最常見的兩種方法是：
在源代碼查看器查找到相應的行，並添加一個斷點
在代碼中添加debugger
在這兩個解決方案中，您必須在文件中單擊以調試特定行。
使用控制檯打斷點可能不太常見。在控制檯中使用 debug(funcName)，當到達傳入的函數時，代碼將停止。
這個調試方法很快, 但缺點是不適用於私有函數或匿名函數。但除了私有和匿名函數, 這可能是找到調試函數的最快方法。（注意：這個函數和console.debug 函數是不同的東西。
9. 屏蔽不相關的代碼
現在，我們經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有陷阱。 但是，調試器仍然會進入與調試任務無關的文件。解決方案是屏蔽不需要調試的腳本。當然也可以包括你自己的腳本
10. 在複雜的調試過程中尋找重點
在更復雜的調試中，我們有時希望輸出很多行。你可以做的事情就是使用更多控制檯函數來保持良好的輸出結構，例如, console.log, console.debug, console.warn, console.info, console.error等等。然後，可以在控制檯中快速瀏覽。但有時候，某些 JavaScrip 調試信息並不是你需要的。現在，可以自己美化調試信息了。在調試 JavaScript 時，可以使用 CSS 並自定義控制檯信息：
11. 觀察特定函數的調用及其參數
在 Chrome 控制檯中，您可以關注特定的函數。 每次調用該函數時，都會對傳入的參數值進行記錄。
JavaScript 代碼:
var func1 = function(x, y, z) {
//....
};
輸出：
這是查看哪些參數傳遞給函數的好方法。 但是我必須說，如果控制檯可以告訴我們需要多少參數，那將是一件好事。 在上面的例子中，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 檢查器中，右鍵單擊該元素，然後在設置中選擇一箇中斷就可以了：
閱讀更多 易學前端筆記 的文章
關鍵字: 編程語言 JavaScript 腳本語言
