今天，我們來聊聊程式猿們的秘密武器——Chrome 開發者工具（DevTools）。
絕對是我們搞定前端問題的神器。要是你還沒用過，或者用得不夠溜，那今天這篇文章就教會你。
一、介紹
DevTools，是Chrome瀏覽器內建的一套工具，簡直是前端開發者的救命稻草。它的功能涵蓋了從檢視和修改網頁元素，到深入的效能分析和網路通訊追蹤。
你能想到的各種偵錯需求，基本上它都能滿足。真的是啥都能幹，就差給你泡咖啡了。
捷徑
先說怎麽開啟它吧。捷徑了解一下：
Windows/Linux: Ctrl + Shift + I 或 F12
Mac: Cmd + Option + I
還有一種方式是透過瀏覽器的選單：點選右上角的三個豎點 > 更多工具 > 開發者工具。開啟的方式就這麽幾種，選你順手的來就好。
二、基本界面和功能
一開啟開發者工具，你會看到各種面板。這些面板就是我們的工作台，每個都有自己的用途。咱們一個一個來看。
1. 元素面板（Elements）
這是你檢視、編輯和偵錯網頁內容的地方。
右鍵點選網頁上的任何元素，選擇「檢查」，或者用工具上的小放大鏡圖示，都可以讓你在元素面板中檢視該元素的HTML和CSS。
檢查元素：右鍵任何網頁元素 > 檢查，或者使用工具上的小放大鏡圖示。這將突出顯示元素並在元素面板中顯示其 HTML 和 CSS。
修改樣式：在右側的「樣式」索引標籤中，你可以直接編輯元素的 CSS 樣式，這是臨時的，只反映在當前會話中。
修改DOM：你可以直接在元素面板中編輯 HTML 內容，例如添加、刪除或移動元素。
2. 控制台（Console）
控制台是JavaScript開發和偵錯的好幫手。在這裏，你可以輸入並執行JavaScript程式碼，還可以檢視日誌、錯誤和警告。 幫助你快速定位問題。
執行 JavaScript：直接在控制台輸入 JavaScript 程式碼並按 Enter 執行。
檢視日誌、錯誤和警告：網頁上的 JavaScript 錯誤和日誌會顯示在這裏。
互動式操作：你可以直接存取當前頁面的任何 JavaScript 物件或變量。
3. 原始碼面板（Sources）
這個面板顯示網站的所有資源：HTML、CSS、JavaScript檔等。開啟檔、設定斷點這些操作都在這裏完成。
透過在原始碼面板設定斷點，你可以逐步偵錯程式碼，檢視每個變量的值和程式碼執行的路徑。
開啟檔：使用快捷鍵 Ctrl + P 或 Cmd + P 快速搜尋和開啟檔。
斷點：點選行號為特定行設定斷點，當 JavaScript 在該行執行 時，程式碼會暫停，你就能一行一行地檢視程式碼的執行情況，找到問題的根源。
4. 網路面板（Network）
網路面板，可以清楚地看到每個請求的時間消耗、響應頭資訊等，這對效能最佳化特別有幫助。
你可以透過檢視哪些請求耗時長，分析是否可以合並請求或使用緩存策略來最佳化效能。
過濾資源：使用頂部的過濾按鈕（如XHR、JS、CSS）來縮小檢視的資源型別。
檢視詳情：點選任何資源檢視詳細資訊，如請求頭、響應頭、預覽等。
5. 性 能面板（Performance）
效能面板可以記錄和分析網站的執行時間，以找出可能的效能瓶頸。你可以錄制頁面的執行過程，然後檢視每一步的詳細時間消耗情況。
效能面板可以記錄頁面載入和互動的詳細時間消耗，幫助你找出效能瓶頸。
6. 套用面板（Application）
這個面板用來檢視和編輯儲存在瀏覽器中的數據，如 Cookies、LocalStorage、SessionStorage、IndexedDB 等，還能管理 Service Workers 和 Web Manifests，方便 PWA 開發。
7. 安全面板（Security）
安全面板用於檢查頁面的安全性，比如是否使用 HTTPS、證書的有效性等。任何與安全相關的問題都可以在這裏檢視。
Chrome 開發者工具真是每個前端開發者的必備神器。
它不只是用來找 bug，還可以幫你 最佳化效能、偵錯網路請求、檢視儲存數據 等。 在偵錯 JavaScript 程式碼時，控制台和原始碼面板是最常用的工具。
對於前端效能最佳化，效能面板和套用面板是不可或缺的工具。
透過這兩個面板，你可以全面了解和最佳化前端效能，讓你的網站跑得更快、更穩。
總之鬼哥自己用下來覺得，DevTools 確實是前端開發中不可或缺的一部份，尤其是在偵錯和效能最佳化方面，簡直是如虎添翼。
如果你還沒開始用，或者用得不熟練，不妨花點時間好好研究一下
chrome安裝包獲取方式
關註下方公眾號，後台回復： chrome 獲取
熱門推薦
