0202年了, Chrome DevTools 你還只會console.log嗎 ?
前言
調(diào)試技巧Chrome 開發(fā)者工具（簡稱 DevTools）是一套 Web 開發(fā)調(diào)試工具,內(nèi)嵌于 Google Chrome 瀏覽器中。DevTools 使開發(fā)者更加深入的了解瀏覽器內(nèi)部以及他們編寫的應(yīng)用。通過使用 DevTools,可以更加高效的定位頁面布局問題,設(shè)置 JavaScript 斷點并且更好的理解代碼優(yōu)化。
本文分享 24 個 Chrome 調(diào)試技巧和一些快捷鍵,希望能幫你進一步了解 Chrome DevTools ～
1. 控制臺中直接訪問頁面元素
在元素面板選擇一個元素,然后在控制臺輸入 $0,就會在控制臺中得到剛才選中的元素。如果頁面中已經(jīng)包含了 jQuery,你也可以使用 $($0)來進行選擇。
你也可以反過來,在控制臺輸出的 DOM 元素上右鍵選擇 Reveal in Elements Panel 來直接在 DOM 樹種查看。
02. 訪問最近的控制臺結(jié)果
在控制臺輸入 $_可以獲控制臺最近一次的輸出結(jié)果。
_3. 訪問最近選擇的元素和對象
控制臺會存儲最近 5 個被選擇的元素和對象。當(dāng)你在元素面板選擇一個元素或在分析器面板選擇一個對象,記錄都會存儲在棧中。可以使用 $x來操作歷史棧,x 是從 0 開始計數(shù)的,所以 $0 表示最近選擇的元素, $4 表示最后選擇的元素。
44. 選擇元素
$()- 返回滿足指定 CSS 規(guī)則的第一個元素，此方法為 document.querySelector()的簡化。$$()- 返回滿足指定 CSS 規(guī)則的所有元素，此方法為 querySelectorAll()的簡化。$x()- 返回滿足指定 XPath 的所有元素。
select5. 使用 console.table
該命令支持以表格的形式輸出日志信息。打印復(fù)雜信息時嘗試使用 console.table 來替代 console.log 會更加清晰。
table6. 使用 console.dir,可簡寫為 dir
console.dir(object)/dir(object) 命令可以列出參數(shù) object 的所有對象屬性。
dir7. 復(fù)制 copy
你可以通過 copy 方法在控制臺里復(fù)制你想要的東西。
copy8. 獲取對象鍵值 keys(object)/values(object)
keys_values9. 函數(shù)監(jiān)聽器 monitor(function)/unmonitor(function)
monitor(function),當(dāng)調(diào)用指定的函數(shù)時,會將一條消息記錄到控制臺,該消息指示調(diào)用時傳遞給該函數(shù)的函數(shù)名和參數(shù)。
使用 unmonitor(函數(shù))停止對指定函數(shù)的監(jiān)視。
monitor10. 事件監(jiān)聽器 monitorEvents(object[, events])/unmonitorEvents(object[, events])
monitorEvents(object[, events]),當(dāng)指定的對象上發(fā)生指定的事件之一時,事件對象將被記錄到控制臺。事件類型可以指定為單個事件或事件數(shù)組。
unmonitorevent (object[， events])停止監(jiān)視指定對象和事件的事件。
monitorevents11. 耗時監(jiān)控
通過調(diào)用 time()可以開啟計時器。你必須傳入一個字符串參數(shù)來唯一標(biāo)記這個計時器的 ID。當(dāng)你要結(jié)束計時的時候可以調(diào)用 timeEnd()，并且傳入指定的名字。計時結(jié)束后控制臺會打印計時器的名字和具體的時間。
time12. 分析程序性能
在 DevTools 窗口控制臺中，調(diào)用 console.profile()開啟一個 JavaScript CPU 分析器.結(jié)束分析器直接調(diào)用 console.profileEnd().
profile具體的性能分析會在分析器面板中
profile_113. 統(tǒng)計表達式執(zhí)行次數(shù)
count()方法用于統(tǒng)計表達式被執(zhí)行的次數(shù),它接受一個字符串參數(shù)用于標(biāo)記不同的記號。如果兩次傳入相同的字符串,該方法就會累積計數(shù)。
count14. 清空控制臺歷史記錄
可以通過下面的方式清空控制臺歷史:
在控制臺右鍵，或者按下 Ctrl 并單擊鼠標(biāo)，選擇 Clear Console。
在腳本窗口輸入 clear()執(zhí)行。
在 JavaScript 腳本中調(diào)用 console.clear()。
使用快捷鍵 Cmd + K (Mac) Ctrl + L (Windows and Linux)。
clear15. 異步操作
async/await 使得異步操作變得更加容易和可讀。唯一的問題在于 await 需要在 async 函數(shù)中使用。Chrome DevTools 支持直接使用 await。
await16. debugger 斷點
有時候我們需要打斷點進行單步調(diào)試,一般會選擇在瀏覽器控制臺直接打斷點,但這樣還需要先去 Sources 里面找到源碼,然后再找到需要打斷點的那行代碼,比較麻煩。
使用 debugger 關(guān)鍵詞,我們可以直接在源碼中定義斷點,方便很多。
debugger17. 截圖
我們經(jīng)常需要截圖,Chrome DevTools 提供了 4 種截圖方式,基本覆蓋了我們的需求場景,快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 screenshot,可以看到以下 4 個選項:
screenshot去試試吧,很香!
18. 切換主題
Chrome 提供了 亮&暗 兩種主題,當(dāng)你視覺疲勞的時候,可以 switch 哦, 快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 theme ,即可選擇切換
theme19. 復(fù)制 Fetch
在 Network 標(biāo)簽下的所有的請求,都可以復(fù)制為一個完整的 Fetch 請求的代碼。
copy-fetch20. 重寫 Overrides
在 Chrome DevTools 上調(diào)試 css 或 JavaScript 時,修改的屬性值在重新刷新頁面時,所有的修改都會被重置。
如果你想把修改的值保存下來,刷新頁面的時候不會被重置,那就看看下面這個特性（Overrides）吧。Overrides 默認是關(guān)閉的,需要手動開啟,開啟的步驟如下。
開啟的操作:
打開 Chrome DevTools 的 Sources 標(biāo)簽頁
選擇 Overrides 子標(biāo)簽
選擇 + Select folder for overrides,來為 Overrides 設(shè)置一個保存重寫屬性的目錄
overrides21. 實時表達式 Live Expression
從 chrome70 起,我們可以在控制臺上方可以放一個動態(tài)表達式,用于實時監(jiān)控它的值。Live Expression 的執(zhí)行頻率是 250 毫秒。
點擊 "Create Live Expression" 眼睛圖標(biāo),打開動態(tài)表達式界面,輸入要監(jiān)控的表達式
live_expression22. 檢查動畫
Chrome DevTools 動畫檢查器有兩個主要用途。
檢查動畫。您希望慢速播放、重播或檢查動畫組的源代碼。
修改動畫。您希望修改動畫組的時間、延遲、持續(xù)時間或關(guān)鍵幀偏移。當(dāng)前不支持編輯貝塞爾曲線和關(guān)鍵幀。
動畫檢查器支持 CSS 動畫、CSS 過渡和網(wǎng)絡(luò)動畫。當(dāng)前不支持 requestAnimationFrame 動畫。
快捷鍵 ctrl+shift+p ,打開 Command Menu,鍵入 Drawer: Show Animations。
animations23. 滾動到視圖區(qū)域 Scroll into view
scrollintoview24. 工作區(qū)編輯文件 Edit Files With Workspaces
工作空間使您能夠?qū)⒃?Chrome Devtools 中進行的更改保存到計算機上相同文件的本地副本。
進入 Sources Menu, Filesystem 下 點擊 Add folder to workspace 添加要同步的工作目錄
workspaces快捷鍵訪問 DevTools
| 訪問 DevTools | Windows | Mac |
|---|---|---|
| 打開 Developer Tools (上一次停靠菜單) | F12、Ctrl + Shift + I | Cmd + Opt + I |
| 打開/切換檢查元素模式和瀏覽器窗口 | Ctrl + Shift + C | Cmd + Shift + C |
| 打開 Developer Tools 并聚焦到控制臺 | Ctrl + Shift + J | Cmd + Opt + J |
全局鍵盤快捷鍵
下列鍵盤快捷鍵可以在所有 DevTools 面板中使用:
| 全局鍵盤快捷鍵 | Windows | Mac |
|---|---|---|
| 下一個面板 | Ctrl + ] | Cmd + ] |
| 上一個面板 | Ctrl + [ | Cmd + [ |
| 更改 DevTools 停靠位置 | Ctrl + Shift + D | Cmd + Shift + D |
| 打開 Device Mode | Ctrl + Shift + M | Cmd + Shift + M |
| 切換控制臺 | Esc | Esc |
| 刷新頁面 | F5、Ctrl + R | Cmd + R |
| 刷新忽略緩存內(nèi)容的頁面 | Ctrl + F5、Ctrl + Shift + R | Cmd + Shift + R |
| 在當(dāng)前文件或面板中搜索文本 | Ctrl + F | Cmd + F |
| 在所有源中搜索文本 | Ctrl + Shift + F | Cmd + Opt + F |
| 按文件名搜索（除了在 Timeline 上） | Ctrl + O、Ctrl + P | Cmd + O、Cmd + P |
| 放大（焦點在 DevTools 中時） | Ctrl + + | Cmd + Shift + + |
| 縮小 | Ctrl + - | Cmd + Shift + - |
| 恢復(fù)默認文本大小 | Ctrl + 0 | Cmd + 0 |
| 打開 command 菜單 | Ctrl + Shift + P | Cmd + Shift + P |
控制臺
| 控制臺快捷鍵 | Windows | Mac |
|---|---|---|
| 上一個命令/行 | 向上鍵 | 向上鍵 |
| 下一個命令/行 | 向下鍵 | 向下鍵 |
| 聚焦到控制臺 | Ctrl + ` | Ctrl + ` |
| 清除控制臺 | Ctrl + L | Cmd + K |
| 多行輸入 | Shift + Enter | Shift + Enter |
| 執(zhí)行 | Enter | Return |
推薦閱讀
我的公眾號能帶來什么價值？(文末有送書規(guī)則，一定要看)
每個前端工程師都應(yīng)該了解的圖片知識(長文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？