DevTools 調試技巧和快捷方式（Chrome、Firefox、Edge）

在當今我們觸手可及的所有工具中，DevTools 可能是最先進的工具之一。 多年來，它已成為調試、分析、審計甚至原型設計的工具——所有這些都生活在同一個界面中，而且總是只有一個鍵盤快捷鍵。 儘管如此，DevTools 仍然有很多不為人知的寶石和未被發現的寶藏，它們生活在隱藏標籤和實驗設置的偏遠邊緣。 讓我們解決這個問題。

在本文中，讓我們深入了解 DevTools 中的一些有用和晦澀的功能。 我們將研究所有現代瀏覽器（Chrome、Firefox、Edge、Safari）並研究它們為我們 Web 開發人員提供的有用工具。 我們將專注於我們在 SmashingMag 上經常使用的那些，以及一些幫助我們修復討厭的錯誤並編寫更好的代碼的小技巧和策略。

創建瀏覽器配置文件

在分析網站的性能或跟踪特定的可訪問性問題時，一段時間以來，我們一直在為每個任務創建單獨的瀏覽器配置文件。 我們通常使用至少 5 個用戶配置文件，每個配置文件都有自己的擴展程序、書籤、小書籤和打開或關閉的功能。 讓我們仔細看看它們。

• 輔助功能配置文件
  一個乾淨的瀏覽器配置文件，包括用於檢查可訪問性的各種工具，例如 Accessibility Insights、ax 和 a11y.css，以及一些其他可訪問性 linter 和色覺模擬器。

• 調試配置文件
  啟用了一些用於分析的實驗性設置的配置文件，以及為每個新窗口自動打開 DevTools 的選項，以及用於快速審核和分析的自定義診斷 CSS。

• 性能概況
  一個沒有擴展的干淨配置文件，帶有一些用於使用 Lighthouse、RequestMap 進行審計的特殊書籤、性能診斷 CSS 和一些與性能相關的鏈接要牢記（例如加載中的資源優先級）。 總是與 4 × CPU 節流和網絡節流（慢 3G）配合得很好。

• 快樂的顧客
  根據我們從分析中獲得的數據，該個人資料與我們的許多讀者（像您這樣的好人）所擁有的個人資料非常接近。 它將包含一些流行的擴展、常見的 Web 開發擴展、廣告攔截器、標籤管理、Google Docs 離線、LastPass、VPN、Browserstack、Grammarly 等。使用中沒有節流。

• 不滿意的客戶
  一個閱讀器的配置文件，用於連接速度慢、受限制的連接（慢 3G）、內存不足、CPU 性能不佳，並且打開了 10 個最流行的瀏覽器擴展。 我們通常使用此配置文件來測試我們最重的頁面，以體驗最糟糕的客戶體驗。

根據手頭的任務，我們可以跳轉到專用配置文件之一。 實際的便利來自於每個配置文件都有特定的擴展、書籤和瀏覽器設置的簡單安排，所有這些都已設置好並準備就緒。 因此，如果需要，我們可以直接進行性能調試或可訪問性審計，而無需搜索正確的擴展。

毋庸置疑，我們會盡最大努力保持每個配置文件乾淨整潔——這適用於瀏覽器擴展以及瀏覽器書籤、cookie 和緩存。

全局鍵盤快捷鍵

誠然，由於 DevTools 中可用的功能數量之多，在選項卡、面板、齒輪圖標和圓點之間很難找到其中一些功能也就不足為奇了。 但是，無需記住它們的放置位置。 相反，值得記住幾個有用的全局鍵盤快捷鍵 - 它們將幫助您更快地跳轉到特定功能。

• 打開命令菜單（Chrome、Edge）
  作為最著名的命令之一，這個命令實際上有兩個特性。 Cmd/Ctrl + Shift + P打開面板、抽屜和 DevTools 中所有功能的快速自動完成搜索。 Cmd/Ctrl + P打開一個抽屜，其中包含當前頁面上使用的所有可用文件。 如果您需要快速訪問任何 DevTools 功能，命令菜單是一種快速到達那裡的方法——用於一般抽屜、隱藏菜單或特定功能。

• 打開 DevTools 設置（所有現代瀏覽器）
  通常，“設置”面板中隱藏著許多晦澀難懂的工具和功能——從模擬設備到網絡節流配置文件和實驗。 在 Chrome 中，您可以單擊右上角的齒輪圖標或使用Shift + ? . 在 Firefox 中，您可以使用F1跳轉到設置。

• 切換檢查元素模式（所有現代瀏覽器）
  您可以使用Cmd/Ctrl + Shift + C切換檢查元素模式，而不是單擊檢查圖標然後專注於要調試的元素。

• 切換 HTML 模式（所有現代瀏覽器） 在檢查元素時，您可能想要更改其屬性，例如類或狀態。 無需右鍵單擊元素並逐個添加值，您可以使用Fn + F2 （或在 Windows 上僅F2 ）在當前選定元素上切換 HTML 模式。

• 切換設備模式（所有現代瀏覽器） 要跳轉到設備工具欄模式，例如預覽模型在窄屏幕上的外觀，或觸發媒體查詢調試器，您可以在 Chrome 中使用Cmd/Ctrl + Shift + M ，和 Firefox 中的Cmd/Ctrl + Opt/Alt + M。

還有很多其他有用的鍵盤快捷鍵，例如用於暫停和恢復腳本執行，以及在源代碼編輯器中轉到匹配括號（用於冗長的媒體查詢和 JS 函數）。

您可以在 Chrome DevTools Keyboard Shortcuts 和 Firefox DevTools Keyboard Shortcuts 上找到所有鍵盤快捷鍵的完整概述——通常，它們在現代瀏覽器中非常一致。

打開實驗設置

DevTools 附帶了一組實驗性設置，雖然不太推薦給廣大受眾，但對於調試確實非常有用。 不過請注意：有時這些設置可能會凍結 Chrome 或使其非常緩慢（這就是為什麼它們首先是實驗性的）。

但是，使用單獨的配置文件，您可以安全地為每個配置文件打開其中一些設置，然後在必要時將其關閉。 因此，雖然我們在沒有開啟實驗的情況下使用常規配置文件進行隨意瀏覽，但在調試模式下，我們總是首先選擇專用配置文件，以更快地消除這些錯誤。

在 Chrome 中打開 DevTools 後，跳轉到“設置”（ Shift + ?打開 DevTools）並在邊欄中找到“實驗”。 顯然，每個 DevTools 中都有大量的實驗性設置，但下面提到的只是我們認為對我們的工作很有幫助的那些。

在那裡列出的功能中，值得打開“源面板中的自動漂亮打印” ，這將在查看源代碼時默認美化壓縮樣式和腳本。 您還可以啟用 CSS Grid 調試器和Flexbox 調試來處理佈局問題。 還有一個可以派上用場的源差異和源順序查看器。

對於性能審計，您可以標記“時間線：事件發起者”和“時間線：失效跟踪”，它們將顯示在“性能”面板中，突出顯示導致昂貴操作的腳本，例如長任務和样式重新計算。 此外，在 Edge 中，您可以在 3D 視圖中啟用合成圖層。

對於給定的配置文件，您可以通過在您選擇的瀏覽器配置文件中訪問chrome://flags/來訪問更多隱藏的功能。 例如，您可以在此處打開最新的和實驗性的 JavaScript 功能、實驗性 Web 平台功能或啟用資源加載提示以提供對慢速網絡連接的預覽。

在 Firefox 中，使用F1跳轉到設置。 在 Dock 的底部，您可以提示瀏覽器顯示瀏覽器樣式、打開/關閉自動完成 CSS、更改編輯器首選項、切換油漆閃爍、調整屏幕截圖行為和啟用源映射（默認情況下未打開）。 在 Safari 中，您可以在“開發 → 實驗設置”下找到實驗設置。

在 Dock 狀態（Chrome、Edge、Firefox）之間切換

誠然，DevTools 中的窗格視圖並不是一個特別大的啟示。 在 Dock 的“樣式”選項卡中，樣式從上到下顯示，按其 CSS 特性排序。 然而，多年來我們一直忽略的一件小事是一個小切換按鈕:hov放置在樣式的正上方。

它允許您在特定的交互式元素上強制元素狀態（ :active 、 :focus 、 :focus-within 、 :hover 、 :visited和:focus-visible ，以及最近的:target ）——例如強制執行:focus和:active可訪問性檢查按鈕上的:active狀態。

在 Firefox 中，您可以在檢查 DOM 元素時更改它的偽類 — 右鍵單擊 DOM 節點即可使用該功能。

不過，總是會妨礙您的一件事是dock 的位置，它有時在右側效果更好，有時在底部效果更好 - 取決於您的錯誤侵入您的 DOM 樹的位置。

要在停靠狀態之間快速切換，可以使用Cmd/Ctrl + Shift + D。 要記住的一個問題是，只有當 DevTools 處於默認位置（停靠在右側）時，快捷方式才會將 DevTools 取消停靠到單獨的窗口中。 否則，快捷方式只會在默認位置和您更改的位置之間切換。

三重窗格視圖 (Firefox)

雖然我們可能習慣了雙窗格視圖，但 Firefox 默認提供了一個有用的三窗格視圖——它在不同部分看起來略有不同。 在 Inspector 視圖中，除了 HTML 和样式之外，您還可以放置佈局調試器、顯示計算機樣式或跟踪 CSS 更改——無需在選項卡之間切換即可快速訪問所有這些信息非常有用。

每當您在 Firefox 中編輯樣式時，DevTools 都會突出顯示頁面中使用的媒體查詢，并快速跳轉到定義斷點行為的 CSS 部分。 所有這些都顯示在源代碼旁邊，因此無需搜索特定的斷點。 （更不用說默認格式化的樣式——這很方便！）。

Chrome 和 Edge 中也有類似的視圖，但它僅在“元素”面板中可用（右上角的側邊欄圖標），到目前為止它只顯示計算樣式（這就是為什麼它被稱為“計算樣式邊欄”）。

按屬性過濾樣式 (Firefox)

一般來說，Firefox DevTools 被嚴重低估了。 Firefox 提供的另一個顯著功能是通過特定屬性過濾所有樣式的選項（用過濾器圖標表示）。 例如，如果您注意到某些樣式被散佈在樣式表中某處的其他樣式覆蓋，您可以使用快速過濾器隱藏所有不影響該特定屬性的定義，並查看發生覆蓋的確切位置。

此外，在給定頁面上，您可以突出顯示與特定選擇器匹配的所有實例。 例如，如果您注意到在頁面的深色和淺色部分呈現配置文件圖像的錯誤，您可以突出顯示特定類的所有實例，而無需手動搜索它們或添加額外的樣式來突出顯示它們。 在樣式面板中定位選擇器並選擇一個目標圖標以“突出顯示與此選擇器匹配的所有元素”就足夠了。

在“樣式”面板中，Firefox 還解釋了哪些 CSS 屬性不影響所選元素以及原因，以及可能有助於解決問題或避免意外行為的建議（該功能稱為非活動 CSS）。

另一個方便的功能是 Firefox 將scroll和overflow標記分配給導致容器溢出或滾動的元素（溢出調試） - 當您試圖找出水平滾動條突然出現的原因時非常有用，或者元素沒有'不按預期行事。

遞歸擴展節點（Chrome、Edge、Firefox）

在檢查具有深度嵌套 DOM 的元素時，有時可能需要一段時間才能遍歷樹，從一個嵌套節點到另一個。 通過右鍵單擊節點上的箭頭，您可以選擇“遞歸擴展”，然後單擊即可擴展當前選定的節點（及其所有子節點）。 或者，您可以在單擊元素名稱旁邊的箭頭圖標時按住Option （或 Windows 上的Ctrl + Alt ）。

收集和導出代碼覆蓋率（Chrome、Edge）

在給定的頁面上，可能根本不會使用大部分 CSS 和 JavaScript，儘管它們會被傳送到瀏覽器。 “代碼覆蓋率”面板（命令菜單→“顯示覆蓋率”）允許您探索給定頁面上未使用的樣式和代碼。 我們使用代碼覆蓋來收集網站上使用的每個模板的關鍵 CSS，手動這樣做可能會很累人。

有了“代碼覆蓋率”，經歷了幾個場景，包括大量的點擊、選項卡和窗口大小調整，我們還將 DevTools 收集的覆蓋率數據導出為 JSON（通過導出/下載圖標）。 最重要的是，您可以使用 Puppeteer，它還提供了一個 API 來收集覆蓋率（但我們還沒有）。

媒體查詢調試（Chrome、Edge）

對於一個給定的頁面，有幾十個媒體查詢在運行，很容易跟踪被媒體查詢範圍內的其他樣式覆蓋的樣式。 要查找 CSS 文件中可能導致意外行為的特定部分，我們可以將注意力轉向媒體查詢調試器。 默認情況下，它隱藏在設備工具欄中的“設置”齒輪後面，但當它默認可用時，它實際上非常有用。

使用Cmd/Ctrl + Shift + M切換設備工具欄（響應模式），然後選擇右上角的三個點。 然後選擇“顯示媒體查詢”。 現在您應該能夠看到代表每個媒體查詢範圍的水平條。

起初它們可能看起來有點混亂，但這些條的對齊方式代表屏幕寬度，並且在視口的左側和右側複製。 靠近屏幕中心的條被遠離中心的條覆蓋。 頂部的藍色條表示max-width媒體查詢，綠色表示min-width和max-width媒體查詢，橙色表示僅min-width媒體查詢。

對於所有欄，您可以在將鼠標懸停在它們上方時跟踪它們包含哪些媒體查詢。 您可以跳轉到特定的媒體查詢範圍，並在打開樣式面板的情況下詳細檢查佈局問題。 通過單擊條上的任何位置，您可以觸發特定的斷點，如果您右鍵單擊條，您可以顯示它在源代碼中的位置。 實際上，您可以在媒體查詢之間快速來回跳轉，而不是手動調整屏幕大小並一遍又一遍地檢查屏幕寬度。

作為一個快速的旁注，您還可以指定您的自定義模擬設備而不是預定義的設備 - 事實上，已經有很多可用的設備預設。 此外，如果需要，您可以使用“傳感器”窗格來控制特定的設備傳感器。 此外，在 Firefox 中，您可以啟用和禁用觸摸模擬，並定義特定的用戶代理，例如檢查頁面在搜索引擎爬蟲請求頁面時的行為方式。

模擬偏好媒體查詢（Chrome、Edge、Firefox）

除了與屏幕尺寸相關的媒體查詢外，我們還可以模擬特定於可訪問性的媒體查詢，例如， prefers-color-scheme 、 prefers-reduced-motion和視覺缺陷。 要切換仿真，請前往命令控制面板（ Cmd/Ctrl + Shift + P ）並輸入“顯示渲染”。 現在，在設置中，您可以選擇首選的仿真。

（這也是您可以選擇突出顯示需要重新繪製的區域（“Paint Flashing”）、已移動的區域（“Layout Shift Regions”）和調試滾動性能問題的地方。）

談論仿真：還記得過去您可能如何為打印樣式表尋找佈局錯誤而苦苦掙扎嗎？ 在同一個面板中，您也可以在此處預覽打印樣式的工作方式——無需一遍又一遍地打印隨機頁面的 PDF 來找出導致主要渲染問題的原因。

此外，在 Chrome 的同一個面板中，您可以添加各種渲染調試功能——例如，油漆閃爍、圖層邊框、滾動性能問題、禁用 AVIF 和 WebP。

附帶說明一下，Safari 中有一個用於“強制深色外觀”和“強制打印媒體樣式”的 DevTools 工具欄選項，您可以在 Firefox 的“輔助功能”選項卡中模擬視覺缺陷。 （稍後我們將詳細討論可訪問性。）在 Firefox 中，打印視圖也可以在“檢查”模式下的“樣式”窗格上方使用。

在每個新選項卡中自動打開 DevTools (Chrome)

通過性能審計，我們可能希望一次瀏覽多個頁面，並觀察它們在單獨的 DevTools 中的行為，而不必想知道哪個 DevTools 負責哪個窗口。 為了在調試期間節省一點時間，您可以使用終端命令創建一個快捷方式，該命令將打開一個瀏覽器，默認情況下會在每個新選項卡中自動打開 DevTools。

為此，我們需要在運行基於 Edge 的 Chrome 瀏覽器時傳遞標誌--auto-open-devtools-for-tabs 。 我們運行一個簡單的 Alfred 腳本，在需要時打開帶有標誌的 Canary 瀏覽器（向 Addy 致敬）——當你真正需要它時非常有用：

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --auto-open-devtools-for-tabs htps://www.smashingmagazine.com

您可以在 Peter Beverloo 的 Chrome 命令行開關指南中找到所有 Chrome、Edge 命令行開關的非常全面的概述。

全頁截圖（Chrome、Edge、Firefox）

在“元素”窗格中選擇 HTML 節點時，您可以右鍵單擊該節點並提示 DevTools 創建該節點的屏幕截圖，在“響應模式”中您可以捕獲該節點的可見部分的屏幕截圖頁面或全尺寸屏幕截圖（右上角的三個點）。

要更快地創建全屏截圖，您還可以在命令菜單中提示“全屏截圖”（ Cmd/Ctrl + Shift + P →“全屏截圖”）。 通常它會快一點。 請記住，延遲加載或漸進式渲染的頁面部分（例如content-visibility ）可能無法正確顯示在屏幕截圖中，因此您可能需要先一直向下滾動頁面。

在 Firefox 中，您可以先進入“設備工具欄”模式，然後找到右上角的相機圖標並激活它，從而生成頁面可見部分的屏幕截圖。 或者對於整頁截圖，您需要先在“設置”中切換“截取整個頁面的截圖”，然後您會在 DevTools 工具欄中找到相機圖標。

組件標尺（Chrome、Edge、Firefox）

也許您想快速檢查圖像或廣告位的寬度和高度。 但是，您可以使用規則來測量組件的大小，而不是截取屏幕截圖或檢查元素並複制/粘貼width和height值。 現代瀏覽器都提供了規則，但 Firefox DevTools 還允許您測量頁面的一部分。 您可以在 DevTools 右側的“響應模式”圖標旁邊找到測量工具。

跟踪更改（Chrome、Edge、Firefox）

在調試特定問題時，您可能已經註釋掉了一些代碼行，並且可能添加了一些似乎可以永久解決問題的新代碼。 您的更改現在必須複製到實際的源文件中。 為此，無需手動收集您對文件所做的所有更改。

在 Chrome 中，在編輯源文件時切換“本地修改”命令。 您應該會在下面的面板中看到更改跟踪器。 如果它已折疊，請通過垂直拖動將其拉出。 該窗格突出顯示更改的屬性以及確切更改的內容，因此您可以立即復制粘貼修改。

要記住的一件事是，在運行本地服務器時跟踪更改可能是一個好主意——無需自動刪除換行符和空格，因為它們也會顯示為更改。 這個問題在 Firefox 中不存在，您還可以在其中找到執行相同操作的“更改”窗格，以及一個友好的按鈕“複製所有更改”。

本地覆蓋（Chrome、Edge）

您之前可能遇到過這種情況：您只想嘗試一些更改，但可能非常害怕在瀏覽器中意外點擊“刷新”以丟失頁面上所做的所有更改。 也許您不能真正在本地運行該站點，或者您只是不想運行整個構建以進行一些小的本地修改。 在這種情況下，Chrome 的“本地覆蓋”可能是天賜之物。

首先，在您的計算機上創建一個文件夾，用於存儲所有本地修改（桌面上的local-overrides似乎是此類任務的合理名稱和位置）。 然後前往“Sources”選項卡，並在 DevTools 的左上角選擇“Overrides”（它可能隱藏在雙 V 形後面）。 現在單擊“選擇要覆蓋的文件夾”並選擇您新創建的文件夾——Chrome 將使用該文件夾來存儲您的本地修改。 您需要單擊“允許”以授予 Chrome 將文件保存到硬盤的權限。

現在，您可以在“Sources”面板中選擇任何文件，右鍵單擊代碼中的任意位置，然後通過右鍵單擊選擇“Save for overrides” 。 這是 Chrome 創建新文件並將文件的所有內容以及您的修改存儲到硬盤驅動器的線索。 （您可能需要先單擊{}按鈕以使代碼更具可讀性）。 （感謝Trys的提示！ ）

一旦您定義了本地覆蓋，Chrome 將攔截網絡請求並使用您的代碼而不是實際響應。 它還將注意對文件所做的修改並自動將更改注入頁面，就像您安裝了本地開發並打開了監視模式一樣。 在“元素”面板中，任何被本地覆蓋覆蓋的文件旁邊都會有一個紫色的小點。

最好的部分：現在您可以在文本編輯器中打開文件並從那裡進行更改，同時看到這些更改也出現在 DevTools 中——如果您需要切換到 DevTools 來添加斷點，您可以從 DevTools 中完成，使更改代碼，這些更改也將在您的文本編輯器中可見。 幾乎是魔法！

Harry Roberts 的專業提示：本地覆蓋不允許您保留或跟踪版本或變體，但您可以將查詢字符串附加到 URL 並加載同一頁面的不同變體。 在編輯 HTML 頁面時非常有用。

啊，如果您需要再次禁用本地覆蓋，只需在同一窗格中選中“啟用本地覆蓋” - 否則樣式將一遍又一遍地覆蓋現有樣式，這是您可能不想要的。

遠程調試（Chrome、Safari）

如果您需要在手機上調試您的應用程序或頁面，您可以使用適用於 iOS 設備的 Devtools 代理在 iOS 上調試 Chrome，也可以使用 DevTools 在 iOS 上使用 Chrome DevTools 調試 Mobile Safari。

要使用 Safari Inspector 調試 Mobile Safari，請在“設置 → Safari → 高級 → Web Inspector”中啟用“Web Inspector”，然後使用“Develop”→（您的手機名稱）打開調試器。 您應該為您打開 Safari 的 DevTools。

對於 Android 設備，打開 Android 上的開發者選項並選擇“啟用 USB 調試” 。 在您的開發機器上，您可以通過轉到chrome://inspect#devices並選擇“遠程目標”來發現您的移動設備。 您可以在“開始使用遠程調試 Android 設備”中找到大量詳細信息和說明。 這也是您可以找到用於 Node.js 調試的專用 DevTools 的地方。

暫停腳本執行（Chrome、Edge、Firefox）

在測試關鍵 CSS 或調試 JavaScript 時，您可能希望在執行特定腳本或應用特定樣式之前保持 DOM 的狀態。 這就是 DevTools 中的 DOM 更改斷點的用途。

通過右鍵單擊元素名稱旁邊的三個不祥的點，您可以選擇“中斷”子樹修改（以給定節點為根的 DOM 樹中的節點插入和刪除）、屬性修改（例如，當添加屬性或刪除，或屬性值更改 - 例如使用類）或節點刪除。

但是，當您知道需要調查的確切代碼區域時，您也可以使用條件代碼行斷點，但您只想在其他條件為真時暫停。 另外，不要忘記在代碼片段中輸出值的日誌點，而無需一遍又一遍地編寫console.log 。

代碼片段（Chrome、Edge）

如果您有幾個經常用於跟踪可能導致錯誤行為的代碼片段，您可以在“片段”窗格中存儲和訪問這些片段。 在某種程度上，這些 JavaScript 片段類似於小書籤，但與後者不同的是，您可以通過 DevTools 中的專用區域方便地管理它們。

因為它們是腳本，所以我們可以在這些腳本運行時添加斷點，或者在“代碼片段”中選擇部分代碼並運行代碼的特定部分而不是執行整個代碼片段。

“片段”窗格位於“源”中，在“本地覆蓋”旁邊。 添加片段後，您可以通過右鍵單擊並選擇“運行”或使用Cmd/Ctrl + Enter來運行它。 當然，每個片段也可以從命令面板中獲得。

一般來說，如果您發現自己一遍又一遍地運行例行任務，您很有可能希望將其放在“代碼片段”中並使用腳本自動執行此任務。 DevTools Snippets 包含一些有用的腳本，用於緩存清除、顯示標頭並將對象保存為控制台中的 .json 文件，但您可以使用它來修改 DOM 或顯示任何有用的信息，例如性能標記（這是我們所做的）。 此外，您還可以插入性能診斷 CSS 來指示延遲加載的圖像、未調整大小的圖像或同步腳本。

運行自定義自動化測試 (Safari)

Safari DevTools 中經常被遺忘的功能之一是定義和運行一系列自動檢查的選項。 把它想像成一個定制的測試套件，帶有一系列小測試，可以根據開發人員想要運行的審計類型進行完全定義。 默認情況下，測試套件專注於可訪問性，但您可以根據需要對其進行調整，例如為了檢查 DOM 中是否有任何同步腳本，或者是否所有圖像都具有定義的width和height屬性，或者即使所有圖像都是延遲加載的。 （謝謝​​，尼基塔！ ）

源地圖（Chrome、Edge、Firefox）

在調試生產代碼時，能夠跟踪您在代碼庫中使用的特定組件或模塊的更改非常方便。 要將縮小的代碼映射到源代碼，我們可以使用源映射。 如果生成源映射作為構建的一部分，則可以在 DevTools 中調試代碼時使用源映射。

在 Chrome 中，您需要在“設置”中啟用 JavaScript 和 CSS 的源映射，然後將文件夾添加到“工作區”。 然後，DevTools 會嘗試自動推斷所有映射並加載源文件以及縮小的源文件。 然後，您可以閱讀和調試原始源代碼中的已編譯代碼。 比這更好：您仍然可以遍歷斷點，所有錯誤、日誌和斷點都將映射到實際代碼。 要構建您的源映射，Webpack 的 Devtool 可能會有所幫助。

For Firefox, once the source map is generated, a transformed file has to include a comment that points to the source map . Just make sure that your bundler does the job for you. Once it's in place, in the source list pane, the original source (.scss or .ts files) will appear, and you can debug it right there.

Clear Service Worker's Cache And Storage (Chrome, Edge)

When we hit “Hard Refresh” in the browser, the browser will not use anything from the cache when reloading the page. Instead, it will re-fetch all assets from the server, without relying on caching.

If you right-click the “Refresh” button with DevTools open, you'll find another option: “Empty Cache and Hard Reload”. The difference is that if the page prompts any dynamic fetches via JavaScript, they might still use the cache. The latter option clears them, too, while the former doesn't.

Both of these options, however, don't clear cookie or service worker's cache — which you might want to do in some scenarios. Jump to the Command menu ( Cmd + Shift + P ) and type/autocomplete “Clear site data”. When this option is activated, the browser will clean all of the data (as the name assumes), including the service worker's cache as well as the unregistering of the service worker. (Alternatively, you can click “Clear Site Data” in the Application panel.)

And if you want to delete only cache or only cookies quickly, you can right-click on any request in the “Network” panel, and choose “Clean browser cache” from there.

In Firefox, you'll need to head to the “Privacy & Security” panel and find the “Cookies and Site Data” section there.

Filters In The Network Panel (Chrome, Edge, Firefox)

There seems to be not much to explore in the “Network” panel as it basically just shows the list of browser requests (along with server responses) in chronological order. However, there are plenty of obscure little helpers as well.

First of all, with an overview of requests in front of us, we can choose which columns we'd like to see . Right-click on the header of one of the columns and select the ones that you find useful for the task at hand. We always choose the “Priority” column to see in which priorities assets are being requested, and if we need to adjust that order to deliver critical assets faster (based on JavaScript Resource Loading Priorities in Chrome, Edge).

We can also filter requests to find specific ones that might be causing trouble ( thanks for the tip, Harry ). At the top of the “Network” panel you'll find an input field, which accepts not only keywords but also commands for filtering. Here are a few examples of the useful ones:

• is:from-cache shows all resources that were delivered from the cache,
• is:service-worker-initiated , shows only requests prompted by a service worker,
• is:running shows all incomplete or unresponsive requests,
• larger-than:250k shows all resources that are larger than 250 Kb,
• -larger-than:250k shows all resources that aren't larger than 250 Kb (same size and smaller),
• mixed-content: shows all assets that are loaded over HTTP instead of HTTPS,
• -has-response-header:Cache-Control highlights assets that don't have any caching headers,
• Obviously we can also search for bad practices like document.write and @import in HTML and CSS, plus we can use regular expressions as well.

All filters can be combined as well, separated by an empty space. You can check a comprehensive list of all filters as well, or just type - in the filters input and get an autocomplete preview of all features ( huge thanks to Harry for the tip! ).

Check Initiators In The Network Panel (Chrome, Edge)

If you want to quickly check which assets a particular resource has requested, or by which resource an asset was requested, there is a simple way to discover it in DevTools as well. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.

When you are inspecting a request in the “Network” panel, hold Shift while hovering over an element. The pink background color will indicate resources that this element has prompted to download, and the green background color will indicate the initiator that actually prompted the request.

Choose a User Agent (Chrome, Edge, Firefox)

Sometimes you might want to check how the page will render with a different user agent, eg to make sure that a Googlebot gets a properly rendered version of the page. By heading to “Network conditions”, you can define the behavior for caching, network throttling and a user agent.

默認情況下，後者是“自動”的，但有 10 個預定義組，從 GoogleBot Desktop 和 Mobile 到 Android 和 UC Browser。 如果需要，您還可以定義自己的用戶代理。 但是，當您從一個選項卡導航到另一個選項卡時，這些設置將不會保留。

在 Firefox 中，您需要前往 Firefox 的about:config頁面並定義一個general.useragent.override字符串。

在性能面板（Chrome、Edge）中更改滾動行為

乍一看，Performance 面板的火焰圖、一次顯示的大量數據以及非常非傳統的滾動行為可能會讓人望而生畏。 默認情況下，常規垂直滾動相當於放大時間線的選定部分，但我們可以更改它。

在“設置”中，您可以將“Flamechart 鼠標滾輪動作”從“縮放”切換為“滾動”——瞧，您的首選滾動將被保留！ 但是如果你想同時使用縮放和滾動呢？ 關鍵提示是在滾動時按住“Shift”以切換首選行為。

了解性能面板（Chrome、Edge）

還記得我們在實驗設置中提到的“時間線：事件發起者”和“時間線：失效跟踪”嗎？ 當您正在尋找導致昂貴操作的原因時，這些實驗性功能會在性能面板中派上用場——所謂的長任務（需要超過 50 毫秒才能完成的任務）。 然後目標是將長任務分解為較短的任務，通常首先關注最長的長任務是有意義的。

跳轉到性能面板並使用Cmd/Ctrl + Shift + E開始分析。 在刷新和收集數據需要一點時間後，那些昂貴的長任務將顯示在時間線中，並在右上角以紅色矩形突出顯示。 它們的長度表明該操作的實際成本。 任務有50 毫秒的友好預算來完成，這就是為什麼任務的前 50 毫秒部分顯示為純灰色。 每當您超出該預算時，任務的其餘部分就會以紅色/灰色條紋突出顯示。

火焰圖是每個任務所包含內容的可視化。 任務的所有部分都顯示在實際任務下，黃色背景代表腳本。 如果您單擊每個任務下的“評估腳本” ，您可以拉出底部的“摘要”抽屜，查看哪個腳本導致了成本。 如果您單擊標有“重新計算樣式”的紫色條，DevTools 將顯示究竟是什麼觸發了樣式失效。

可能 DevTools 中最被低估的功能確實是“摘要”抽屜，它還會顯示哪些元素受到樣式重新計算的影響（因此您可以立即跳轉到它們）以及首先啟動此任務的原因。

使用圖層調試 Janky 動畫（Chrome、Edge、Safari）

您只需要幾個動畫，可能帶有一點視差、滑動導航或惡作劇的 z-index 操作，就可以遇到丟幀和 janky 動畫。 性能面板 (Chrome) 中的 FPS 儀表會顯示您是否流暢地運行幀，但如果不是這樣，您可以在“圖層”選項卡中探索渲染問題。

通過跟踪哪些元素缺少will-change屬性，以及哪些元素使用了不成比例的內存，可以很容易地檢測到一些問題。 這就是我們如何發現一個隱藏在屏幕外的大型組件，其相對位置在屏幕外-1000px ，導致幾 MB 的內存使用。 此外，在調試畫布問題時，請記住 Safari 有一個畫佈內存使用調試器。

3D 視圖 Z-Index 調試器（邊緣）

跟踪渲染問題和 z-index 問題的另一個有用工具是 Edge 的 DOM 3D 視圖（“設置”→“更多工具”→3D 視圖）。 該工具提供了 DOM 和 z-index 層的交互式可視化。 您甚至可以選擇使用 DOM 元素的實際背景顏色來查看 DOM，或者只顯示堆疊上下文。

查看z-index值如何在頁面中分佈，以及為什麼在觸發時疊加層或面板未按預期顯示，這確實從未如此簡單。

更好的可訪問性分析（Chrome、Edge、Firefox）

擁有一個可以提供從標籤順序到 ARIA 屬性和屏幕閱讀器公告的所有內容的詳細信息和指導的一體化可訪問性工具不是很好嗎？ 為了接近這一點，我們設置了一個專用的可訪問性配置文件，其中包含文章開頭提到的有用擴展和書籤。 但是，DevTools 也提供了一些開箱即用的有用功能。

在 Chrome 和 Edge 中，“可訪問性”面板顯示可訪問性樹、使用的 ARIA 屬性和計算屬性。 使用顏色選擇器時，您可以檢查並方便地調整顏色以適應 AA/AAA 兼容的對比度（以及通過Shift + 單擊色板在 HEX、RGB、HSL 之間切換的能力 -感謝 Ana！ ）。

如前所述，“渲染”面板還允許您模擬視覺缺陷。 Lighthouse 審計還包括一個關於頁面可訪問性的建議部分。 此外，當您檢查元素時，可訪問性信息也會出現在概覽中。

Firefox 也有高級可訪問性工具。 除了可訪問性樹和對比檢查器之外，Firefox DevTools 還突出顯示了角色和地標，以及可訪問性建議和檢查。 例如，您可以檢查整個頁面上的對比度問題，檢查所有鏈接是否可聚焦並包括焦點樣式，並查看文本標籤。 另外，您還可以切換標籤順序。

此外，您可以安裝以可訪問性為重點的擴展，例如 Accessibility Insights、ax 和 a11y.css，以及一些其他可訪問性 linter 和色覺模擬器。

值得一提

顯然，DevTools 中提供了數百甚至數千個其他有用的功能。 他們中的許多人都很有名，不需要太多介紹，但仍然值得一提。

• CSS Grid / Flexbox 檢查器（Firefox、Chrome、Edge）
  如果您有任何與 Grid 和 Flexbox 相關的佈局問題，您可能會通過 DevTools 找到問題的原因。 Grid 和 Flexbox 檢查器非常有用，因為它們顯示了網格覆蓋和容器的邊界，以及從flex-basis到grid-gap的所有提示。

• 現場表達
  如果您已經習慣在控制台中輸入相同的 JavaScript 表達式，您可以考慮使用 Live Expressions 將其自動化。 該功能在 Chrome、Edge 和 Firefox 中可用，允許您鍵入一次表達式，然後將其固定到控制台頂部，實時表達式的值將自動更新。

• 動畫面板
  Firefox 有一個非常方便的面板來跟踪動畫問題，包括減慢動畫速度和可視化元素如何隨時間變化。

• 字體面板
  Firefox 還有一個方便的“字體”面板，對於任何與字體相關的問題都值得探索。 例如，在嘗試將備用字體與 Web 字體匹配時，我們經常使用它，因為您可以使用滑塊優化印刷屬性並查看實際效果。 當懸停在樣式中的字體系列上時，它還提供文本預覽。

• CSS 概述
  如果您在 Chrome 的實驗設置中激活“CSS 概覽”，DevTools 將添加一個選項卡，其中包含頁面上使用的 CSS 聲明的綜合報告。 它還將列出所有使用的顏色和字體，以及您可以立即跳轉到的媒體查詢和未使用的聲明。

這是一個包裝！

當我們開始準備這個概述時，它應該很短，只包含 DevTools 提供的一些有用的功能。 事實證明，在我們開始寫這篇文章之前，有很多我們不知道的功能——我們能夠在出色的 Smashing 讀者的幫助下偶然發現它們，他們在 Twitter 上貢獻了他們的經驗。 非常感謝您的善意貢獻！

此外，非常感謝所有瀏覽器中所有DevTools 的所有貢獻者——我們為您的努力以及您為改善我們的開發體驗而付出的時間和精力鼓掌。 這很重要。

如果我們錯過了一些有價值的東西，請在評論中回复。 如果您發現一些有用的東西，我們希望您能夠立即將這些小幫手應用到您的工作流程中，或許還可以將這篇文章的鏈接發送給一兩個朋友——也許他們會覺得它有用。 啊，別忘了：你也可以使用 DevTools 調試 DevTools — 只需連續按兩次Cmd/Ctrl + Shift + I。 ;-)

現在，祝大家調試愉快！