10. 在複雜的調試過程中尋找重點
在更復雜的調試中，我們有時需要輸出很多行。你可以做的事情就是保持良好的輸出結構，使用更多控制檯函數，例如 console.log，console.debug，console.warn，http://console.info，console.error 等等。然後，你可以在控制檯中快速瀏覽。但有時候，某些JavaScrip調試信息並不是你需要的。
現在，可以自己美化調試信息了。在調試JavaScript時，可以使用CSS並自定義控制檯信息：
- console.todo = function(msg) {
- console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
- }
- console.important = function(msg) {
- console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
- }
- console.todo(“This is something that’ s need to be fixed”);
- console.important(‘This is an important message’);
輸出：
例如：
在console.log()中， 可以用%s設置字符串，%i設置數字，%c設置自定義樣式等等，還有很多更好的console.log()使用方法。 如果使用的是單頁應用框架，可以為視圖（view）消息創建一個樣式，為模型（models），集合（collections），控制器（controllers）等創建另一個樣式。也許還可以像 wlog，clog 和 mlog 一樣發揮小夥伴們的想象力！
11. 查看具體的函數調用和它的參數
在 Chrome 瀏覽器的控制檯（Console）中，大家的注意力都集中在具體的函數上。每次這個函數被調用，它的值就會被記錄下來。
- var func1 = function(x, y, z) {//....};
然後輸出：
這是查看將哪些參數傳遞到函數的一種很好的方法。但在這裡小編要說明，如果控制檯能夠告訴我們需要多少參數，那就好了。在上面的例子中，函數1期望3個參數，但是隻有2個參數被傳入。如果代碼沒有在代碼中處理，它可能會導致一個 bug 。
12. 在控制檯中快速訪問元素
在控制檯中執行 querySelector 一種更快的方法是使用美元符。$(‘css-selector’) 將會返回第一個匹配的 CSS 選擇器。$$(‘css-selector’) 將會返回所有。如果你使用一個元素超過一次，它就值得被作為一個變量。
13. Postman 很棒（但 Firefox 更快）
很多開發人員都使用 Postman 來處理 Ajax 請求。Postman 真不錯，但每次都需要打開新的瀏覽器窗口，新寫一個請求對象來測試。這確實有點兒煩人。
有時候直接使用在用的瀏覽器會更容易。
這樣的話，如果你想請求一個通過密碼保證安全的頁面時，就不再需要擔心驗證 Cookie 的問題。這就是 Firefox 中編輯並重新發送請求的方式。
打開探查器並進入網絡頁面，右鍵單擊要處理的請求，選擇編輯並重新發送。現在你想怎麼改就怎麼改。可以修改頭信息，也可以編輯參數，然後點擊重新發送即可。
現在我發送了兩次同一個請求，但使用了不同的參數：
14. 節點變化時中斷
DOM 是個有趣的東西。有時候它發生了變化，但你卻並不知道為什麼會這樣。不過，如果你需要調試 JavaScript，Chrome 可以在 DOM 元素髮生變化的時候暫停處理。你甚至可以監控它的屬性。在 Chrome 探查器上，右鍵點擊某個元素，並選擇中斷（Break on）選項來使用：
閱讀更多 前端小學生 的文章
關鍵字: 編程語言 JavaScript 開發人員
