前言
Chrome 開發者工具（簡稱 DevTools）是一套 Web 開發調試工具,內嵌於 Google Chrome 瀏覽器中。DevTools 使開發者更加深入的瞭解瀏覽器內部以及他們編寫的應用。通過使用 DevTools,可以更加高效的定位頁面佈局問題,設置 JavaScript 斷點並且更好的理解代碼優化。
本文分享 24 個 Chrome 調試技巧和一些快捷鍵,希望能幫你進一步瞭解 Chrome DevTools ～
調試技巧
1. 控制檯中直接訪問頁面元素
在元素面板選擇一個元素,然後在控制檯輸入$0,就會在控制檯中得到剛才選中的元素。如果頁面中已經包含了 jQuery,你也可以使用$($0)來進行選擇。
你也可以反過來,在控制檯輸出的 DOM 元素上右鍵選擇 Reveal in Elements Panel 來直接在 DOM 樹種查看。
2. 訪問最近的控制檯結果
在控制檯輸入$_可以獲控制檯最近一次的輸出結果。
3. 訪問最近選擇的元素和對象
控制檯會存儲最近 5 個被選擇的元素和對象。當你在元素面板選擇一個元素或在分析器面板選擇一個對象,記錄都會存儲在棧中。 可以使用$x來操作歷史棧,x 是從 0 開始計數的,所以$0 表示最近選擇的元素,$4 表示最後選擇的元素。
4. 選擇元素
- $() - 返回滿足指定 CSS 規則的第一個元素，此方法為 document.querySelector()的簡化。
- $$() - 返回滿足指定 CSS 規則的所有元素，此方法為 querySelectorAll()的簡化。
- $x() - 返回滿足指定 XPath 的所有元素。
select
5. 使用 console.table
該命令支持以表格的形式輸出日誌信息。打印複雜信息時嘗試使用 console.table 來替代 console.log 會更加清晰。
table
6. 使用 console.dir,可簡寫為 dir
console.dir(object)/dir(object) 命令可以列出參數 object 的所有對象屬性。
dir
7. 複製 copy
你可以通過 copy 方法在控制檯裡複製你想要的東西。
copy
8. 獲取對象鍵值 keys(object)/values(object)
keys_values
9. 函數監聽器 monitor(function)/unmonitor(function)
monitor(function),當調用指定的函數時,會將一條消息記錄到控制檯,該消息指示調用時傳遞給該函數的函數名和參數。
使用 unmonitor(函數)停止對指定函數的監視。
monitor
10. 事件監聽器 monitorEvents(object[, events])/unmonitorEvents(object[, events])
monitorEvents(object[, events]),當指定的對象上發生指定的事件之一時,事件對象將被記錄到控制檯。事件類型可以指定為單個事件或事件數組。
unmonitorevent (object[， events])停止監視指定對象和事件的事件。
monitorevents
11. 耗時監控
通過調用 time()可以開啟計時器。你必須傳入一個字符串參數來唯一標記這個計時器的 ID。當你要結束計時的時候可以調用 timeEnd()，並且傳入指定的名字。計時結束後控制檯會打印計時器的名字和具體的時間。
time
12. 分析程序性能
在 DevTools 窗口控制檯中，調用 console.profile()開啟一個 JavaScript CPU 分析器.結束分析器直接調用 console.profileEnd().
profile
具體的性能分析會在分析器面板中
profile_1
13. 統計表達式執行次數
count()方法用於統計表達式被執行的次數,它接受一個字符串參數用於標記不同的記號。如果兩次傳入相同的字符串,該方法就會累積計數。
count
14. 清空控制檯歷史記錄
可以通過下面的方式清空控制檯歷史:
- 在控制檯右鍵，或者按下 Ctrl 並單擊鼠標，選擇 Clear Console。
- 在腳本窗口輸入 clear()執行。
- 在 JavaScript 腳本中調用 console.clear()。
- 使用快捷鍵 Cmd + K (Mac) Ctrl + L (Windows and Linux)。
clear
15. 異步操作
async/await 使得異步操作變得更加容易和可讀。唯一的問題在於 await 需要在 async 函數中使用。Chrome DevTools 支持直接使用 await。
await
16. debugger 斷點
有時候我們需要打斷點進行單步調試,一般會選擇在瀏覽器控制檯直接打斷點,但這樣還需要先去 Sources 裡面找到源碼,然後再找到需要打斷點的那行代碼,比較麻煩。
使用 debugger 關鍵詞,我們可以直接在源碼中定義斷點,方便很多。
debugger
17. 截圖
我們經常需要截圖,Chrome DevTools 提供了 4 種截圖方式,基本覆蓋了我們的需求場景,快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 screenshot,可以看到以下 4 個選項:
screenshot
去試試吧,很香!
18. 切換主題
Chrome 提供了 亮&暗 兩種主題,當你視覺疲勞的時候,可以 switch 哦, 快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 theme ,即可選擇切換
theme
19. 複製 Fetch
在 Network 標籤下的所有的請求,都可以複製為一個完整的 Fetch 請求的代碼。
copy-fetch
20. 重寫 Overrides
在 Chrome DevTools 上調試 css 或 JavaScript 時,修改的屬性值在重新刷新頁面時,所有的修改都會被重置。
如果你想把修改的值保存下來,刷新頁面的時候不會被重置,那就看看下面這個特性（Overrides）吧。Overrides 默認是關閉的,需要手動開啟,開啟的步驟如下。
開啟的操作:
打開 Chrome DevTools 的 Sources 標籤頁
選擇 Overrides 子標籤
選擇 + Select folder for overrides,來為 Overrides 設置一個保存重寫屬性的目錄
overrides
21. 實時表達式 Live Expression
從 chrome70 起,我們可以在控制檯上方可以放一個動態表達式,用於實時監控它的值。Live Expression 的執行頻率是 250 毫秒。
點擊 "Create Live Expression" 眼睛圖標,打開動態表達式界面,輸入要監控的表達式
live_expression
22. 檢查動畫
Chrome DevTools 動畫檢查器有兩個主要用途。
- 檢查動畫。您希望慢速播放、重播或檢查動畫組的源代碼。
- 修改動畫。您希望修改動畫組的時間、延遲、持續時間或關鍵幀偏移。 當前不支持編輯貝塞爾曲線和關鍵幀。
動畫檢查器支持 CSS 動畫、CSS 過渡和網絡動畫。當前不支持 requestAnimationFrame 動畫。
快捷鍵 ctrl+shift+p ,打開 Command Menu,鍵入 Drawer: Show Animations。
animations
23. 滾動到視圖區域 Scroll into view
scrollintoview
24. 工作區編輯文件 Edit Files With Workspaces
工作空間使您能夠將在 Chrome Devtools 中進行的更改保存到計算機上相同文件的本地副本。
進入 Sources Menu, Filesystem 下 點擊 Add folder to workspace 添加要同步的工作目錄
workspaces
快捷鍵
訪問 DevTools
全局鍵盤快捷鍵
下列鍵盤快捷鍵可以在所有 DevTools 面板中使用:
控制檯
閱讀更多 Java領域佼佼者 的文章
