使用調試器工具在代碼運行時對其導航、設置監視點和斷點，查看調用堆棧，以及提高編譯/精簡JavaScript的可讀性。
調試器可以幫助你了解為何你的代碼片段會出現未按照預期方式運行、未在預期時間運行及在不應運行的時候運行的情況。在調試過程中可以暫停執行中的代碼，讓你可以備份和重復代碼塊，也可以從不同角度檢查代碼的情況。
調試器默認布局顯示三個窗格，可以調整其寬度和/或高度。
腳本窗格：顯示網頁的HTML和JavaScript的源。
監視點窗格(Watches):顯示變量值。在斷開模式時，以代碼形式顯示當前位置的本地變量（區域設置），以及要求跟蹤的特定變量（監視點）。
調用堆棧和斷點窗格：
調用堆棧：顯示導向當前執行點的函數調用鏈
斷點：顯示已設置的斷點和跟蹤點的列表，並提供用於刪除、切換和編輯斷點的函數。
可以使用三種方法啟動調試會話：
設置斷點：當你的代碼執行到斷點時，進入調試模式，可以逐步運行代碼。
在代碼中斷開：在網頁正常運行時單擊上圖中的"||"圖標進行調試模式
將"異常控制"設置為在未處理的異常處斷開並運行網頁代碼，直到處理異常
進入調試模式時，我們可以從斷點處繼續執行操作，此時看到的代碼如果是一團亂糟糟的格式，記得啟用格式化代碼。看如下圖所示的工具欄：
從左到右依次是：
繼續：離開調試模式，繼續執行到下一個斷點，如果斷點不存在，則直接向下運行至異常或結束。
斷開：在下一個運行的語句處斷開。
單步執行：單步執行調用的函數，如果不是函數，則單步執行到下一個語句。
逐過程執行：逐過程執行調用的函數，若不是函數，則逐過程執行下一個語句。
跳出：跳出當前函數，並單步執行調用的函數
在創建新的Worker時斷開
異常控制
是否格式化代碼：如果顯示被選中，則代碼被格式化，看起來有秩序
當代碼過長的時候是否啟用換行：只有當格式化代碼啟用之后才能使用此功能
是否僅我的代碼
當調試模式啟用時，也可以右鍵腳本窗格選擇相應的操作。
在上述工具欄中，我們看到最后一個圖標是灰色不可用狀態，也並沒有解釋它是做什么用的，在介紹它之前，我們先來看看源映射。
有時候，我們使用編譯為JavaScript的語言編寫代碼時，會使用JavaScript壓縮器。此時，瀏覽器中運行的代碼與你所編寫的代碼有很大的不同，這時候，調試將變得非常困難。即使我們格式化代碼讓代碼具有更高的可讀性，但其函數和變量名稱可能和源代碼的名稱依然不同。此時，如果錯誤可以指向原始源代碼中存在的問題，而非指向瀏覽器中運行的大量修改的文件，將會是個不錯的方案。
說了這么多，沒錯，最后一個灰色圖標，就是為了源映射而存在的。那么為什么它會是灰色呢？如果讓它變得可用？右鍵正在調試的文件名，選擇源文件映射文件：
如果沒有找到映射，調試器工具不會顯示錯誤，在很多情況下，用戶會下載壓縮或編譯的庫且不會想去調試它們。
映射並非100%完美。調用堆棧和檢查器函數在變量名稱用在運行的代碼中時，顯示編譯/壓縮的變量名稱。此外，源映射的質量將根據生成它們的軟件而有所不同。
接下來聊聊斷點的設置和管理。不同類型的點使你可以在調試器工具到達這些點時指示它執行不同操作。
常規斷點：最容易設置，單擊行號旁的位置即可。
條件斷點：僅當設置的條件評估為true時，才會斷開。
跟蹤點：類似於臨時console.log()命令。
事件的斷點和跟蹤點：由特定事件觸發，而不是在執行特定代碼塊時觸發。每個斷點和跟蹤點都具有一個可選的條件篩選器，可幫助你將其作用域縮小到要檢查的事件的待定實例上：
在你關閉瀏覽器后，斷點將保留，這意味着，每次打開瀏覽器進行調試時無需再設置它們，要想刪除它們，在斷點窗格手動進行刪除。
設置完斷點之后，進行調試時，可以查看對象和變量：
在腳本窗格，鼠標懸停在任何變量、函數或對象上可以查看覆蓋中的詳細信息
在Watches窗格中的區域設置節點將為你提供所有對象和變量的目錄（本地和全局范圍），可用於當前斷開中作為焦點的語句。使用添加監視可以添加想要查看的對象和變量。
異常調用函數的情況非常常見，這可能導致數據損壞和速度問題。“調用堆棧”窗格顯示JavaScript引擎到達該函數所使用的路由。當前函數將顯示在頂部，調用的函數按照逆序顯示在其下。
以異步方式調用函數后，要跟蹤調用它的位置會變得更難。
回到腳本窗格，我們發現腳本窗格提供的是選項卡式的頁面，其中調試模式打開的文件我們可以一目了然，但有時候我們想查看的文件如果不在選項卡中出現，應該如何查看呢？其實，在最腳本窗格的選項卡中，展開最左側的文件夾，就可以看到所有的文件：
在頂部，我們還可以輸入篩選條件快速找到我們需要的文件，而當鼠標在單個文件上方懸停時，還會顯示出文件所在的完整路徑，單擊文件，它將會顯示在腳本窗格中。
前面提到，在調試器工具欄中有一個開關時是否啟用僅我的代碼，僅我的代碼，允許你指示某些腳本式應該在調試時忽略的第三方庫。這可以防止調試器處理你未編寫且不打算更改的代碼。當啟用時，若執行暫停時庫代碼包含在調用堆棧中，則調用堆棧窗格右上角的僅我的代碼圖標可以打開和關閉該執行框架的詳細信息。
當我們打開IE瀏覽器時，不知道大家是否注意到一個選項：啟用InPrivate瀏覽，如下圖所示：
什么是InPrivate瀏覽呢？
其實InPrivate瀏覽是使你在瀏覽時不會在瀏覽器歷史記錄中留下任何痕跡，前面我們提到了很多時候調試的信息都會被保留，但是如果使用這種方式瀏覽，調試器就可能不會保存某些應該被保留的信息。而對於你在文件中添加的斷點，使用僅我的代碼功能將文件標記為庫代碼，或使用調試器打開不是根頁面的文件時，調試器依然將保存有關你調試頁面和文件的信息。這個需要引起注意。
由於同時運行調試器(Debugger)和探查器(Profiler)需要額外開銷，所以分析報告中的值不會反映代碼的實際加載和運行時間，因此，不支持嘗試同時運行兩個函數。
調試器就介紹到這里，更多的學習需要大家在實踐中理解。也許有人會說，哦，這個是個開發人員需要學習的技能之一，和測試人員無關。
准確地說，作為網頁開發人員，的確需要對這個技能進行掌握，因為它能很好地幫助我們了解代碼的問題所在，而作為測試人員來說，往往不會去做調試代碼的工作，但是實際上，我們在做測試的過程中，有時候一個網頁開着開着就自動出現了暫停狀態，如下圖所示，但下圖是人為造成的，這里僅作為例子演示：
伴隨着網頁的黯淡，大大的暫停符號"||"的出現，Developer Tools自動啟動，此時，正在測試的你，如果能對Debugger及代碼有一定的了解，可能是好奇，可能是排查問題，你也需要用到這個技能進行進一步的觀察。當然，如果你說，我對這個一竅不通怎么辦？關閉瀏覽器重新打開網頁可能也是一個看起來不錯的途徑，只是，萬一存在bug，這么做就放肆地讓它在你眼皮底下悄悄地溜走了哦~ ^_^