如何使用 Chrome 開發者工具改進您的 WordPress 網站

已發表: 2015-07-06

鉻開發工具 Chrome 開發者工具 (DevTools) 是一組令人驚嘆的 Google Chrome 網絡創作和調試工具。 DevTools 提供對構建網頁的元素的訪問。 您可以使用 DevTools 解決佈局問題、查看和修改 CSS、設置 JavaScript 斷點、檢查代碼以進行優化等等。 DevTools 是免費的，並且已經內置在您的 Chrome 瀏覽器中。 因此，如果您擁有 Chrome，那麼您已經擁有它們。

在本文中，我們將概述這些工具是什麼以及如何使用它們來改進您的 WordPress 網站。

打開工具

打開工具

有幾種打開工具的方法：

  1. 選擇 Chrome 菜單，選擇工具，然後選擇開發者工具。
  2. 右鍵單擊屏幕上的任何元素並選擇檢查元素（我的首選方法）。
  3. Ctrl + Shift + I（適用於 PC）| Cmd + Opt + I（適用於 Mac）

開發工具窗口

工具窗口包含兩個面板。 它們都包含可以一起使用的工具。 下面來看看這些工具。

第一個包含 8 組工具。 這些工具包括：

  • 元素
  • 網絡
  • 來源
  • 時間線
  • 簡介
  • 資源
  • 審計
  • 安慰

第二部分包含：

  • 風格
  • 計算
  • 事件監聽器
  • DOM（文檔對像模型）斷點
  • 特性

您可以通過多種不同的方式查看這些工具。 您可以調整窗戶的大小以騰出空間。 您還可以將窗口重新定位到屏幕的右側，以便為您提供一個分屏，其中一側是工具，另一側是您的網站。

元素

元素

此面板向您顯示 DOM 樹，它代表您頁面的 HTML 元素，並允許您檢查或編輯任何元素。 您可以實時查看 CSS 調整。

您可以通過單擊節點（它們看起來像箭頭或三角形）來打開和折疊任何面板，以便更輕鬆地查看和導航。 DOM 樹視圖顯示樹的當前狀態，而不是原始 HTML（例如，它可能已被 JavaScript 修改）。

當您將鼠標懸停在樹視圖中的元素上時，網頁上的元素將突出顯示。 它將顯示諸如字體樣式、圖像大小等信息。

如果單擊其中一個元素，右側的窗口將顯示 CSS。 在這裡，您可以選擇樣式並對字體、顏色、大小、邊距、邊框、填充等進行修改。

在頁腳中，您會看到麵包屑，因此您可以在需要時回溯。 您只需單擊它們並輸入您的更改即可編輯任何元素。 當您按 Enter 時，您會看到更改發生。

元素 1

例如，此圖像當前為 600 像素寬。 我可以選擇寬度並輸入一個新值，然後按 Enter。

元素 2

圖像立即更改為新尺寸。

要更改字體的樣式，只需選擇字體並在右側的樣式窗口中選擇要更改的內容。

要素 3

您甚至可以拖動元素並將它們放在新位置以更改頁面佈局。

元素 4

我只是通過拖動 div 將最近的評論移到最近的帖子之上。

要素 5

右鍵單擊為您提供了一組新功能。 您可以查看各種元素狀態、修改為 HTML、設置中斷、複製 CSS 路徑等等。 您也可以右鍵單擊並刪除節點。 這太容易了，幾乎令人恐懼。

我已經使用這個工具來查找圖像大小並檢查代碼片段。

網絡

網絡

網絡面板顯示請求和下載您網站的哪些資源。 它是實時繪製的。 查看哪些元素的下載時間最長，可以讓您深入了解要解決哪些問題以優化您的頁面。

您可以過濾和顯示不同的視圖和類型的圖表，例如瀑布圖。 您可以記錄網絡活動並將其保存，以便以後進行分析。

您可以查看資源的詳細信息。 詳細信息包括：

  • HTTP 請求和響應標頭——顯示請求 URL、HTTP 方法、響應狀態代碼，並列出 HTTP 響應和請求標頭及其值以及查詢字符串參數。
  • 資源預覽 - 顯示圖像和 JSON 資源的預覽。
  • HTTP 響應——這顯示了資源的未格式化內容。
  • Cookie 名稱和值——顯示在資源的 HTTP 請求和響應標頭中傳輸的 cookie，並清除 cookie。
  • WebSocket 消息——這個顯示通過 WebSocket 連接發送或接收的消息。
  • 資源網絡計時——這顯示了加載資源所涉及的網絡階段所花費的時間圖表。

瀑布視圖是查看每個元素從請求開始到傳遞元素的最後一個字節所花費的時間的好方法。 通過查看哪些元素花費的時間最多，您可以更好地了解在哪裡進行調整。

您可以保存網絡數據以供將來分析。

來源

來源

您可以使用源面板來查看和調試您的代碼，例如作為加載頁面一部分的 JavaScript 和腳本。 您可以暫停、恢復、單步執行代碼以及在出現異常時暫停。 它包括基本的代碼執行功能，因此您可以單步執行、單步執行、單步執行和切換斷點。 您可以使用斷點來調試 JavaScript、DOM 更新和網絡調用。 您還可以設置條件斷點，任何表達式都可以返回為真或假。 如果滿足條件，斷點將暫停代碼。

有一個漂亮的打印功能，使縮小的代碼易於閱讀。 這也使您更容易查看斷點的放置位置。 如果這不能像您需要的那樣工作，您可以使用基於 JSON 的映射格式，稱為源映射。 源映射由內置此功能的縮小器創建。

時間線

時間線

時間軸面板顯示頁面加載和使用所花費的時間。 它將在時間線上繪製和繪製每個事件。 它將顯示 JavaScript、計算樣式和重新繪製等資源。 您可以記錄事件並逐步分析它們。 共有三種模式：

  • 事件 - 按類型組織的所有事件的列表。 這會向您顯示哪些任務花費的時間最多。
  • 框架——這顯示了在您網站的渲染性能的每個框架中必須完成的工作。 例如，如果您的網站以每秒 60 幀的速度呈現，它將向您顯示在 1/60 秒內完成的工作。 這包括加載腳本、繪製佈局、處理事件等。您可以使用它來查看頁面加載中的任何異常活動。
  • 內存 - 這會隨著時間的推移繪製出您的內存使用情況。 它向您展示了保存在內存中的所有文檔、節點和事件偵聽器。 這有助於找出導致內存洩漏的原因。

簡介

簡介

在這裡，您可以分析網頁和應用程序的執行時間和內存使用情況。 這向您顯示了資源的使用位置。 這是優化代碼的好工具。

它將記錄三種 Profile 類型：

  • 收集 JavaScript CPU 配置文件——這顯示了 JavaScript 函數的執行時間。
  • Take Heap Snapshot——這顯示了你的 JavaScript 對象的內存使用和分佈。
  • Record Heap Allocations - 這會記錄您的對象分配以顯示隨時間的內存洩漏。

資源

資源

您可以使用此面板檢查資源。 它將向您顯示有關 IndexedDB、Web SQL 數據庫、應用程序緩存 cookie、本地和會話存儲等的信息。 您還可以檢查您的視覺資源，例如字體、圖像和样式表。

IndexedDB選項卡允許您檢查 IndexedDB 數據庫和對象存儲，以及查看和刪除記錄。

您可以運行SQL 命令並以表格格式查看結果。 當您鍵入命令時，它將為您提供有關表名、命令和子句的提示。

cookie選項卡顯示有關由 HTTP 或 JavaScript 創建的 cookie 的信息。 您可以單獨或分組刪除它們。

Chrome 緩存應用程序資源。 應用程序緩存選項卡可讓您查看這些資源的狀態。 它還將顯示資源的 URL、資源類型及其大小。

本地和會話 存儲面板允許您查看、創建、刪除和編輯使用存儲 API 創建的本地和會話存儲鍵/值對。

審計

審計

審核面板會在頁面加載時對其進行分析，並建議修復以優化頁面加載。 它有兩個審計，將信息分為兩類：網絡利用率和網頁性能。 您可以同時運行兩種審計，也可以只運行您想要的一種。 您可以在頁面的當前狀態下運行審核，或重新加載頁面並在加載時進行審核。

它沒有像 Google PageSpeed Insights 那樣詳細，但它確實為您提供了足夠的信息來解決低垂的果實。 在通過 PageSpeed Insights 之後，我的頁面狀態良好，但它確實為我提供了一些關於我的網站的信息，而 Insights 沒有。

安慰

安慰

控制台用於調試。 您可以記錄診斷、輸入命令、評估 JavaScript、創建 JavaScript 配置文件等。您可以通過命令行將信息寫入控制台。 使用命令行，您可以使用函數來選擇和檢查 DOM 中的元素、監視事件以及停止和啟動分析器。

設備模式

設備模式

我最喜歡的功能之一是設備模式。 您可以使用菜單中元素左側的小按鈕訪問它。 設備模式可讓您從 23 種不同的流行移動設備（Kindle Fire、幾款 iPhone、幾款 Galaxies、筆記本電腦等）中進行選擇，並查看您的網站在該設備上的外觀和反應。

您還可以拖動屏幕來創建自己的自定義屏幕尺寸。 光標模仿您的指尖，因此屏幕對鼠標的反應就像對您的手指一樣。 您還可以在設置屏幕中創建自己的自定義設備。

您還可以選擇網絡類型（3G、4G、Wi-Fi 等），以便分析網站在不同網絡和速度下的外觀和反應。

抽屜

抽屜

在屏幕底部，您會找到抽屜。 這可以使用工具欄右側的 >_ 按鈕打開或關閉。 抽屜包含：

  • 控制台——控制台命令行。 這使控制台在使用其他面板時可用。
  • 搜索 - 查找任何來源。 您可以選擇忽略大小寫並蒐索正則表達式。
  • 仿真——設備模式的工具和設置。 它包括加速度計和地理位置坐標等功能。
  • 渲染 - 顯示渲染功能，例如 fps 儀表、複合分層邊框等。關於這個的最好的部分是它會顯示潛在的瓶頸。

將這些工具放在抽屜中很有用，因為某些面板不包括對這些工具的訪問。

最後的想法

Chrome 開發人員工具 (DevTools) 是一組令人驚嘆的 Web 創作和調試工具，可幫助您改進您的網站。 您可以快速拖放元素來更改站點的佈局、解決內存洩漏、解決頁面加載問題、在幾乎任何移動設備和屏幕尺寸上查看您的網站等等。 本概述只是觸及這些工具的強大功能的皮毛。 最好的一點是它已經內置在 Google Chrome 中，因此您無需下載任何內容。

我想听聽你的意見。 你使用 Chrome 開發者工具嗎？ 你最喜歡的功能是什麼？ 你最常使用什麼？ 您對使用這些工具有什麼建議嗎？ 在評論中告訴我們。