9大功能面板

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

打開(kāi)方式

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

禁用緩存

1. 切換到“Network”網(wǎng)絡(luò)面板
2. 勾選“Disable cache”項(xiàng)

手動(dòng)清理網(wǎng)站緩存

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

彈出命令輸入框

輸入命令

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

展開(kāi)某標(biāo)簽下所有層級(jí)的標(biāo)簽

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

強(qiáng)制設(shè)置元素的狀態(tài)

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

查找某元素綁定的事件

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

選擇文檔節(jié)點(diǎn)

選擇 Event Listeners 頁(yè)簽

展開(kāi)事件

右鍵“handler”

定位結(jié)果

打開(kāi)某個(gè)資源文件

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

彈出文件搜索框

輸入文件名

快速定位源代碼行數(shù)

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

格式化代碼

點(diǎn)擊已打開(kāi)文件左下角的花括號(hào)按鈕

格式化結(jié)果

對(duì)某行代碼打斷點(diǎn)

• 點(diǎn)擊代碼左側(cè)的行號(hào)
• 鼠標(biāo)移至代碼中的變量可實(shí)時(shí)查看值

QQ20190822-134244.png

監(jiān)聽(tīng)斷點(diǎn)環(huán)境下的變量

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

查找加載圖片的代碼

1. 切換 “Network” 網(wǎng)絡(luò)面板
2. 點(diǎn)擊 “Initiator” 列下的文件名

定位結(jié)果

全局查詢(xún)請(qǐng)求頭和響應(yīng)體

1. 切換 “Network” 頁(yè)簽
2. 點(diǎn)擊左上角的“放大鏡”按鈕
3. 在彈出的搜索框中輸入要查詢(xún)的內(nèi)容
4. 敲回車(chē)鍵

QQ20190822-090016.png

切換網(wǎng)絡(luò)模式

1. 切換 Network 網(wǎng)絡(luò)面板
2. 點(diǎn)擊 “ online ” 下拉面板
3. 選擇要切換的網(wǎng)絡(luò)模式

限制網(wǎng)速

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

在Console控制臺(tái)查找DOM

1. 切換到Console控制臺(tái)面板
2. 輸入：document.querySelectorAll("#APP")
3. 敲回車(chē)鍵，展開(kāi)輸出結(jié)果，點(diǎn)擊紅色框位置將會(huì)跳轉(zhuǎn)到相應(yīng)的元素節(jié)點(diǎn)

跳轉(zhuǎn)結(jié)果

在控制臺(tái)中輸入多行代碼

按住Shift鍵敲回車(chē)即可換行

換行效果

手動(dòng)添加Cookie

1. 在Application面板中按 esc 鍵，打開(kāi)控制臺(tái)面板
2. 輸入：document.cookie = "test=1"

手動(dòng)添加LocalStorage

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

模擬手機(jī)調(diào)試

點(diǎn)擊 DevTools 左上角的手機(jī)圖標(biāo)按鈕，如圖：

手機(jī)調(diào)試面板菜單介紹

打開(kāi)傳感器設(shè)置面板

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

傳感器設(shè)置面板介紹

QQ20190822-235212.png

設(shè)置網(wǎng)頁(yè) User agent

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

QQ20190822-235730.png

截圖

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

• Capture area screenshot：截取某個(gè)區(qū)域（需要選擇某個(gè)標(biāo)簽）
• Capture full size screenshot：截取整個(gè)網(wǎng)頁(yè)
• Capture node screenshot：截取某個(gè)標(biāo)簽節(jié)點(diǎn)
• Capture screenshot：截取當(dāng)前可視區(qū)域

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

1. 進(jìn)入官網(wǎng)：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. 打開(kāi)Chrome，輸入網(wǎng)址：chrome://extensions/
7. 點(diǎn)擊按鈕 “ 加載已解壓的擴(kuò)展程序 ”
8. 選擇 vue-devtools 目錄下的 shell/chrome 即可

QQ20190823-002907.png