Chrome調試相關
Chrome調試工具是日常項目中常用到的,但面對Command + Shift + i
(window:F12
)開啟調試面板,總有些不被知曉的功能被遺漏。本著工欲善其事,必先利其器的想法,扒點歷史存貨,也從官網系統學習一下Chrome較為完善的功能.
Elements Panel
所見即所得,主要用于顯示編輯html
及style
樣式
DOM Inspect:
- 鼠標選中,右鍵
inspect
- 菜單底部可快速定位父級元素
- 選中元素
Enter
,then pressTab
可快速選擇屬性,進行編輯
DOM樣式修改:
-
html
雙擊修改,style
單擊修改,tab
orenter
確認修改 - 查看歷史修改,可通過以下操作:
- In the Styles pane, click on the file that you modified. DevTools takes you to the Sources panel.
- Right-click on the file.
- Select Local modifications.
演示地址:
Set DOM breakpoints
按照DOM Inspect
提示選中元素后,可右鍵設置DOM breakpoints
:
-
Subtree Modifications
: 加在父級上的斷點,用來監聽子元素的內容增刪 -
Attribute Modifications
:加在元素上的斷點,用來監聽元素的屬性變化 -
Node Removal
:加在元素上的斷點,用來監聽元素是否被刪除
斷點事件觸發,會有如下提示
以上斷點雖然都在DOM元素上添加,實則仍為監聽JS
Console Panel
Shortcut: Press Ctrl+Shift+J
(Windows / Linux) or Cmd+Opt+J
(Mac).
Console:輸出控制臺,前端調試后花園,內容輸出顯示,或者直接執行javascript
代碼
Write Console
javascript
文件中執行console.log('some function or string')
-
控制臺直接輸入命令執行
?
Console API
-
console.group
:內容輸出成組// 輸出在控制臺的內容成組,可實現多層級,以及折疊效果(需要配合console.groupCollapsed) console.group('group start'); //group開始 console.log('group content 1'); // group 內容1 ... // group 其他內容 console.groupEnd(); //group結束
效果如下:
-
console.error()
:輸出錯誤function connectToServer() { console.error("Error: %s (%i)", "Server is not responding",500); } connectToServer();
-
console.warn()
:輸出警告if(a.childNodes.length < 3 ) { console.warn('Warning! Too few nodes (%d)', a.childNodes.length); }
console.assert
:輸出斷言,不影響后續的函數執行,斷言可以viewexception stack trace.
Writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.
console.assert(list.childNodes.length < 500, "Node count is > 500");
-
console.table
:表格[官方示例](https://developers.google.com/web/tools/chrome-devtools/debug/console/structured-data?hl=en)
-
console.time(arg)
,console.timeEnd(arg)
:查看函數執行時間。console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize");
結果:
-
console.trace
可追蹤執行路徑function foo() { function bar() { console.trace(); } bar(); } foo();
The output in the console looks something like this:
api-trace2.png
完整Console文檔在這里:Console API Reference
Console Format
-
基本Format.如上,內容輸出可進行格式化輸出.Console支持的輸出列表:
Specifier Output %s Formats the value as a string %i or %d Formats the value as an integer %f Formats the value as a floating point value %o Formats the value as an expandable DOM element. As seen in the Elements panel %O Formats the value as an expandable JavaScript object %c Applies CSS style rules to the output string as specified by the second parameter -
格式化輸出CSS樣式
// 控制臺可直接輸出帶有樣式的內容 console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
?
-
格式化DOM元素為對象:
By default, DOM elements are logged into the console as representation of their HTML, but sometimes you want to access the DOM element as JavaScript object and inspect its properties. You can use the
%o
string specifier to do that (see above), or useconsole.dir
to achieve the same:console.dir(document.body.firstElementChild)
?
Print stack traces
以上console.trace
可實現路徑追蹤,在報錯中,我們可以通過Error
輸出打印
-
Error.stack
:error 的stack
屬性可以輸出執行路徑
?
Tips:
- 控制臺輸入
clear()
可快速實現清屏 - 同上清屏功能,可以在自己的JS代碼中執行
console.clear()
,解除控制臺各種問題
Source Panel
Source:顧名思義,加載的資源這里都能找得到。此部分主要介紹斷點。
Set Breakpoint
-
方法一:Source內容區設置
- 主體內容區域需要設置斷點的行號前點擊,對應的行即設置好了。以此類推。
- 刷新瀏覽器,根據頁面邏輯以此會在斷點處暫停執行,用于`debug
-
方法二:
js
文件中設置-
在
js
文件中需要執行斷點操作的code line前加上debugger
function sum(a, b){ debugger; return a + b; }
-
Breakpoint conditional斷點執行條件
右鍵設置的斷點,選擇Edit breakpoint
輸入執行斷點的條件
Breakpoint Step
- 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:異常情況自動斷點設置。
Call Stack
可以通過勾選Async
實現異步查找事件依賴關系,方便debug
。官方建議避免使用匿名函數。
Near the top of the sidebar is the Call Stack section. When the code is paused at a breakpoint, the call stack shows the execution path, in reverse chronological order, that brought the code to that breakpoint. This is helpful in understanding not just where the execution is now, but how it got there, an important factor in debugging.
An initial onclick event at line 50 in the index.html file called the
setone()
function at line 18 in the dgjs.js JavaScript file, which then called thesetall()
function at line 4 in the same file, where execution is paused at the current breakpoint.
可以通過右鍵在對應的腳本(如第三方)文件中設置blackbox
關進小黑屋,防止迷惑debug
.官方是通過tools
的setting
進行全局設置。
Data manipulation更改執行數值
暫停break,控制臺輸出需要變更的值,強制更改值即可繼續按照所需執行.
針對Workspaces 和 Sourcemaps開啟的權限,見下。
Set Up Persistence with DevTools Workspaces
參考鏈接