如果您還在使用 console.log 來進行 js 的代碼調試，那麼可以考慮看看下面的內容，有效的提高工作效率。
斷點調試
代碼斷點
1、打開調試工具（Ctrl/Cmd + Shift + C）。
2、單擊 Sources 選項卡。
3、打開包含要中斷的代碼行文件。
4、在需要暫停的代碼左側的行號處，點擊，行號處會顯示一個藍色的圖標。
5、現在刷新頁面，當代碼執行到這一行就會暫停。
條件斷點
除了普通的斷點外，還可以使用條件斷點，不過只有在條件爲真時纔會暫停。
1、在代碼行左側的行號處，右鍵單擊。
2、選擇 add conditional breakpoint ，會彈出一個輸入框。
3、在輸入框輸入條件語句，回車確定，行號處會變成橙色。
管理代碼斷點
斷點多了，有時候自己也亂。這個時候可以在右側的 Breakpoints 窗格管理斷點。這裏顯示每個斷點對應的行號和代碼。
1、點擊斷點前的複選框可以禁用該斷點。
2、右鍵單擊某個條目，可以呼出菜單以刪除該斷點，取消激活所有斷點，禁用所有斷點或刪除所有斷點，刪除除此斷點外的其他斷點。其中取消激活所有斷點會指示DevTools忽略所有代碼行斷點，但也要保持其啓用狀態，以便它們在重新激活它們時處於與之前相同的狀態。
3、單擊斷點其他位置，可以聯動到該代碼在編輯器的位置，並且背景會標黃。
DOM 斷點
有時候可能需要在DOM節點發生改變的時，對代碼暫停。這是就可以設置DOM更改斷點。
1、切換到 Elements 選項卡。
2、右鍵點擊需要設置斷點的元素，呼出菜單。
3、將鼠標移動到 Break on 上，然後選擇 “子樹修改”，“屬性修改” 或 “節點刪除”。
三種斷點類型解釋：
- 子樹修改。當刪除或添加當前所選節點的子節點或更改子節點的內容時觸發。未在子節點屬性更改或當前所選節點的任何更改上觸發。
- 屬性修改：在當前選定的節點上添加或刪除屬性時或屬性值更改時觸發。
- 節點刪除：刪除當前選定的節點時觸發。
![在這裏插入圖片描述]()
XHR/Fetch 斷點
如果要在XHR請求的時候，對包含指定字符串的URL進行中斷，可以使用此斷點。DevTools暫停XHR調用的代碼行 send()。（Fetch 也適用）
1、切換到 Sources 選項卡。
2、展開 XHR/Fetch Breakpoints 窗格。
3、點擊右側的加號添加斷點。
4、在彈出的輸入框輸入URL包含的字符串，回車，包含這段字符串的URL，在發出請求的時候，DevTools就會暫停。注意，如果輸入爲空，將對任何請求進行暫停。
事件監聽器斷點
如果要暫停事件觸發後運行的事件監聽器代碼，可以使用事件監聽器斷點。
1、切換到 Sources 選項卡。
2、展開 Event Listener Breakpoints 窗格。
3、在事件列表裏選擇需要監聽的事件類型。比如常用的 Mouse 下的 click 事件。
異常斷點
如果要在拋出捕獲或未捕獲的異常的代碼上暫停，那麼可以使用異常斷點。
1、切換到 Sources 選項卡。
2、點擊 暫停異常 按鈕。如圖。啓用後會變成藍色。
3、如果除了未捕獲的異常之外還要暫停捕獲的異常，請選中“ 暫停捕獲異常”複選框。
步進執行代碼
代碼暫停後，我們需要手動控制代碼的執行，以方便排查問題。如下圖從左往右依次是恢復執行，跳過下一個函數，跳入下一個函數，跳出下一個函數和逐步執行下一行。
恢復執行
1、有時候會覺得逐步執行代碼很乏味，這時可以在您覺得可能出問題的代碼處打斷點，然後點擊恢復執行按鈕。這樣代碼就會跳到下一個斷點處。
2、除了這個方法，還可以右鍵單擊覺得出問題的代碼處，點擊 Continue to Here（繼續到此處）。DevTools就會運行到改行，然後暫停。
3、點開恢復執行按鈕右下角的小三角，可以點擊強制恢復執行，這樣就能無視後面的斷點，強行執行腳本。
跳過、跳入、跳出、逐步執行
1、如果覺得代碼中調用的某個函數是可信任的，這個時候就可以在代碼執行到這行時，點擊跳過按鈕。
2、如果代碼執行到某行調用了某個函數，可以點擊跳入這個函數，繼續執行。
3、如果不想繼續查看調用函數的內部代碼，可以點擊跳出按鈕，回到調用該函數的主流程中。
4、如果不知道哪裏出了問題，希望一行行的查找問題，這個時候可以點擊逐行執行按鈕，這樣代碼就會按照執行邏輯一行一行的執行。
編輯腳本
有時候修復錯誤的時候，需要對JS代碼進行一些修改。其實有些簡單的修改無需在IDE中修改了代碼然後再重新加載頁面，查看效果。您可以在DevTools中直接編輯腳本。
1、在 Sources 選項卡中的打開需要修改的文件。
2、修改代碼，按 Command+ S（Mac）或 Ctrl+ S（Windows，Linux）進行保存。這樣就將整個JS文件修補到Chrome的JS引擎中了。（注意修改完後不要刷新頁面）。
壓縮腳本格式化
有時候一些生產環境的文件都是經過壓縮的，這樣不利於斷點調試代碼。這個時候可以點擊格式化按鈕將代碼格式化後再進行調試。
查看當前執行上下文
在某行代碼上暫停時，使用 scope 窗格可以查看當前執行上下文。
1、雙擊屬性值，可以進行更改。
2、不可枚舉的屬性顯示爲灰色。
查看當前調用堆棧
在某行代碼上暫停時，使用 call stack 窗格可以查看此時的調用堆棧。
1、單擊某一個條目可以跳轉到調用該函數的代碼行。藍色箭頭表示DevTools當前正在突出顯示的函數。
2、右鍵點擊某個條目，可以選擇複製堆棧跟蹤。將當前調用堆棧複製到剪切板。
忽略腳本
在調試過程中，有些腳本不屬於調試範圍（比如可信任的第三方庫），不需要進入，這個時候可以忽略該腳本（Blackbox）。這樣逐步執行的時候，就永遠不會進入該腳本。
1、在 Sources 選項卡找到需要忽略的腳本。
2、右鍵呼出菜單，點擊 Blackbox Script 。
3、還有一個方法可以忽略腳本，就是打開設置，轉到 Blackboxing 選項卡，在這裏也可以按正則添加需要忽略的腳本。勾選這裏的 Blackbox content scripts 複選框，可以防止進入 chrome 擴展的JS。
觀察自定義表達式
在 Watch 窗格可以查看自定義表達式的值。
1、單擊加號按鈕創建監聽表達式。
2、單擊刷新按鈕會刷新現有表達式的值。在逐步執行代碼時，值會自動更新。
3、鼠標懸浮在表達式上時，會出現一個減號，點擊可以刪除該表達式。
代碼片段
看了這麼久，說個很實用的東西。
如果發現自己在控制檯中反覆運行相同的調試代碼，就可以考慮使用 snippets （代碼片段）。
1、打開 Sources 選項卡，切換到 Snippets 標籤。
2、點擊 New snippet 可以新建一個代碼片段，編輯代碼，按 Command+S (Mac) 或 Ctrl+S （Windows、Linux）以保存您的更改。
3、保存後可以按 Command+Enter (Mac) 或 Ctrl+Enter（Windows、Linux）執行代碼。
4、代碼執行成功後並且再次對文件進行編輯後，可以通過右鍵菜單選擇 Local Modifications 查看更改記錄。還可以通過下方的 revert 按鈕撤銷本次修改。
5、github 上有很多開源的 snippets ，可以保存起來，方便日後調試。
