Chrome開發者工具(DevTools或Developer Tools)是Google Chrome瀏覽器中內置的一組網頁製作和調試工具。開發者工具爲網頁開發人員提供了訪問瀏覽器及其網頁應用程序內部的深入訪問。使用開發者工具有效地跟蹤佈局問題，設置JavaScript斷點，並獲得代碼優化的見解。現在讓我們來看看各個面板。
- 在Chrome菜單中選擇 更多工具 > 開發者工具。
- 在頁面元素上右鍵點擊，選擇 “檢查”。
- 使用快捷鍵 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。
- F12 快捷鍵
1. toggle device toolbar（切換設備工具欄）
主要是PC端和移動端的來回切換，PC端和移動端大部分是一樣的，移動端會多一些配置，主要介紹PC端的設備。
2. Elements【元素】
查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面得到反饋。
實時編輯DOM節點和CSS樣式
- 雙擊DOM視圖裏面的節點，編輯DOM樣式，可以將效果實時展示在頁面上
- 點擊右側Styles面板，可以實時更改CSS屬性值，調整頁面樣式。
- 點擊右側Computed面板，可以編輯左側選中的盒子模型參數，所有的值都是可以修改的;點擊不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。
3. Console【控制檯】（通常和Sources的debug配合使用）
console.log() : 打印出普通信息
console.info : 打印出提示性信息
console.warm()： 打印出警告信息
console.error() : 打印出錯誤信息
console.debug() ： 打印出調試信息
4. Sources【源代碼】
Sources面板主要是用於查看web站點的資源列表及JavaScript代碼的debug.
Sources面板主要有如下幾個功能
1 > 直接JS調試
可以修改未執行的js，查看已執行的變量值。
2 > Debug斷點調試
代碼結合
5. Network【網絡】
從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
1 > stop recording network log 網絡日誌是否錄製
2 > Clear 日誌清理
3 > Capture screenshots 捕獲屏幕
4 > filter過濾器
5 > Disable cache : Cache開關 禁止瀏覽器緩存（消息推送首頁可以看http緩存）
6 > 網絡鏈接開關
7 > 文件加載狀態
- Name 資源名稱，點擊名稱可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
- Status HTTP狀態碼。
- Type 請求的資源MIME類型。
- Initiator 標記請求是由哪個對象或進程發起的（請求源）。
- Parser： 請求由Chrome的HTML解析器時發起的。
- Redirect：請求是由HTTP頁面重定向發起的。
- Script：請求是由Script腳本發起的。
- Other：請求是由其他進程發起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。
- Size 從服務器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示(from cache)
- Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
- Timeline 顯示所有網絡請求的可視化瀑布流(時間狀態軸)，點擊時間軸，可以查看該請求的詳細信息，點擊列頭則可以根據指定的字段可以排序。
![]()
8 > 接口調用和數據加載
- Headers 該資源的HTTP頭信息。
- Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
- Response 顯示HTTP的Response信息。
- Cookies 顯示資源HTTP的Request和Response過程中的Cookies信息。
- Timing 顯示資源在整個請求生命週期過程中各部分花費的時間。
1) 查看資源HTTP頭信息
在headers 裏面可以看到http的請求信息和返回信息。
包含Request URL、Request Method、Status Code、Remote Address等基本信息和詳細的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。
2) 查看資源預覽信息
在Preview標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是圖片、接口返回的截圖。
3 ) 查看資源HTTP的Response信息
在Response標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容。下圖顯示的是當選擇的資源是CSS格式時的響應內容。
4 ) 查看資源Cookies信息
如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面可以查看所有的Cookies信息。
5) 分析資源在請求的生命週期內各部分時間花費信息
6 . Application【應用】
該面板主要是記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
7. Security【安全】 不多瞭解
通過該面板你可以去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。
8. Audits不多瞭解
對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。
9. Performance【分析瀏覽器運行時的性能表現】不多瞭解
10. Memory【表示原生內存，DOM節點存儲在原生內存中。】不多瞭解
名詞解釋
Status狀態
1**：請求收到，繼續處理
2**：操作成功收到，分析、接受
3**：完成此請求必須進一步處理
4**：請求包含一個錯誤語法或不能完成
5**：服務器執行一個完全有效請求失敗
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息爲空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是爲了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本