谷歌瀏覽器斷點調試

谷歌瀏覽器斷點調試

“資源（Sources）”面板

進入瀏覽器，點擊F12，進入調試面板，點擊source

切換按鈕 會打開文件列表的選項卡。

資源（Sources）面板包含三個部分：

1. 文件導航（File Navigator） 區域列出了 HTML、JavaScript、CSS 和包括圖片在內的其他依附於此頁面的文件。Chrome 擴展程序也會顯示在這。
2. 代碼編輯（Code Editor） 區域展示源碼。
3. JavaScript 調試（JavaScript Debugging） 區域是用於調試的，我們很快就會來探索它。

我們可以按下Esc，打開控制台，查看調試結果

打斷點

在資源面板2中行數位置單鼠標，選擇第x行代碼來進行打斷點進行調試。

也可以直接在代碼中輸入debugger，來選擇打斷點位置進行調試。

function test(){
  debugger
  console.log('test');
}
test();

暫停並查看

在設置好斷點位置后，按F5重新加載網頁，進行代碼調試，代碼會在第x行停下來，這里設置第4行和8行

請打開右側的信息下拉列表（箭頭指示出的地方）。這里允許你查看當前的代碼狀態：

1. 察看（Watch） —— 顯示任意表達式的當前值。

   你可以點擊加號 + 然后輸入一個表達式。調試器將隨時顯示它的值，並在執行過程中自動重新計算該表達式。

2. 調用棧（Call Stack） —— 顯示嵌套的調用鏈。

   此時，調試器正在 hello() 的調用鏈中，被 index.html 中的一個腳本調用（這里沒有函數，因此顯示 “anonymous”）

   如果你點擊了一個堆棧項，調試器將跳到對應的代碼處，並且還可以查看其所有變量。

3. 作用域（Scope） —— 顯示當前的變量。

   Local 顯示當前函數中的變量，你還可以在源代碼中看到它們的值高亮顯示了出來。

   Global 顯示全局變量（不在任何函數中）。

跟蹤執行

在右側面板的頂部是一些關於跟蹤腳本的按鈕。讓我們看看都有哪些功能吧。