DevTools 面板可以停靠在瀏覽器窗口的左側(cè)、右側(cè)或底部。如果您需要更多空間，可以將其取消?？康絾为?dú)的窗口。 Chrome 中的主要三個(gè)點(diǎn)菜單中提供了?？窟x項(xiàng)：

Firefox 中的停靠選項(xiàng)：

設(shè)置

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

自動(dòng)啟動(dòng) DevTools

在處理 Web 應(yīng)用程序時(shí)，創(chuàng)建一個(gè)專用的桌面快捷方式來啟動(dòng)瀏覽器、打開 URL 並一步啟動(dòng) DevTools 可能比較實(shí)用。對(duì)於 Chrome，請(qǐng)使用以下 Chrome 命令行選項(xiàng)創(chuàng)建一個(gè)桌面圖標(biāo)：

<code>chrome --auto-open-devtools-for-tabs http://m.miracleart.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

其中 http://m.miracleart.cn/link/2674cea93e3214abce13e072a2dc2ca5 是您的開發(fā) URL。 Firefox 的類似操作：

<code>firefox -devtools -url http://m.miracleart.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

（可執(zhí)行文件名可能因係統(tǒng)而異。）

開發(fā)期間使用隱身模式

隱身/私密模式在關(guān)閉瀏覽器後不會(huì)保留 cookie 和 localStorage 等數(shù)據(jù)。此模式非常適合測(cè)試漸進(jìn)式 Web 應(yīng)用 (PWA) 和登錄系統(tǒng)。您可以手動(dòng)啟動(dòng)瀏覽器進(jìn)入隱身模式，也可以通過向 Chrome 的命令行添加 --incognito 或向 Firefox 的命令行添加 -private 來實(shí)現(xiàn)。

命令面板

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

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

轉(zhuǎn)到控制臺(tái)

無論您使用哪個(gè) DevTool 面板，控制臺(tái)都非常有用。按 Esc 可顯示和隱藏底部面板中的控制臺(tái)窗口。

查找頁面顏色

當(dāng)您單擊任何 CSS 顏色屬性時(shí)，大多數(shù)瀏覽器都會(huì)顯示一個(gè)顏色選擇器。 Chrome 還顯示面板底部頁面中使用的顏色：

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

顏色對(duì)比度輔助功能

顏色選擇器還會(huì)顯示對(duì)比度比率，該比率指示前景文本和背景顏色之間的視覺差異。單擊比率以查看其與 AA 和 AAA 輔助功能標(biāo)準(zhǔn)的評(píng)級(jí)情況，這些標(biāo)準(zhǔn)可確保大多數(shù)人都能閱讀文本：

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

捕獲屏幕截圖

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

查找未使用的 CSS 和 JavaScript

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

未使用的代碼在行號(hào)槽中以紅色突出顯示。請(qǐng)注意，Chrome 似乎在您導(dǎo)航到新頁面時(shí)不會(huì)記住已使用/未使用的代碼，但我預(yù)計(jì)這將在未來的版本中提供。

禁用網(wǎng)絡(luò)緩存

在“網(wǎng)絡(luò)”面板中選中“禁用緩存”以從網(wǎng)絡(luò)加載所有文件。這提供了對(duì)首次頁面加載的更好評(píng)估。

限製網(wǎng)絡(luò)速度

同樣，當(dāng)大多數(shù)用戶通過 3G 訪問時(shí)，測(cè)試 1gbps 連接的系統(tǒng)幾乎沒有意義。 “網(wǎng)絡(luò)”面板在 Chrome 中提供了“在線”下拉菜單，在 Firefox 中提供了“限制”下拉菜單，允許您模擬特定的網(wǎng)絡(luò)速度。

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

重新排序網(wǎng)絡(luò)響應(yīng)

默認(rèn)情況下，“網(wǎng)絡(luò)”面板按下載順序顯示請(qǐng)求和響應(yīng)的表格。但是，可以單擊任何表標(biāo)題以按名稱、狀態(tài)、類型、大小、響應(yīng)時(shí)間等重新排序。

過濾不完整的請(qǐng)求

要發(fā)現(xiàn)任何不完整或無響應(yīng)的 HTTP 請(qǐng)求，請(qǐng)?jiān)L問“網(wǎng)絡(luò)”面板並在“過濾器”框中輸入 is:running。

按響應(yīng)大小過濾

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

過濾第三方內(nèi)容

在“網(wǎng)絡(luò)”面板中，在“過濾器”框中輸入 -domain:*.yourdomain，其中 yourdomain 是您的主要 URL，例如 sitepoint.com。其餘響應(yīng)顯示對(duì) CDN、跟蹤器、社交媒體按鈕等的第三方請(qǐng)求。請(qǐng)求數(shù)量和有效負(fù)載大小顯示在表格下方的狀態(tài)欄中。

阻止網(wǎng)絡(luò)請(qǐng)求

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

重新創(chuàng)建 Ajax 請(qǐng)求

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

啟用離線文件覆蓋

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

現(xiàn)在，右鍵單擊“網(wǎng)絡(luò)”面板中的任何資源，然後選擇“保存以進(jìn)行覆蓋”。任何後續(xù)的頁面重新加載都將從本地系統(tǒng)而不是 Web 訪問該文件。保存的文件也可以修改。

檢查存儲(chǔ)

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

性能監(jiān)視器

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

審核

Chrome 的審核面板最初旨在評(píng)估漸進(jìn)式 Web 應(yīng)用的功能，但該工具已發(fā)展成為一個(gè)通用工具，用於分析移動(dòng)和桌面視圖中的性能、輔助功能、最佳實(shí)踐和 SEO。

它不會(huì)發(fā)現(xiàn)所有問題，您可能不同意某些觀點(diǎn)，但它是快速評(píng)估潛在問題的有用方法。希望您發(fā)現(xiàn)了一些新東西。更多 DevTool 秘訣即將推出……

(此處應(yīng)包含原文中的FAQ部分，由於篇幅過長(zhǎng)，此處省略。FAQ部分內(nèi)容可根據(jù)需要重新生成)

以上是瀏覽器DevTools Secrets：?jiǎn)?dòng)，網(wǎng)絡(luò)和性能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！