例如我想查看元素觸發 hover 時的 css 樣式。先選中該元素，然後按下圖操作：
2. 臨時增刪元素 class3. 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：
FPS 對應的是幀率，紅色代表幀率低，可能會降低用戶體驗；綠色代表幀率正常，綠色條越高，FPS 越高。CPU 部分上有黃色、紫色等色塊，它們的釋義請看圖的左下角。誰的佔比高，說明 CPU 主要的時間花在哪裡。NET 最好點擊下面的 Network 查看，可以看到具體的加載資源等。
一般根據這些信息就能判斷出網頁性能問題出在哪。
如果想了解更多，請查看下面的參考資料，需要翻 qiang。或者用搜尋引擎搜索 chrome performance，也有很多講解使用方法的文章。
參考資料
Get Started With Analyzing Runtime Performance10. Rendering 實時檢測網頁變化打開開發者工具，點擊 Console 標籤，按 ESC 彈出：
點擊左邊豎形排列的三個小點，選擇 Rendering：
下面是比較實用的功能：
Paint flashing，實時高亮重繪區域（綠色）。Layout Shift Regions，實時高亮重排（重新布局）區域（藍色）。Layer borders，將合成層用邊框標出來（橙色、橄欖色、青色）。Frame Rendering Stats，顯示 GPU 的信息，舊版本還有實時 FPS 顯示，但新版本不知道為何沒有（chrome 86）。11. Application 查看應用信息從圖中看到，在 Application 標籤下可以查到本頁面很多信息。拿 localStorage 舉例，現在我執行代碼 localStorage.setItem('token', '123')，然後打開 Application：
不出意外，能看到新增的 localStorage 信息。