你所不知道的10個“Chrome開發者工具”使用技巧
今天給大家分享一些使用“Chrome開發者工具”的小技巧。包括除錯,優化頁面渲染速度等。希望能提升Web開發人員的工作效率。
1,開啟Shadow DOM顯示
瀏覽器對例如Video、Password等元件進行了封裝,無法檢視到元件的詳細程式碼,不利於除錯。幸好,通過配置能夠在元素標籤器中顯示被隱藏的元件程式碼。
實現:Settings → General → Elements → Show user agent shadow DOM
2,在控制檯快速選擇元素,
在Chrome Dev Tools 控制檯中還可以通過$變數來選擇DOM元素:
- $:Chrome控制檯中原生支援類jQuery的選擇器。用$加上熟悉的css選擇器就能選擇DOM節點。
- $0 ~ $4:最近選擇過的5個DOM節點。$0會返回最近一次點選的DOM結點。以此類推,$1返回的是上上次點選的DOM節點。最多可以儲存5個,如果不滿5個,則返回undefined。
3,多行插入符編輯內容
在Sources編輯框中,按住Ctrl(Cmd for Mac),在要編輯的地方點選滑鼠,可以設定多個插入符。按下Ctrl + U 撤銷編輯,快速輸入,快速刪除。
4,使用”3步快照”技術來找出JavaScript記憶體洩露
1,開啟開發者工具並且切換到Profiles皮膚裡;
2,在頁面執行一個能引起記憶體洩露的操作;
3,點選“Take Snapshot”來執行一個堆快照;
4,重複執行步驟 2 和步驟 3 三次;
5,選擇最後一個堆快照;
6,將過濾器從“所有物件”改為“快照 1 和 2 之間的物件”;
現在應該已經可以看到一組新的洩露物件的集合,選擇其中的一個然後檢視是什麼導致的記憶體洩露。
5,強制改變元素狀態
實現:
- Elements皮膚右側Styles標籤 → Toggle Element State
- Elements皮膚左側右擊 → Force element state
6,快速查詢檔案&搜尋特定字串
實現:Sources皮膚下 Ctrl+P(Cmd+P for mac)
開發者工具支援在原始碼中搜尋特定的字串的功能,這種搜尋方式不但能區分大小寫,還支援正規表示式。
實現:Sources皮膚下 Ctrl + Shift + F(Cmd + Shift + F for mac)
7,多列內容選擇&匹配相同選項
實現:
多列內容選擇:按住Alt鍵,當滑鼠箭頭變為“+”號後,點選滑鼠
匹配相同選項:選中需要匹配的元素,快捷鍵Ctrl + D(Cmd + D for mac)
8,改變顏色模式&自定義調色盤
開發者工具支援在rgba、hsl和hexadecimal來回切換顏色模式和實時編輯預覽頁面顏色。
實現:
改變顏色模式:Shift + 點選滑鼠
自定義調色盤:點選樣式區域顏色前面的小方塊
9,裝置模式&移動模擬
開發者工具能夠模擬不同移動裝置,快速測試移動端的使用者體驗,解決除錯困難的問題。
- 通過模擬不同的螢幕大小和解析度來測試響應式的設計效果, 也可以模擬Retina 螢幕;
- 使用網路模擬器來評估你的站點的效能,並且不會影響到其他選項;
- 視覺化並審查 CSS 樣式;
- 準確模擬裝置輸入,比如觸控事件、地理位置以及裝置螢幕朝向。
裝置模式的另一個很酷的功能是模擬移動裝置的感測器,例如觸控螢幕和加速計,甚至可以更改你的地理位置。
實現:Esc鍵 → Emulation → Enable emulation → Sensors
10,Workspace編輯本地檔案
Workspace把開發者工具變成了一個真正的IDE。將Sources選項卡中的檔案和本地專案中的檔案進行匹配,直接編輯和儲存,不必複製/貼上到編輯器。
實現:Source左側皮膚下右擊 → Add Folder to worksapce
相關文章
- 你所不知道的 Chrome 控制檯除錯技巧Chrome除錯
- chrome開發者工具的使用Chrome
- chrome開發者工具使用Chrome
- chrome開發者工具各種騷技巧Chrome
- 五個你所不知道的Flutter開發細節Flutter
- 使用Chrome 開發者工具提取對應的字串Chrome字串
- Chrome DevTools 中你可能不知道的 9 個除錯技巧Chromedev除錯
- 深入探索Chrome開發者工具:開發者的利器Chrome
- Selenium系列教程-02 使用Chrome開發者工具Chrome
- Chrome 開發者工具 workspace 的概念Chrome
- Python中你所不知道的“隱藏技巧”!Python
- 你不知道的前端SDK開發技巧前端
- Chrome開發者工具裡的一個隱藏技能:chrome://net-internalsChrome
- 10 個你可能不知道的 Android Studio 技巧Android
- chrome開發者工具 - 00 概述Chrome
- 【譯】你不知道的 Chrome 除錯工具技巧 第十三天:物件 & 方法Chrome除錯物件
- 【譯】你不知道的 Chrome 除錯工具技巧 第十五天:Twitter day!Chrome除錯
- 【譯】你不知道的 Chrome 除錯工具技巧 第十九天:深入 DrawerChrome除錯
- 【譯】你不知道的 Chrome 除錯工具技巧 第十六天:斷點Chrome除錯斷點
- 【譯】你不知道的Chrome除錯工具技巧 第六天:command 選單Chrome除錯
- 【譯】你不知道的Chrome除錯工具技巧 第二天:copying & savingChrome除錯
- 使用Chrome開發者工具研究JavaScript的垃圾回收機制ChromeJavaScript
- 【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 ‘$’Chrome除錯
- 【譯】你不知道的Chrome除錯工具技巧 第一天:console中的 '$'Chrome除錯
- 【譯】你不知道的 Chrome 除錯工具技巧 第十四天:其他快捷鍵~Chrome除錯
- 【譯】你不知道的 Chrome 除錯工具技巧 第十七天:再會consoleChrome除錯
- chrome開發者工具使用教程-02-console皮膚Chrome
- chrome 開發者工具使用教程-01-element皮膚Chrome
- 使用 Chrome 開發者工具分析記憶體問題Chrome記憶體
- Chrome開發者工具Debug入門Chrome
- Chrome 72 開發者工具新特性Chrome
- Chrome 77 開發者工具新特性Chrome
- Google Chrome 開發者工具漏洞利用GoChrome
- Jerry和您聊聊Chrome開發者工具Chrome
- 【譯】你不知道的 Chrome 除錯工具技巧 第二十天:Workspace的黑魔法Chrome除錯
- 你所不知道的 CSS 陰影技巧與細節CSS
- Chrome 開發者工具裡的 CSS grid editorChromeCSS
- 聊聊 Chrome DevTools 中你可能不知道的除錯技巧Chromedev除錯
- 【譯】你不知道的Chrome除錯工具技巧 第四天:the Elements panel(元素皮膚)Chrome除錯