一、認識你的新朋友：DevTools界面總覽

1.1 如何打開開發者工具

• 快捷鍵：Windows按F12或Ctrl+Shift+I，Mac按Command+Option+I
• 右鍵菜單：在頁面任意位置右鍵 -> 檢查（推薦元素定位時使用）

DevTools初始界面

最常用圖示說明：① Elements  元素 ② Console 控制臺 ③ Sources  源代碼來源 ④ Network  網絡 ⑤ Performance  性能

圖片

1.2 基礎界面布局

面板切換：頂部標簽欄切換核心功能模塊

圖片

布局調整：點擊右上角? -> Dock side 選擇停靠位置（推薦底部布局）

圖片

搜索功能：Ctrl+F在任意面板內搜索內容

圖片

二、Elements面板：網頁結構透視鏡

2.1 界面詳解

!Elements面板標注

圖片

DOM樹視圖：網頁結構可視化展示。

樣式查看區：當前元素的所有CSS樣式。

盒模型圖：直觀顯示元素尺寸計算。

圖片

2.2 基礎操作三件套

選擇元素：點擊左上角箭頭圖標（或Ctrl+Shift+C）點擊頁面元素自動定位到DOM位置。

修改樣式：

圖片

在樣式區直接編輯屬性值。

點擊屬性前的復選框臨時禁用樣式。

調試布局：

懸浮盒模型圖的各區域查看計算值。

在Computed標簽頁查看最終生效樣式。

新手技巧：雙擊DOM節點可重命名，方便復雜結構的理解。

三、Console面板：JavaScript的對話窗口

3.1 界面功能區

Console面板布局：

圖片

信息輸出區：顯示日志、錯誤信息。

代碼輸入行：>符號后輸入JavaScript代碼。

過濾工具欄：按日志類型篩選信息。

3.2 基礎使用方法

輸出信息：

console.log('普通信息')
console.error('錯誤信息')// 顯示為紅色

圖片

執行計算：直接輸入2+3*5等數學表達式

操作DOM：

document.querySelector('button').click()// 模擬點擊按鈕

圖片

新手誤區：避免在生產環境尤其是循環代碼里面保留console.log語句（可能引發性能問題）

四、Sources面板：代碼調試核心區

4.1 界面組成

Sources面板結構

文件導航區：按域名組織的源代碼目錄。

代碼編輯區：帶行號的源代碼查看。

調試工具欄：斷點控制按鈕組。

4.2 斷點調試四步法

• 找到目標JS文件并打開。
• 點擊行號設置斷點（出現藍色標記）。
• 觸發代碼執行（如點擊頁面按鈕）。
• 使用調試控制按鈕：

?? 繼續執行

?? 單步跳過

↘? 進入函數

?? 跳出函數

實用技巧：在代碼行右鍵選擇Add logpoint可添加不暫停的日志輸出

五、Network面板：網絡請求追蹤器

5.1 核心功能區域

圖片

Network面板詳解

• 請求列表：按時間順序顯示所有網絡請求
• 篩選欄：按類型過濾（XHR/JS/CSS等）
• 詳情面板：顯示請求頭、響應內容等信息

5.2 必備操作指南

記錄網絡活動：刷新頁面自動開始記錄、點擊紅色圓形按鈕手動控制。

分析請求詳情：點擊請求名稱查看Headers/Preview/Response等、右鍵請求可復制為cURL命令。

圖片

模擬慢速網絡：點擊Online下拉框選擇Slow 3G、自定義延遲和下載速度。

圖片

典型應用場景：查看接口返回數據是否與預期一致

六、常用小技巧合集

6.1 快速定位資源

圖片

• 全局搜索：Ctrl+P輸入文件名快速定位
• 跳轉到行：Ctrl+G輸入行號快速跳轉

圖片

6.2 顏色選擇器

在顏色值前點擊色塊，彈出取色器支持：

圖片

• 吸取頁面顏色
• 切換顏色格式（HEX/RGB/HSL）
• 調整透明度

6.3 設備模擬

點擊Toggle device toolbar（Ctrl+Shift+M）：

圖片

• 選擇預設設備型號
• 自定義分辨率
• 測試不同DPI屏幕顯示效果