一文學會使用Chrome開發者調試工具

打開 Chrome 開發者工具

1. 在 Chrome 菜單中選擇 」更多工具「 > 」開發者工具「

2. 在頁面元素上右鍵點擊，選擇 「檢查」

3. 使用 快捷鍵 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)

4. F12

通用技能

如下技巧僅在Chrome控制檯可用:

copy(value) { [Command Line API]

在console控制檯輸入：

此時，會將變量demo的值copy至粘貼板，這樣你就能夠拿着它方便的作其餘事情了。

getEventListeners(node) { [Command Line API] }

查看元素綁定的全部事件

store as global

從下圖能夠看出，幫咱們保存爲全局變量「temp5」了，此時，便可拿來使用了。

copy html

咱們能夠copy node節點，也能夠copy html元素， 如：

monitor(function) { [Command Line API] }

monitor能夠用來監控函數是否有被執行到， 好比下圖中咱們定義的一個全局函數，能夠經過monitor對它的調用進行監控

注意： 此方法只在調試工具中有效，不可用於編碼實現

monitorEvents(object, [types]) { [Command Line API] }

有時咱們可能須要監控某些元素是否被某些事件觸發，就可使用這個辦法來進行調試

注意： 此方法只在調試工具中有效，不可用於編碼實現

Command Menu 六大基本功能

面板

Device Mode

移動設備模擬器

1. 模似移動設備

2. 響應式視窗模式

Elements

使用元素面板能夠自由的操做 DOM 和 CSS 來迭代佈局和設計頁面。 主要功能:

• 檢查和調整頁面
• 編輯樣式
• 編輯 DOM

技巧

1. 快速顯示/隱藏元素, 選擇元素後, 按h, 可讓元素 顯示/隱藏
2. 拖動元素, 選擇元素後, 直接拖動至指定位置便可看到效果, 或使用 "Ctrl + ⬆ / Ctrl + ⬇"
3. 編輯/複製 元素
4. 實時修改樣式
5. 查看最終生效的值(computed)

6. shadow editor(陰影編輯器) 7. Cubic bezier(貝塞爾) 編輯器 8. "+" 添加style樣式 點擊「+」添加新的樣式

9. 顏色拾取器

10. DOM斷點, 當DOM節點被編輯或修改時觸發斷點

Console

在開發期間，可使用控制檯面板記錄診斷信息，或者使用它做爲 shell 在頁面上與 JavaScript 交互。

• 使用控制檯面板
• 命令行交互
  • console.log
  • console.warn
  • console.error
  • console.assert
  • console.table
  • console.dir => 輸出變量所關聯的真實的JS對象

• console.time, 開啓一個計時器
• console.timeEnd, 結束計時並將結果在console中打印出來

Sources

在源代碼面板中設置斷點來調試 JavaScript ，或者經過 Workspaces（工做區）鏈接本地文件來使用開發者工具的實時編輯器

• 斷點調試
  • 錯誤斷點
• 調試混淆的代碼
• 使用開發者工具的 Workspaces（工做區）進行持久化保存

snippets 代碼段

利用Snippets，能夠基於瀏覽器環境進行js代碼調試

WorkSpace

在chrome中修改咱們的項目文件，在element面板中進行調試（如樣式等）會自動同步保存至本地文件中。

Network

使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能。

1. Preserve log
2. Disable cache
3. filter, 請求過濾
4. 網速限制
5. export HAR & import HAR
6. request initiator
7. 自定義network面板中顯示的詳細信息 (右擊"Name"欄, 選擇須要顯示的信息)
8. Replay XHR

Performance

使用時間軸面板能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面的運行時性能。 傳送門:# 一個Chrome 運行時性能瓶頸分析案例

Memory

若是須要比時間軸面板提供的更多信息，可使用「配置」面板，例如跟蹤內存泄漏。

• JavaScript CPU 分析器
• 內存堆區分析器

Application

使用資源面板檢查加載的全部資源，包括 IndexedDB 與 Web SQL 數據庫，本地和會話存儲，cookie ，應用程序緩存，圖像，字體和樣式表。

• 管理數據, 如經常使用的: Cookie, Storage等等

Security

使用安全面板調試混合內容問題，證書問題等等。

• 安全

傳送門:瞭解安全問題(Security 面板)

Lighthouse

是一個開源的自動化工具，用於改進網絡應用的質量。 您能夠將其做爲一個 Chrome 擴展程序運行，或從命令行運行。 您爲 Lighthouse 提供一個您要審查的網址，它將針對此頁面運行一連串的測試，而後生成一個有關頁面性能的報告。

傳送門

• Chrome devtools
• Chrome 開發者工具
• Lighthouse
• 傳送門:# 一個Chrome 運行時性能瓶頸分析案例
• Device Mode
• Command Menu 六大基本功能