chrome 開發(fā)者工具——前端實用功能總結(jié)
1. 查看元素偽類 css 樣式
例如我想查看元素觸發(fā) hover 時的 css 樣式。先選中該元素，然后按下圖操作：
2. 臨時增刪元素 class
3. document.body.contentEditable="true"
在控制臺輸入 document.body.contentEditable="true"，就可以對頁面直接進(jìn)行編輯。
4. 查看 placeholder 樣式
現(xiàn)在可以查看元素的 placeholder 樣式了：
5. 測試頁面性能和 SEO
下面是測試報告：
參考資料：
使用 Lighthouse 審查網(wǎng)絡(luò)應(yīng)用
6. Network 顯示資源的其他信息
一般 Network 會顯示加載資源的詳細(xì)信息，但它默認(rèn)只顯示部分信息。如果我想查詢網(wǎng)頁資源是通過 HTTP1.1 還是 HTTP2 加載的，要怎么做呢？
從 GIF 中可以看出，除了 HTTP 協(xié)議版本外，還可以查看其他信息，例如 HTTP 請求的方法、域名等等。
7. 查看元素綁定事件
鼠標(biāo)移到 handler 上，可查看具體的函數(shù)代碼。
8. 全局搜索代碼
打開開發(fā)者工具，點擊 Console 標(biāo)簽，按 ESC 彈出：
點擊左邊豎形排列的三個小點，選擇 Search：
點擊搜索結(jié)果，會跳到具體的源碼文件。它會搜索該網(wǎng)頁下所有引入的文件。
9. 利用 Performance 檢查運行時性能
打開開發(fā)者工具，點擊 Performance 標(biāo)簽：
點擊左上角的 Record 按鈕開始記錄，然后你模擬正常用戶使用網(wǎng)頁。測試完畢后，點擊 Stop。
可以看到右上角分別有 FPS、CPU、NET、HEAP：
FPS 對應(yīng)的是幀率，紅色代表幀率低，可能會降低用戶體驗；綠色代表幀率正常，綠色條越高，F(xiàn)PS 越高。 CPU 部分上有黃色、紫色等色塊，它們的釋義請看圖的左下角。誰的占比高，說明 CPU 主要的時間花在哪里。 HEAP 就是堆內(nèi)存占用。
NET 最好點擊下面的 Network 查看，可以看到具體的加載資源等。
一般根據(jù)這些信息就能判斷出網(wǎng)頁性能問題出在哪。
如果想了解更多，請查看下面的參考資料，需要翻 qiang?；蛘哂盟阉饕嫠阉?chrome performance，也有很多講解使用方法的文章。
參考資料
Get Started With Analyzing Runtime Performance
10. Rendering 實時檢測網(wǎng)頁變化
打開開發(fā)者工具，點擊 Console 標(biāo)簽，按 ESC 彈出：
點擊左邊豎形排列的三個小點，選擇 Rendering：
下面是比較實用的功能：
Paint flashing，實時高亮重繪區(qū)域（綠色）。 Layout Shift Regions，實時高亮重排（重新布局）區(qū)域（藍(lán)色）。 Layer borders，將合成層用邊框標(biāo)出來（橙色、橄欖色、青色）。 Frame Rendering Stats，顯示 GPU 的信息，舊版本還有實時 FPS 顯示，但新版本不知道為何沒有（chrome 86）。
11. Application 查看應(yīng)用信息
從圖中看到，在 Application 標(biāo)簽下可以查到本頁面很多信息。拿 localStorage 舉例，現(xiàn)在我執(zhí)行代碼 localStorage.setItem('token', '123')，然后打開 Application：
不出意外，能看到新增的 localStorage 信息。
推薦閱讀