# **[本站小福利 點(diǎn)我獲取阿里云優(yōu)惠券]
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è)面安全及證書問題
Audis面板：使用Google Lighthouse輔助性能分析砸狞，給出優(yōu)化建議
打開方式
在Chrome菜單中選擇：更多工具 > 開發(fā)者工具
在頁(yè)面元素上右鍵點(diǎn)擊捻勉，選擇“檢查”
使用快捷鍵：
command + option + I (mac) 或 Ctrl + shift + I (Windows) 打開最近關(guān)閉的狀態(tài)
command + option + C (mac) 或 Ctrl + shift + C (Windows) 直接打開Elements元素面板
command + option + J (mac) 或 Ctrl + shift + J (Windows) 直接打開Console控制臺(tái)面板
禁用緩存
切換到“Network”網(wǎng)絡(luò)面板
勾選“Disable cache”項(xiàng)
手動(dòng)清理網(wǎng)站緩存
按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
輸入 “clear site data”
敲回車鍵
彈出命令輸入框
輸入命令
此操作能清空Cookies刀森、WebSQL踱启、Service Workers、Cache Storage研底、IndexedDB埠偿、Local Storage、Application Cache
展開某標(biāo)簽下所有層級(jí)的標(biāo)簽
切換 “Elements" 元素面板
按住 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è)簽
展開相應(yīng)的事件名冠蒋，如“click”
對(duì) “handler” 點(diǎn)擊右鍵，選擇 “Show funciton definition”
選擇文檔節(jié)點(diǎn)
選擇 Event Listeners 頁(yè)簽
展開事件
右鍵“handler”
定位結(jié)果
打開某個(gè)資源文件
按 command + p （windows 按 Ctrl + p）乾胶，彈出文件搜索框
輸入文件名
敲回車鍵
彈出文件搜索框
輸入文件名
快速定位源代碼行數(shù)
按 command + p （windows 按 Ctrl + p）抖剿，彈出輸入框
輸入 :行數(shù)，如 ":480"
敲回車鍵
格式化代碼
點(diǎn)擊已打開文件左下角的花括號(hào)按鈕
格式化結(jié)果
對(duì)某行代碼打斷點(diǎn)
點(diǎn)擊代碼左側(cè)的行號(hào)
鼠標(biāo)移至代碼中的變量可實(shí)時(shí)查看值
監(jiān)聽斷點(diǎn)環(huán)境下的變量
切換 “watch” 面板
點(diǎn)擊 “ + ” 按鈕
輸入要監(jiān)聽的變量
敲回車鍵
查找加載圖片的代碼
切換 “Network” 網(wǎng)絡(luò)面板
點(diǎn)擊 “Initiator” 列下的文件名
定位結(jié)果
全局查詢請(qǐng)求頭和響應(yīng)體
切換 “Network” 頁(yè)簽
點(diǎn)擊左上角的“放大鏡”按鈕
在彈出的搜索框中輸入要查詢的內(nèi)容
敲回車鍵
切換網(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")
敲回車鍵，展開輸出結(jié)果喻频，點(diǎn)擊紅色框位置將會(huì)跳轉(zhuǎn)到相應(yīng)的元素節(jié)點(diǎn)
跳轉(zhuǎn)結(jié)果
在控制臺(tái)中輸入多行代碼
按住Shift鍵敲回車即可換行
換行效果
手動(dòng)添加Cookie
在Application面板中按 esc 鍵缩宜，打開控制臺(tái)面板
輸入：document.cookie = "test=1"
手動(dòng)添加LocalStorage
在Application面板中按 esc 鍵，打開控制臺(tái)面板
輸入：localStorage.setItem('test', '1')
模擬手機(jī)調(diào)試
點(diǎn)擊 DevTools 左上角的手機(jī)圖標(biāo)按鈕半抱，如圖：
手機(jī)調(diào)試面板菜單介紹
打開傳感器設(shè)置面板
按 command + shift + p （windows 按 Ctrl + shift + p）脓恕，彈出命令輸入框
輸入 “ show Sensors ”
敲回車鍵
傳感器設(shè)置面板介紹
設(shè)置網(wǎng)頁(yè) User agent
按 command + shift + p （windows 按 Ctrl + shift + p）膜宋，彈出命令輸入框
輸入 “ show Network conditions ”
取消勾選 “ Select automatically ”
點(diǎn)擊 “Custom...” 下拉框窿侈，選擇相應(yīng)的代理設(shè)備
截圖
按 command + shift + p （windows 按 Ctrl + shift + p），彈出命令輸入框
輸入：screenshot
如下圖選擇相應(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 開發(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
打開Chrome秋茫，輸入網(wǎng)址：chrome://extensions/
點(diǎn)擊按鈕 “ 加載已解壓的擴(kuò)展程序 ”
選擇 vue-devtools 目錄下的 shell/chrome 即可
回復(fù)關(guān)鍵字：
1史简、回復(fù) “40” 查看 中國(guó)互聯(lián)網(wǎng)40年江湖風(fēng)云，江湖再無(wú)風(fēng)清揚(yáng)，再有少年郎
2圆兵、回復(fù) “國(guó)旗” 獲取國(guó)旗頭像教程
3跺讯、回復(fù) “Ubuntu” 獲取100 個(gè)最佳 Ubuntu 應(yīng)用
4、回復(fù) “idea” 獲取最新idea破解教程
