0202年了, Chrome DevTools 你還只會console.log嗎 ?

前言

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 的全部元素。

5. 使用 console.table

該命令支持以表格的形式輸出日誌信息。打印複雜信息時嘗試使用 console.table 來替代 console.log 會更加清晰。

6. 使用 console.dir,可簡寫爲 dir

console.dir(object)/dir(object) 命令能夠列出參數 object 的全部對象屬性。

7. 複製 copy

你能夠經過 copy 方法在控制檯裏複製你想要的東西。

8. 獲取對象鍵值 keys(object)/values(object)

9. 函數監聽器 monitor(function)/unmonitor(function)

monitor(function),當調用指定的函數時,會將一條消息記錄到控制檯,該消息指示調用時傳遞給該函數的函數名和參數。

使用 unmonitor(函數)中止對指定函數的監視。

10. 事件監聽器 monitorEvents(object[, events])/unmonitorEvents(object[, events])

monitorEvents(object[, events]),當指定的對象上發生指定的事件之一時,事件對象將被記錄到控制檯。事件類型能夠指定爲單個事件或事件數組。

unmonitorevent (object[， events])中止監視指定對象和事件的事件。

11. 耗時監控

經過調用 time()能夠開啓計時器。你必須傳入一個字符串參數來惟一標記這個計時器的 ID。當你要結束計時的時候能夠調用 timeEnd()，而且傳入指定的名字。計時結束後控制檯會打印計時器的名字和具體的時間。

12. 分析程序性能

在 DevTools 窗口控制檯中，調用 console.profile()開啓一個 JavaScript CPU 分析器.結束分析器直接調用 console.profileEnd().

13. 統計表達式執行次數

count()方法用於統計表達式被執行的次數,它接受一個字符串參數用於標記不一樣的記號。若是兩次傳入相同的字符串,該方法就會累積計數。

14. 清空控制檯歷史記錄

能夠經過下面的方式清空控制檯歷史:

• 在控制檯右鍵，或者按下 Ctrl 並單擊鼠標，選擇 Clear Console。
• 在腳本窗口輸入 clear()執行。
• 在 JavaScript 腳本中調用 console.clear()。
• 使用快捷鍵 Cmd + K (Mac) Ctrl + L (Windows and Linux)。

15. 異步操做

async/await 使得異步操做變得更加容易和可讀。惟一的問題在於 await 須要在 async 函數中使用。Chrome DevTools 支持直接使用 await。

16. debugger 斷點

有時候咱們須要打斷點進行單步調試,通常會選擇在瀏覽器控制檯直接打斷點,但這樣還須要先去 Sources 裏面找到源碼,而後再找到須要打斷點的那行代碼,比較麻煩。

使用 debugger 關鍵詞,咱們能夠直接在源碼中定義斷點,方便不少。

17. 截圖

咱們常常須要截圖,Chrome DevTools 提供了 4 種截圖方式,基本覆蓋了咱們的需求場景,快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 screenshot,能夠看到如下 4 個選項:

去試試吧,很香!

18. 切換主題

Chrome 提供了 亮&暗 兩種主題,當你視覺疲勞的時候,能夠 switch 哦, 快捷鍵 ctrl+shift+p ,打開 Command Menu,輸入 theme ,便可選擇切換

19. 複製 Fetch

在 Network 標籤下的全部的請求,均可以複製爲一個完整的 Fetch 請求的代碼。

20. 重寫 Overrides

在 Chrome DevTools 上調試 css 或 JavaScript 時,修改的屬性值在從新刷新頁面時,全部的修改都會被重置。

若是你想把修改的值保存下來,刷新頁面的時候不會被重置,那就看看下面這個特性（Overrides）吧。Overrides 默認是關閉的,須要手動開啓,開啓的步驟以下。

開啓的操做:

打開 Chrome DevTools 的 Sources 標籤頁
選擇 Overrides 子標籤
選擇 + Select folder for overrides,來爲 Overrides 設置一個保存重寫屬性的目錄

21. 實時表達式 Live Expression

從 chrome70 起,咱們能夠在控制檯上方能夠放一個動態表達式,用於實時監控它的值。Live Expression 的執行頻率是 250 毫秒。

點擊 "Create Live Expression" 眼睛圖標,打開動態表達式界面,輸入要監控的表達式

22. 檢查動畫

Chrome DevTools 動畫檢查器有兩個主要用途。

• 檢查動畫。您但願慢速播放、重播或檢查動畫組的源代碼。
• 修改動畫。您但願修改動畫組的時間、延遲、持續時間或關鍵幀偏移。 當前不支持編輯貝塞爾曲線和關鍵幀。

動畫檢查器支持 CSS 動畫、CSS 過渡和網絡動畫。當前不支持 requestAnimationFrame 動畫。

快捷鍵 ctrl+shift+p ,打開 Command Menu,鍵入 Drawer: Show Animations。

23. 滾動到視圖區域 Scroll into view

24. 工做區編輯文件 Edit Files With Workspaces

工做空間使您可以將在 Chrome Devtools 中進行的更改保存到計算機上相同文件的本地副本。

進入 Sources Menu, Filesystem 下 點擊 Add folder to workspace 添加要同步的工做目錄

快捷鍵

訪問 DevTools

訪問 DevTools	Windows	Mac
打開 Developer Tools (上一次停靠菜單)	F十二、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
刷新頁面	F五、Ctrl + R	Cmd + R
刷新忽略緩存內容的頁面	Ctrl + F五、Ctrl + Shift + R	Cmd + Shift + R
在當前文件或面板中搜索文本	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 + -
恢復默認文本大小	Ctrl + 0	Cmd + 0
打開 command 菜單	Ctrl + Shift + P	Cmd + Shift + P

控制檯

控制檯快捷鍵	Windows	Mac
上一個命令/行	向上鍵	向上鍵
下一個命令/行	向下鍵	向下鍵
聚焦到控制檯	Ctrl + `	Ctrl + `
清除控制檯	Ctrl + L	Cmd + K
多行輸入	Shift + Enter	Shift + Enter
執行	Enter	Return

後記

若是你和我同樣喜歡前端,也愛動手摺騰,歡迎關注我一塊兒玩耍啊～ ❤️

github 地址,歡迎 follow 哦～

博客

個人博客,點 star,不迷路～

公衆號

前端時刻