chrome 開發者工具——前端實用功能總結

譚光志發表於2020-11-18
Chrome前端

1. 檢視元素偽類 css 樣式

例如我想檢視元素觸發 hover 時的 css 樣式。先選中該元素，然後按下圖操作：

2. 臨時增刪元素 class

3. document.body.contentEditable="true"

在控制檯輸入 document.body.contentEditable="true"，就可以對頁面直接進行編輯。

4. 檢視 placeholder 樣式

現在可以檢視元素的 placeholder 樣式了：

5. 測試頁面效能和 SEO

下面是測試報告：

參考資料：

6. Network 顯示資源的其他資訊

一般 Network 會顯示載入資源的詳細資訊，但它預設只顯示部分資訊。如果我想查詢網頁資源是通過 HTTP1.1 還是 HTTP2 載入的，要怎麼做呢？

從 GIF 中可以看出，除了 HTTP 協議版本外，還可以檢視其他資訊，例如 HTTP 請求的方法、域名等等。

7. 檢視元素繫結事件

滑鼠移到 handler 上，可檢視具體的函式程式碼。

8. 全域性搜尋程式碼

開啟開發者工具，點選 Console 標籤，按 ESC 彈出：

點選左邊豎形排列的三個小點，選擇 Search：

點選搜尋結果，會跳到具體的原始碼檔案。它會搜尋該網頁下所有引入的檔案。

9. 利用 Performance 檢查執行時效能

開啟開發者工具，點選 Performance 標籤：

點選左上角的 Record 按鈕開始記錄，然後你模擬正常使用者使用網頁。測試完畢後，點選 Stop。

可以看到右上角分別有 FPS、CPU、NET、HEAP：

  1. FPS 對應的是幀率，紅色代表幀率低，可能會降低使用者體驗；綠色代表幀率正常，綠色條越高，FPS 越高。
  2. CPU 部分上有黃色、紫色等色塊，它們的釋義請看圖的左下角。誰的佔比高，說明 CPU 主要的時間花在哪裡。
  3. HEAP 就是堆記憶體佔用。

NET 最好點選下面的 Network 檢視，可以看到具體的載入資源等。

一般根據這些資訊就能判斷出網頁效能問題出在哪。

如果想了解更多，請檢視下面的參考資料，需要翻 qiang。或者用搜尋引擎搜尋 chrome performance，也有很多講解使用方法的文章。

參考資料

10. Rendering 實時檢測網頁變化

開啟開發者工具，點選 Console 標籤，按 ESC 彈出：

點選左邊豎形排列的三個小點，選擇 Rendering：

下面是比較實用的功能：

  1. Paint flashing，實時高亮重繪區域（綠色）。
  2. Layout Shift Regions，實時高亮重排（重新佈局）區域（藍色）。
  3. Layer borders，將合成層用邊框標出來（橙色、橄欖色、青色）。
  4. Frame Rendering Stats，顯示 GPU 的資訊，舊版本還有實時 FPS 顯示，但新版本不知道為何沒有（chrome 86）。

11. Application 檢視應用資訊

從圖中看到，在 Application 標籤下可以查到本頁面很多資訊。拿 localStorage 舉例，現在我執行程式碼 localStorage.setItem('token', '123')，然後開啟 Application：

不出意外，能看到新增的 localStorage 資訊。

相關文章