9大功能面板

1. Elements元素面板：檢查和調整頁面，調試DOM和CSS
2. Network網絡面板：調試請求，了解頁面靜態(tài)資源分布，網頁性能檢測
3. Console控制臺面板：調試JavaScript，查看日志，交互式代碼調試
4. Sources源代碼資源面板：調試JavaScript頁面源代碼，進行斷點調試
5. Application應用面板：查看和調試客戶端存儲，如Cookie、LocalStorage、SessionStorage
6. Performance性能面板：查看頁面性能細節(jié)，細粒度對網頁載入進行性能優(yōu)化
7. Memory內存面板：JavaScript CPU分析器，內存堆分析器
8. Security安全面板：查看頁面安全及證書問題
9. Audis面板：使用Google Lighthouse輔助性能分析，給出優(yōu)化建議

打開方式

• 在Chrome菜單中選擇：更多工具 > 開發(fā)者工具
• 在頁面元素上右鍵點擊，選擇“檢查”
• 使用快捷鍵：
  • command + option + I (mac) 或 Ctrl + shift + I (Windows) 打開最近關閉的狀態(tài)
  • command + option + C (mac) 或 Ctrl + shift + C (Windows) 直接打開Elements元素面板
  • command + option + J (mac) 或 Ctrl + shift + J (Windows) 直接打開Console控制臺面板

禁用緩存

1. 切換到“Network”網絡面板
2. 勾選“Disable cache”項

手動清理網站緩存

1. 按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
2. 輸入 “clear site data”
3. 敲回車鍵

彈出命令輸入框

輸入命令

此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache

展開某標簽下所有層級的標簽

1. 切換 “Elements" 元素面板
2. 按住 Alt 鍵點擊某個文檔節(jié)點左側的小箭頭

強制設置元素的狀態(tài)

1. 選中元素
2. 點擊Style面板下的“ :hov ” 按鈕
3. 勾選要切換的狀態(tài)

查找某元素綁定的事件

1. 切換 “Elements" 元素面板，點擊文檔節(jié)點
2. 選擇 “Event Listeners” 頁簽
3. 展開相應的事件名，如“click”
4. 對 “handler” 點擊右鍵，選擇 “Show funciton definition”

選擇文檔節(jié)點

選擇 Event Listeners 頁簽

展開事件

右鍵“handler”

定位結果

打開某個資源文件

1. 按 command + p （windows 按 Ctrl + p），彈出文件搜索框
2. 輸入文件名
3. 敲回車鍵

彈出文件搜索框

輸入文件名

快速定位源代碼行數

1. 按 command + p （windows 按 Ctrl + p），彈出輸入框
2. 輸入 :行數，如 ":480"
3. 敲回車鍵

格式化代碼

點擊已打開文件左下角的花括號按鈕

格式化結果

對某行代碼打斷點

• 點擊代碼左側的行號
• 鼠標移至代碼中的變量可實時查看值

QQ20190822-134244.png

監(jiān)聽斷點環(huán)境下的變量

1. 切換 “watch” 面板
2. 點擊 “ + ” 按鈕
3. 輸入要監(jiān)聽的變量
4. 敲回車鍵

查找加載圖片的代碼

1. 切換 “Network” 網絡面板
2. 點擊 “Initiator” 列下的文件名

定位結果

全局查詢請求頭和響應體

1. 切換 “Network” 頁簽
2. 點擊左上角的“放大鏡”按鈕
3. 在彈出的搜索框中輸入要查詢的內容
4. 敲回車鍵

QQ20190822-090016.png

切換網絡模式

1. 切換 Network 網絡面板
2. 點擊 “ online ” 下拉面板
3. 選擇要切換的網絡模式

限制網速

1. 切換 Network 網絡面板
2. 點擊 “ online ” 下拉面板
3. 選擇 “ add ” 選項
4. 點擊 “ Add custom profile... ” 按鈕
5. 依次輸入“Profile Name”、“Download”、“Upload”等輸入項
6. 點擊 "Add" 按鈕
7. 回到 Network 網絡面板切換所新增的網絡模式

在Console控制臺查找DOM

1. 切換到Console控制臺面板
2. 輸入：document.querySelectorAll("#APP")
3. 敲回車鍵，展開輸出結果，點擊紅色框位置將會跳轉到相應的元素節(jié)點

跳轉結果

在控制臺中輸入多行代碼

按住Shift鍵敲回車即可換行

換行效果

手動添加Cookie

1. 在Application面板中按 esc 鍵，打開控制臺面板
2. 輸入：document.cookie = "test=1"

手動添加LocalStorage

1. 在Application面板中按 esc 鍵，打開控制臺面板
2. 輸入：localStorage.setItem('test', '1')

模擬手機調試

點擊 DevTools 左上角的手機圖標按鈕，如圖：

手機調試面板菜單介紹

打開傳感器設置面板

1. 按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
2. 輸入 “ show Sensors ”
3. 敲回車鍵

傳感器設置面板介紹

QQ20190822-235212.png

設置網頁 User agent

1. 按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
2. 輸入 “ show Network conditions ”
3. 取消勾選 “ Select automatically ”
4. 點擊 “Custom...” 下拉框，選擇相應的代理設備

QQ20190822-235730.png

截圖

1. 按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
2. 輸入：screenshot
3. 如下圖選擇相應的截圖方式：

• Capture area screenshot：截取某個區(qū)域（需要選擇某個標簽）
• Capture full size screenshot：截取整個網頁
• Capture node screenshot：截取某個標簽節(jié)點
• Capture screenshot：截取當前可視區(qū)域

集成 Vue.js 開發(fā)者工具

1. 進入官網：https://cn.vuejs.org/
2. 選擇 “ 生態(tài)系統(tǒng) ” 菜單下的 “ Devtools ”
3. 下載源碼后解壓
4. 在終端切換到解壓后的文件目錄
5. 輸入打包命令（需安裝webpack）：cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
6. 打開Chrome，輸入網址：chrome://extensions/
7. 點擊按鈕 “ 加載已解壓的擴展程序 ”
8. 選擇 vue-devtools 目錄下的 shell/chrome 即可

QQ20190823-002907.png