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

1. 查看元素僞類 css 樣式

例如我想查看元素觸發 hover 時的 css 樣式。先選中該元素，而後按下圖操做：

2. 臨時增刪元素 class

3. 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 上，可查看具體的函數代碼。

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，也有不少講解使用方法的文章。

參考資料

• Get Started With Analyzing Runtime 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 信息。