Chrome的調試功能十分強大，這裏僅簡單記錄一些常用的 JS 調試，日常所需必備。
1、設置斷點
可以通過以下兩種方式來設置斷點：
（1）F12 調出控制檯後，在 Source 面板設置。找到要調試的文件，在內容源代碼左側的代碼標記行的位置點擊，即可打上一個斷點：
（2）在 js 文件中設置。在 js 源文件中需要執行斷點操作的位置加上 debugger：
設置之後，刷新瀏覽器，頁面代碼運行到斷點處便會暫停執行。
2、斷點調試
（1）右側調試區頂部是斷點調試的幾個功能按鍵，從左到右依次爲：
* 運行到下一個斷點（F8）
* 不進入函數，繼續執行下一行代碼（F10）
* 進入函數（F11）
* 從執行的函數中跳出（Shift+F11）
* 單步執行（F9）
* 是否禁用所有斷點，不做任何調試
* 程序運行遇到異常時是否中斷
（2）當程序運行到斷點處停下來的時候，右側調試區的 Call Stack 會顯示當前斷點的方法調用棧，從上到下由最新調用處依次往下排列（即斷點處的方法調用層次關係）
（3）Call Stack 的下面是 Scope Variables 列表，可以查看此時局部變量和全局變量的值。此外，在調試的時候，把鼠標放在某個變量上，也可以查看該變量的運行值。
3、DOM 元素設置斷點
除了可以給 js 代碼設置斷點，還可以給 DOM 元素設置斷點來監聽和查看某個元素的變化、賦值情況。
（1）在 Element 面板，右鍵點擊需要監聽的 DOM 節點，選擇 "Break on..." 菜單項，再出現的三個選擇項中選擇一個便會添加斷點。三個選項分別對應如下三種修改情況：
* subtree modifications : 子節點修改
* attribute modifications : 自身屬性修改
* node removal : 自身節點被刪除
（2）設置好斷點後，當 DOM 元素要被修改時，代碼就會自動停留在修改處。
4、統一管理所有斷點
實際項目調試的時候，我們可能會在不同的文件、不同的位置添加許多斷點，這些都會顯示在 Source 頁面的 Breakpoints、DOM Breakpoints 區域中，點擊斷點前面的複選框可以暫時 去掉或者添加 該斷點，點擊斷點可跳轉到相應的程序代碼處。
最後，附上兩篇有深度的：