1. 檢視元素偽類 css 樣式

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

2. 臨時增刪元素 class3. document.body.contentEditable="true"

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

4. 檢視 placeholder 樣式

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

5. 測試頁面效能和 SEO

下面是測試報告：

參考資料：

使用 Lighthouse 審查網路應用6. Network 顯示資源的其他資訊

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

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

7. 檢視元素繫結事件

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

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

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

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

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

參考資料

Get Started With Analyzing Runtime Performance10. Rendering 實時檢測網頁變化

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

下面是比較實用的功能：

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

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

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

更多文章，敬請關注