摘要:關閉開啟所有斷點不會取消。進入到一個與正在的問題無關的函數后,可以點擊此圖標解析函數剩下的代碼,跳出函數到下一行。例如現在在處暫停,之后,瀏覽器解析函數剩下的代碼,然后在處再次暫停。是全局的,在瀏覽器的所有標簽頁都能找到和運行。
此文章翻譯自 https://developers.google.com...,是對 chrome 下調試 javascript 的工具和方法介紹。
調試 js 需要結合瀏覽器斷點操作,具體可見我的上一篇文章:https://segmentfault.com/a/11...。
打上斷點之后,需要操作對應圖標進行調試,圖標如下:
從左到右分別是:
Pause/Resume script execution:暫停/恢復腳本執行(程序執行到下一斷點停止)。
Step over next function call:執行到下一步的函數調用(執行當前斷點所在行,跳到下一行且暫停)。
Step into next function call:進入當前函數,在第一行暫停。
Step out of current function:跳出當前執行函數。
Deactive/Active all breakpoints:關閉/開啟所有斷點(不會取消)。
Pause on exceptions:異常情況自動斷點設置。
在斷點暫停后,點擊恢復腳本執行,直到下一個斷點為止。
長按圖標,會出現灰色的播放按鈕,鼠標移上去再松開左鍵,會忽略所有的斷點,強制渲染完整的頁面。
當在一行代碼中暫停,代碼里包含一個與正在調試的問題無關的函數時,可以點擊此圖標直接解析該函數,而不是進入函數內部逐行執行debug操作。
例如,當你在 debug 以下代碼:
function updateHeader() { var day = new Date().getDay(); var name = getName(); // A updateName(name); // D }; function getName() { var name = app.first + " " + app.last; // B return name; // C }
假設現在是在 A 處暫停。點擊 "跳過下個函數調用" 圖標,瀏覽器會解析被跳過的函數里的所有代碼(這里是 B 和 C),然后在 D 處再次暫停。
當斷點找到了要 debug 的確切函數,點擊圖標進入此函數內部,逐行查看分析里面的變量值和方法。
例如:
function updateHeader() { var day = new Date().getDay(); var name = getName(); // A updateName(name); // D }; function getName() { var name = app.first + " " + app.last; // B return name; // C }
此時在 A 處打點暫停了,而 A 處就是與問題相關的函數,點擊進入函數里,會在 B 處暫停,再次點擊會在 C 處暫停,同時 B 處會顯示 "name" 變量的值。
進入到一個與正在 debug 的問題無關的函數后,可以點擊此圖標解析函數剩下的代碼,跳出函數到下一行。
例如:
function updateHeader() { var day = new Date().getDay(); var name = getName(); // A updateName(name); // D }; function getName() { var name = app.first + " " + app.last; // B return name; // C }
現在在 B 處暫停,step out 之后,瀏覽器解析 getName() 函數剩下的代碼(C),然后在 D 處再次暫停。
如果你在 debug 一個很長的函數,里面包含了很多與問題無關的代碼,需要區分出來。
首先在函數里設置第一個斷點,執行至暫停,然后,有三種方法 debug :
1、使用 step into function 逐行解析查看結果,會浪費不少時間; 2、根據結果判斷哪些是無用的代碼,越過它們再設置下一個斷點,使用 resume script 執行到下一個斷點; 3、根據結果判斷哪些是無用的代碼,在下一個需要暫停的地方,右鍵行數,選擇 “continue to here”,瀏覽器會直接解析到那一行并暫停,推薦的方法。
在一行代碼里暫停時,可以在 Call Stack 面板查看是哪些棧將你帶到了當前斷點(到達當前函數調用了哪些函數)。如果不是在一行代碼里暫停, Call Stack 面板是沒有內容的。
如果要查看異步函數,可以勾選 Async 。(在 windows 版本中沒有此選項,默認顯示異步函數)。
點擊函數會跳到此函數調用的地方。藍色箭頭是當前查看的函數。
在 Call Stack 面板里右鍵,選擇 Copy stack trace 可以將面板里的 stack 信息復制到 clipboard。
復制的信息格式如下(函數名稱、在代碼里的行數):
getNumber1(get-started.js:35) inputsAreEmpty(get-started.js:22) onClick(get-started.js:15)
在調試函數的過程中,想回到函數的開頭重新 debug 的時候,可以在 Call Stack 面板中對應的函數上右鍵,選擇 Restart Frame 而無需在開頭打斷點。Call Stack 面板里是斷點函數以及所涉及到的其他函數,最頂端的函數是當前的斷點函數。
例如:
function factorial(n) { var product = 0; // B for (var i = 1; i <= n; i++) { product += i; }; return product; // A }
現在在 A 處暫停,點擊 Restart Frame 之后,會在 B 處暫停。
在 debug 過程中,可以選擇忽略部分腳本,不在 Call Stack 中顯示,在 step into function 的時候也不會進入被忽略的腳本。
例如:
function animate() { prepare(); lib.doFancyStuff(); // A render(); }
A是你確認與當前問題無關的第三方庫,那就可以將它關入黑盒子里忽略掉。
在編輯區操作: 在 Source Tab 中雙擊打開文件 -> 在文件編輯區右鍵,選擇 Blackbox script 。
在Call Stack 面板操作: 在 Call Stack 面板中找到對應的腳本 -> 右鍵選擇 Blackbox script 。
在控制臺設置黑盒: 控制臺右上角找到 "Customize and control DevTools" 圖標(或按F1) -> 選擇 Blackboxing tab -> 點擊 Add pattern -> 在對話框中輸入腳本名字或腳本名字的正則表達式 -> 點擊 Add。
在網站有 web workers 或者 service workers 線程的時候,需要分別查看主線程和這兩個線程的 context ,可以在 Threads 面板切換。
上圖藍色箭頭處是當前線程的 context , 可以點擊切換其他線程。
在斷點暫停時,可以在 Scope 面板里查看和編輯局部、閉包和全局范圍內的屬性和變量的值。不會顯示不可枚舉的屬性。
雙擊一個屬性值可以輸入新的值。
如果在調試中,需要一次次在控制臺輸入相同的內容的話,可以使用 Snippets(代碼片段) 功能減少重復勞動。代碼片段是您在DevTools中編寫、存儲和運行的可執行腳本。
Snippets 是全局的,在瀏覽器的所有標簽頁都能找到和運行。
具體可查看 https://developers.google.com...。
在 debug 過程中,如果希望重點觀察某些變量的值(而不是在 Scope 面板里層層點開),可以加入 Watch 面板。Watch 面板里的值會在執行代碼時自動刷新。
"+" 圖標創建新的 expression;右邊是刷新圖標,手動刷新變量的值;鼠標移動到變量上,在右側會出現刪除圖標。
可以將最小化了的代碼還原成對人友好的形式。
點擊代碼編輯區域左下角的 "{}" 圖標。
如果要嘗試修復 bug , 不需要切換到編輯器修改,再刷新當前頁面。你可以直接在代碼編輯區域修改代碼然后保存看看修改后的效果。如果是最小化了的代碼,可以先還原成對人友好的格式。
tips:確定修改方向之后,記得在編輯器代碼里修改保存。
操作: 修改代碼 -> 按 Command + S (mac)或 Ctrl + S (windows, Linux)保存修改 -> 查看效果。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54486.html
摘要:關閉開啟所有斷點不會取消。進入到一個與正在的問題無關的函數后,可以點擊此圖標解析函數剩下的代碼,跳出函數到下一行。例如現在在處暫停,之后,瀏覽器解析函數剩下的代碼,然后在處再次暫停。是全局的,在瀏覽器的所有標簽頁都能找到和運行。 此文章翻譯自 https://developers.google.com...,是對 chrome 下調試 javascript 的工具和方法介紹。 調試 j...
摘要:所有全局對象函數以及變量均自動成為對象的成員。消息彈出窗口對象使用簡單方便,但因其交互方式生硬,通常只用于調試。可以在中創建三種消息框警告框確認框提示框。習慣上,通過選擇符得到的集合一般命名為以起始的字符串,例如。 avascript 等于 ECMAScript + 宿主環境。宿主環境提供了一系列的全局對象,例如Node.js提供的require, console等;瀏覽器提供的DOM...
摘要:開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容,然后,再到本地新建一個文件,。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解,感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信? 用Chrome打開我們常用的網站,按F12,在Con...
摘要:開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容,然后,再到本地新建一個文件,。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解,感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信? 用Chrome打開我們常用的網站,按F12,在Con...
閱讀 954·2021-11-25 09:43
閱讀 2291·2019-08-30 15:55
閱讀 3153·2019-08-30 15:44
閱讀 2053·2019-08-29 16:20
閱讀 1453·2019-08-29 12:12
閱讀 1609·2019-08-26 12:19
閱讀 2283·2019-08-26 11:49
閱讀 1712·2019-08-26 11:42