為什麼你應該立即開始使用 Chrome 開發者工具

擁有一套方便的工具來幫助測試您的網站對於開發人員來說至關重要。 把它們放在哪裡最好？ 當然，在您的瀏覽器中！ Google 流行的網絡瀏覽器 Chrome 內置了開發人員工具。這是一組用於網絡創作和調試的工具。 Chrome 開發人員工具（稱為 DevTools）使開發人員能夠訪問網絡瀏覽器和網絡應用程序的內部工作。

使用 Chrome DevTools 可以知道使用的樣式、圖像的大小、使用的腳本等。您可以調試並知道頁面上存在哪些錯誤。 您甚至可以打開或關閉樣式，或完全更改它們，以查看它對您網站的影響。

它在您的瀏覽器中

工具本身很容易獲得。 以下是三種打開方式：

1. 在您的 Chrome 瀏覽器中 - 選擇 Chrome 菜單（右上角的三個水平條），選擇更多工具，然後選擇開發人員工具。
2. 右鍵單擊任何頁面上的元素，然後選擇“檢查元素”。
3. 在 Windows 的鍵盤上選擇 ctrl + shift + i。 在 Mac 上選擇 cmnd + opt + i。

其中任何一個都將打開瀏覽器底部的 DevTools 窗口。

主窗口

工具出現在屏幕底部。 您將看到一個主窗口，頂部菜單和元素作為默認視圖，以及一個帶有菜單和样式的輔助窗口作為默認選擇。

這些工具被分組到任務中。 有 8 個組，包括元素、網絡、來源、時間線、配置文件、資源、審計和控制台。

元素

您可以在此處查看頁面的 HTML 結構。 HTML 和正文的底部有一個切換按鈕。 您可以將鼠標懸停在任何元素上以查看有關每個元素的詳細信息。

您可以單擊箭頭來打開和關閉主要元素的內容，以便於閱讀。 因此，您可以關閉正文並僅閱讀標題，選擇標題中的元素進行查看等。這是查看您網站的 HTML 的絕佳工具。

網絡

這顯示了將要加載的每個元素、它們是如何加載的、它是文件的類型、文件的大小、加載所需的時間以及在頁面加載序列中加載的時間線。 這可用於解決網絡問題，例如頁面加載瓶頸和錯誤請求。

例如，如果您看到大量 404 錯誤，則可以仔細查看問題所在。 也許您已經刪除了一個仍然獲得大量流量的頁面，或者也許有人輸入了錯誤的鏈接。

來源

這將顯示將加載的腳本和片段以及它們來自何處。

時間線

這會顯示每個資源的加載時間。 您可以看到什麼花費的時間最多，這有助於減少頁面加載。

簡介

這顯示了每個元素的內存使用情況。 這非常適合向您展示哪些代碼需要優化。

資源

您可以在此處檢查加載的資源。 您可以查看 cookie、應用程序緩存、HTML5 數據庫等。

審計

這使您可以分析頁面。 您可以在加載後或加載時進行審核。

審計現狀

首先，我選擇運行 Audit Present State。 這會在站點當前所在的位置運行審核，該站點已加載到我的瀏覽器中。

它給了我一個項目列表，根據它們的重要性給它們著色，並顯示問題的數量。 我可以通過單擊它們來查看更多詳細信息。

我已經擴展了其中的幾個以查看有關每個的詳細信息。 它為我提供了有關網絡利用率和網頁性能的信息。 它為我提供了有關如何解決問題的建議，並為我確定了它們的優先級。

重新加載頁面並在加載時進行審核

我回去並選擇進行負載審核。 結果是相似的，但正如預期的那樣，加載頁面時比加載頁面後出現更多問題。

在這兩者之間，我獲得了有關 JavaScript、瀏覽器緩存、代理緩存、cookie 大小、從無 cookie 域提供內容、圖像尺寸、腳本的順序和样式、將 CSS 放置在文檔頭部、刪除未使用的 CSS 規則和使用普通 CSS 的信息屬性名稱。 當然，結果會因網站而異。

該信息不如 PageSpeed Insights 詳細，但足以讓我入門，而且我喜歡它內置於我正在使用的工具中的便利性。 我建議您每次對站點進行更改時都運行它。 太容易使用了，不使用它。

安慰

這是 JavaScript 控制台，您可以在其中測試頁面和應用程序。 您可以調試腳本並獲得有關要進行哪些更改的建議。 控制台允許您輸入命令，以便您可以與網頁進行交互。 它將記錄診斷信息以幫助您進行調試。 您可以在主屏幕或抽屜（主屏幕下的窗口）中使用它。

您可以使用控制台或命令行 API。 您可以寫入控制台、格式化元素和样式輸出、測量執行或加載時間、查看和標記時間線、計算語句、設置斷點、評估表達式、監視事件、堆棧消息、查看錯誤和警告等等更多的。

這是一個強大的工具，但使用它有很多好處。 幸運的是，提供了很好的參考資料以及如何使用它的示例。

調試

在 Windows 中選擇 ctrl + p 或在 Mac 上選擇 cmd + p 將打開調試屏幕，您可以在其中選擇要調試的腳本。 該工具為您提供了您希望在任何編程環境中看到的調試功能：暫停、繼續、單步執行、單步執行、斷點、格式化代碼等。

提供了詳細的幫助文件以指導您使用調試模式。

CSS 樣式窗口

最右側的框包含所有 CSS 信息。 當您選擇一個元素時，右側的“樣式”窗口會顯示該元素的樣式信息。 這部分很有趣。 有五組工具：樣式、計算、事件偵聽器、DOM 斷點和屬性。

樣式

您可以在此窗口中選擇樣式並手動更改它們。 例如，您可以選擇字體大小和顏色。

選擇字體大小並輸入您自己的大小。 當您這樣做時，您選擇的字體的字體大小將在屏幕上更改。

在字體顏色上進行選擇將打開顏色選擇器。 選擇你想要的顏色並按回車鍵。 您將看到您選擇的字體更改為新顏色。 這是嘗試新字體樣式、大小和顏色的好方法。

如果您單擊右側的 site.CSS，您將打開一個更大的窗口，其中包含詳細信息。 在這裡，您可以輸入要使用的字體名稱、指定顏色、指定大小等。

計算

這顯示了以像素為單位的框大小。 它有填充、邊框和邊距。

設備模式

在放大鏡和看起來像移動設備的元素菜單之間的左側有一個小按鈕。 你猜怎麼著？ 它是一種移動設備。 這是設備仿真模式。 這是查看您的網站響應速度的好方法。

設備

比僅作為移動設備更酷的是，您可以選擇它是哪種移動設備，然後您可以像在該設備上查看網站一樣查看網站。 現在，太棒了！

我選擇了 Amazon Kindle Fire HDX 7”，屏幕模仿了該設備，因此我可以看到網站在其屏幕上的外觀以及觸摸的工作方式。

您可以通過點擊“交換尺寸”按鈕來更改屏幕的方向。

這是在較小的移動屏幕上查看 WordPress 網站外觀的好方法。 我選擇了 iPhone 6，屏幕尺寸改變以匹配新的屏幕尺寸和分辨率。 有很多設備可以查看。 您還可以通過拖動邊來增大或減小尺寸來查看自定義尺寸。

網絡

還有一個選項可以選擇您訪問站點的網絡類型。 這使您可以通過各種連接類型和速度查看網站的性能。 您可以測試從 50 Kbps GPRS 到 30 Mbps WiFi 的多種速度，以及多種 2G、3G 和 4G 連接速度。 這是通過有問題的網絡測試網站速度並了解需要改進的地方的絕佳方式。

媒體查詢

左上角有一個小按鈕，看起來像樓梯。 它會在網站窗口上方打開另一部分屏幕，顯示不同的像素寬度。 單擊它們會使移動屏幕達到該大小。 他們向您展示：

• 以最大寬度為目標的查詢
• 範圍內的寬度
• 以最小寬度為目標的查詢

這有助於您調整樣式和媒體內容以實現完全響應式設計。

抽屜

主屏幕下還有另一部分工具稱為抽屜。 這補充說：

控制台– 這與主窗口中的控制台相同。 通過將其放置在這裡，您可以將其與主窗口中的任何工具一起使用。

搜索- 允許您搜索來源。

仿真——您可以選擇設備（在這裡您可以選擇型號、分辨率、網絡等）、媒體、網絡（吞吐量和用戶代理）和傳感器（觸摸屏、加速度計等）。

渲染– 顯示繪製矩形、合成圖層邊框、FPS 表、連續頁面重繪和潛在的滾動瓶頸。

設置等

右側的菜單欄會告訴您站點上的錯誤和警告數量，允許您隱藏底部的抽屜，讓您調整設置，並將工具停靠到主窗口（在它們之間創建分屏）您的網站和 DevTools）。

您可以調整大量設置，以便您可以修改工具以按照您需要的方式工作。

鉻金絲雀

如果您真的想走在 Google Chrome DevTools 的前沿，那就試試 Chrome Canary。 它的圖標是黃色的。 得到它？ 它需要披風。 這是來自 Google 的最新和最偉大的產品。 它專為開發人員設計，擁有最新版本的 DevTools。 它對於一般用途來說還不夠穩定，因此它可能會破壞您的系統。

如果您在系統崩潰時容易對環境造成嚴重破壞，請查看上圖中的 Chrome Canary 圖標，並且不要閃爍五秒鐘。

現在你可以繼續到最後。 你不會記得這部分。

包起來

谷歌瀏覽器的開發者工具是一個很好的工具，用於排除故障、提高網絡性能、在不同的屏幕尺寸和分辨率上查看您的網站，以及獲取有關您的網站需要改進的地方的信息。 有很多功能，您可以通過擴展添加更多功能。 這些工具本身就是安裝 Google Chrome 的一個很好的理由，即使它不是您的主要瀏覽器。 花時間學習這些功能會有所回報，您的網站和訪問者會為此感謝您。

輪到你了！ 你使用 Chrome 開發者工具嗎？ 我是否遺漏了您最喜歡的功能？ 你有什麼要補充的嗎？ 我想在下面的評論中聽到它！

Anikei/shutterstock.com 的文章縮略圖