瀏覽器DevTools Secrets：啟動，網絡和性能

過去十年，瀏覽器開發者工具（DevTools）已從基本的JavaScript控制台發展成為完全集成的開發和調試環境。現在可以修改和檢查網絡應用程序的任何方面，但很少有人會深入研究其高級功能。本文將探索一系列您可能考慮或尚未考慮的功能。大多數情況下，我們將介紹Chrome的DevTools，但在適用情況下也會展示Firefox的替代方案。

關鍵要點

• 瀏覽器開發者工具（DevTools）已發展成為完全集成的開發和調試環境，允許用戶修改和檢查 Web 應用程序的任何方面。鍵盤快捷鍵、停靠選項、設置和自動啟動功能可以提高開發人員的效率。
• DevTools 提供了許多有用的Web 開發功能，包括顏色對比度輔助功能檢查、屏幕截圖捕獲、查找未使用的CSS 和JavaScript、禁用網絡緩存、限製網絡速度、過濾網絡響應、阻止網絡請求、重新創建Ajax 請求、啟用離線文件覆蓋、檢查存儲等等。
• Chrome 的 DevTools 提供了性能監視器和審核面板，用於實時分析 CPU 使用率、JavaScript 堆大小、DOM 節點、事件偵聽器、樣式重新計算等等。審核面板還會分析移動和桌面視圖中的性能、輔助功能、最佳實踐和 SEO。

鍵盤快捷鍵

使用菜單啟動 DevTools 會浪費寶貴的時間！請嘗試以下選項之一：

• F12
• ctrl shift i
• cmd option j
• 或右鍵單擊頁面上的任何元素，然後選擇“檢查”或“檢查元素”。

Chrome 提供了有用的鍵盤快捷鍵幫助。在 DevTools 中，按 F1 或從右上角的三個點菜單中選擇“設置”。然後從菜單中選擇“快捷鍵”：

停靠

DevTools 面板可以停靠在瀏覽器窗口的左側、右側或底部。如果您需要更多空間，可以將其取消停靠到單獨的窗口。 Chrome 中的主要三個點菜單中提供了停靠選項：

Firefox 中的停靠選項：

設置

可以通過相同的菜單或按 F1 訪問 DevTool 設置。這允許您設置顯示的工具、主題、製表符大小、顏色單位等選項。

自動啟動 DevTools

在處理 Web 應用程序時，創建一個專用的桌面快捷方式來啟動瀏覽器、打開 URL 並一步啟動 DevTools 可能比較實用。對於 Chrome，請使用以下 Chrome 命令行選項創建一個桌面圖標：

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

其中 https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 是您的開發 URL。 Firefox 的類似操作：

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

（可執行文件名可能因係統而異。）

開發期間使用隱身模式

隱身/私密模式在關閉瀏覽器後不會保留 cookie 和 localStorage 等數據。此模式非常適合測試漸進式 Web 應用 (PWA) 和登錄系統。您可以手動啟動瀏覽器進入隱身模式，也可以通過向 Chrome 的命令行添加 --incognito 或向 Firefox 的命令行添加 -private 來實現。

命令面板

Chrome DevTools 提供了一個類似編輯器的命令面板。按 ctrl shift p：

它提供了對大多數功能和源文件的快速訪問（按退格鍵刪除 >）。

轉到控制台

無論您使用哪個 DevTool 面板，控制台都非常有用。按 Esc 可顯示和隱藏底部面板中的控制台窗口。

查找頁面顏色

當您單擊任何 CSS 顏色屬性時，大多數瀏覽器都會顯示一個顏色選擇器。 Chrome 還顯示面板底部頁面中使用的顏色：

可以單擊該面板以顯示更多顏色。

顏色對比度輔助功能

顏色選擇器還會顯示對比度比率，該比率指示前景文本和背景顏色之間的視覺差異。單擊比率以查看其與 AA 和 AAA 輔助功能標準的評級情況，這些標準可確保大多數人都能閱讀文本：

顏色條上低於該線的任何顏色都將通過 AA 對比度建議。

捕獲屏幕截圖

從 Chrome 的命令面板 (ctrl shift p) 中，鍵入“screenshot”，然後選擇一個選項來捕獲當前視口、整個頁面或當前活動的元素。該文件將保存到下載文件夾。 （Chrome 74 還允許區域捕獲。）Firefox 提供了“截取屏幕截圖”系統，該系統可從大多數菜單中訪問。此外，您還可以右鍵單擊 DOM 視圖中的任何元素，然後選擇“屏幕截圖節點”。

查找未使用的 CSS 和 JavaScript

Chrome 的新覆蓋率面板允許您快速找到未使用的代碼。從 DevTools“更多工具”子菜單中選擇“覆蓋率”，然後單擊錄製按鈕並在應用程序中瀏覽。然後單擊任何文件以打開其源代碼：

未使用的代碼在行號槽中以紅色突出顯示。請注意，Chrome 似乎在您導航到新頁面時不會記住已使用/未使用的代碼，但我預計這將在未來的版本中提供。

禁用網絡緩存

在“網絡”面板中選中“禁用緩存”以從網絡加載所有文件。這提供了對首次頁面加載的更好評估。

限製網絡速度

同樣，當大多數用戶通過 3G 訪問時，測試 1gbps 連接的系統幾乎沒有意義。 “網絡”面板在 Chrome 中提供了“在線”下拉菜單，在 Firefox 中提供了“限制”下拉菜單，允許您模擬特定的網絡速度。

Chrome 還提供了一個添加您自己的限製配置文件的功能。

重新排序網絡響應

默認情況下，“網絡”面板按下載順序顯示請求和響應的表格。但是，可以單擊任何表標題以按名稱、狀態、類型、大小、響應時間等重新排序。

過濾不完整的請求

要發現任何不完整或無響應的 HTTP 請求，請訪問“網絡”面板並在“過濾器”框中輸入 is:running。

按響應大小過濾

在“網絡”面板中，在“過濾器”框中輸入larger-than:S，其中S 是以字節(1000000)、千字節(1000k) 或兆字節(1M) 為單位的大小。大於所選大小的響應將顯示。要查找較小的響應，請使用 -larger-than:S。

過濾第三方內容

在“網絡”面板中，在“過濾器”框中輸入 -domain:*.yourdomain，其中 yourdomain 是您的主要 URL，例如 sitepoint.com。其餘響應顯示對 CDN、跟踪器、社交媒體按鈕等的第三方請求。請求數量和有效負載大小顯示在表格下方的狀態欄中。

阻止網絡請求

在測試期間，可以阻止跟踪器、分析、社交媒體窗口小部件或任何其他請求。右鍵單擊 Chrome 的“網絡”面板中的任何 HTTP 請求，然後選擇“阻止請求 URL”以阻止該 URL，或選擇“阻止請求域”以阻止對該域的任何請求。 “請求阻止”面板將打開，您可以在其中添加或刪除其他 URL 或域：

重新創建 Ajax 請求

可以通過右鍵單擊“網絡”表上的條目，然後選擇一個複制選項（例如 cURL、fetch 或 PowerShell）來檢查 Ajax XMLHttpRequest 操作。這將創建一個具有相同標頭、用戶代理、cookie 和引薦來源的命令，可以將其粘貼到編輯器或終端中。

啟用離線文件覆蓋

Chrome 允許將任何文件保存到您的系統，以便瀏覽器從設備而不是網絡獲取該文件。例如，如果您想加載或編輯通常從 CDN 訪問的資產，這可以允許離線開發。在“源”中打開“覆蓋”面板，單擊“ 選擇覆蓋文件夾”，然後選擇一個合適的文件夾。

現在，右鍵單擊“網絡”面板中的任何資源，然後選擇“保存以進行覆蓋”。任何後續的頁面重新加載都將從本地系統而不是 Web 訪問該文件。保存的文件也可以修改。

檢查存儲

Chrome 中的“應用程序”面板和 Firefox 中的“存儲”面板允許您檢查、修改和刪除 cookie、緩存存儲、localStorage、sessionStorage、IndexedDB 和 Web SQL（如果受支持）中保存的值。 Chrome 的“清除存儲”面板還可以清除域的所有值，這在開發漸進式 Web 應用時非常有用。

性能監視器

Chrome 的新性能監視器可以從 DevTools“更多工具”菜單中訪問，並提供對 CPU 使用率、JavaScript 堆大小、DOM 節點、事件偵聽器、樣式重新計算等的分析。與主性能面板不同，圖表會實時更新 - 無需首先錄製配置文件。

審核

Chrome 的審核面板最初旨在評估漸進式 Web 應用的功能，但該工具已發展成為一個通用工具，用於分析移動和桌面視圖中的性能、輔助功能、最佳實踐和 SEO。

它不會發現所有問題，您可能不同意某些觀點，但它是快速評估潛在問題的有用方法。希望您發現了一些新東西。更多 DevTool 秘訣即將推出……

(此處應包含原文中的FAQ部分，由於篇幅過長，此處省略。FAQ部分內容可根據需要重新生成)

以上是瀏覽器DevTools Secrets：啟動，網絡和性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！