原文：http://www.reibang.com/p/e366183e06f4
本文只是摘取原文一些對(duì)本人比較有用的使用技巧
9大功能面板
Elements元素面板：檢查和調(diào)整頁(yè)面腌且，調(diào)試DOM和CSS
Network網(wǎng)絡(luò)面板：調(diào)試請(qǐng)求怎茫，了解頁(yè)面靜態(tài)資源分布舟铜，網(wǎng)頁(yè)性能檢測(cè)
Console控制臺(tái)面板：調(diào)試JavaScript独令，查看日志，交互式代碼調(diào)試
Sources源代碼資源面板：調(diào)試JavaScript頁(yè)面源代碼辑奈，進(jìn)行斷點(diǎn)調(diào)試
Application應(yīng)用面板：查看和調(diào)試客戶端存儲(chǔ)纯路，如Cookie、LocalStorage浮禾、SessionStorage
Performance性能面板：查看頁(yè)面性能細(xì)節(jié)，細(xì)粒度對(duì)網(wǎng)頁(yè)載入進(jìn)行性能優(yōu)化
Memory內(nèi)存面板：JavaScript CPU分析器份汗，內(nèi)存堆分析器
Security安全面板：查看頁(yè)面安全及證書(shū)問(wèn)題
Audis面板：使用Google Lighthouse輔助性能分析盈电，給出優(yōu)化建議
打開(kāi)方式
快捷鍵Ctrl + shift + J；按 command + shift + p （windows 按 Ctrl + shift + p）杯活，彈出命令輸入框匆帚。（說(shuō)明：下面所有的快捷鍵都是在windows下的）
展開(kāi)/縮起某標(biāo)簽下所有層級(jí)的標(biāo)簽
1.切換 “Elements" 元素面板
2.按住 Alt 鍵點(diǎn)擊某個(gè)文檔節(jié)點(diǎn)左側(cè)的小箭頭切換
強(qiáng)制設(shè)置元素的狀態(tài)
- 選中元素
- 點(diǎn)擊Style面板下的“ :hov ” 按鈕
- 勾選要切換的狀態(tài)
查找某元素綁定的事件
- 切換 “Elements" 元素面板，點(diǎn)擊文檔節(jié)點(diǎn)
- 選擇 “Event Listeners” 頁(yè)簽
- 展開(kāi)相應(yīng)的事件名轩猩，如“click”
- 對(duì) “handler” 點(diǎn)擊右鍵卷扮，選擇 “Show funciton definition”
打開(kāi)某個(gè)資源文件/快速定位源代碼行數(shù)
1.按command + p （windows 按 Ctrl + p）荡澎，彈出文件搜索框
2.輸入文件名/輸入 :行數(shù)均践，如 ":480"
3.敲回車鍵
格式化代碼
點(diǎn)擊已打開(kāi)文件左下角的花括號(hào)按鈕
對(duì)某行代碼打斷點(diǎn)
- 點(diǎn)擊代碼左側(cè)的行號(hào)
- 鼠標(biāo)移至代碼中的變量可實(shí)時(shí)查看值
監(jiān)聽(tīng)斷點(diǎn)環(huán)境下的變量
- 切換 “watch” 面板
- 點(diǎn)擊 “ + ” 按鈕
- 輸入要監(jiān)聽(tīng)的變量
- 敲回車鍵
切換網(wǎng)絡(luò)模式
- 切換 Network 網(wǎng)絡(luò)面板
- 點(diǎn)擊 “ online ” 下拉面板
- 選擇要切換的網(wǎng)絡(luò)模式
限制網(wǎng)速
- 切換 Network 網(wǎng)絡(luò)面板
- 點(diǎn)擊 “ online ” 下拉面板
- 選擇 “ add ” 選項(xiàng)
- 點(diǎn)擊 “ Add custom profile... ” 按鈕
- 依次輸入“Profile Name”、“Download”摩幔、“Upload”等輸入項(xiàng)
- 點(diǎn)擊 "Add" 按鈕
- 回到 Network 網(wǎng)絡(luò)面板切換所新增的網(wǎng)絡(luò)模式
在Console控制臺(tái)查找DOM
- 切換到Console控制臺(tái)面板
- 輸入：document.querySelectorAll("#APP")
- 敲回車鍵彤委，展開(kāi)輸出結(jié)果，點(diǎn)擊紅色框位置將會(huì)跳轉(zhuǎn)到相應(yīng)的元素節(jié)點(diǎn)
在控制臺(tái)中輸入多行代碼
按住Shift鍵敲回車即可換行
手動(dòng)添加Cookie
- 在Application面板中按 esc 鍵或衡，打開(kāi)控制臺(tái)面板
- 輸入：document.cookie = "test=1"
手動(dòng)添加LocalStorage
- 在Application面板中按 esc 鍵焦影，打開(kāi)控制臺(tái)面板
- 輸入：localStorage.setItem('test', '1')
模擬手機(jī)調(diào)試
點(diǎn)擊 DevTools 左上角的手機(jī)圖標(biāo)按鈕车遂，如圖：
手機(jī)調(diào)試面板菜單介紹
集成 Vue.js 開(kāi)發(fā)者工具
- 進(jìn)入官網(wǎng)：https://cn.vuejs.org/
- 選擇 “ 生態(tài)系統(tǒng) ” 菜單下的 “ Devtools ”
- 下載源碼后解壓
- 在終端切換到解壓后的文件目錄
- 輸入打包命令（需安裝webpack）：cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
- 打開(kāi)Chrome，輸入網(wǎng)址：chrome://extensions/
- 點(diǎn)擊按鈕 “ 加載已解壓的擴(kuò)展程序 ”
- 選擇 vue-devtools 目錄下的 shell/chrome 即可
