如果您與許多網站合作，您可能一直在尋找更快、更有效的方法來完成工作。如果是這樣，在大多數主要瀏覽器中可用的Inspect Element（檢查元素工具）可能是一個有用的東西。有了它，您可以快速識別CSS類、預覽頁面上元素的更改、在移動裝置上模擬站點等等。
在本文中，我們將介紹檢查元素工具，並向您展示如何在最流行的Web瀏覽器中訪問它。然後，我們將向您介紹一些示例，說明如何將其用作Web開發工作流程的一部分。
什麼是檢查元素?
檢查元素（Inspect Element）是一種工具，通常可在瀏覽器的開發工具中找到，它可讓你檢視和操作構建任何網頁的 HTML、CSS 和 JavaScript 程式碼。
開啟檢查元素工具時，它會顯示構建網站的各個程式碼段。
你可以高亮顯示頁面部分，以顯示相應的原始碼。另外，點選原始原始碼中的一行，也會高亮顯示渲染頁面上與之匹配的視覺化元素。這種前端程式碼和設計之間的聯絡可以讓你瞭解網站是如何構建的。
注：檢查元素工具允許數字營銷人員在不對實時網站進行任何更改的情況下，檢視特定更改對網頁外觀的影響。這有助於測試新的 CTA 按鈕、下拉選單、配色方案和其他設計元素。您甚至還可以檢視網站在不同裝置上的響應情況。
您可以調整文字內容、顏色、字型、佈局、動畫等，以預覽變化。網頁外部保持不變，重新整理後本地檢視會恢復到原始狀態。
適用於哪些人？
雖然檢查元素工具主要被視為網路開發人員的工具，但其實際用途並不侷限於編碼。以下是各種角色的受益方式：
- 開發人員：除錯佈局問題，測試程式碼編輯，提高網站效能。
- 設計人員：視覺化新的風格創意，跨裝置預覽設計。
- 營銷人員：檢查搜尋引擎優化資料、匯出圖示/影象並在本地修改文字。
- 作家：匿名截圖和本地編輯文章。
- 支援：發現問題並記錄。
- 學生：學習網路技術的實施。
從本質上講，任何與網站有關的人，無論是構建、設計、執行、撰寫還是使用網站，都可以通過檢查發現新的視角。
讓我們來看看為什麼要開始檢查網路元素。
為什麼要檢查網站元素？
讓我們來探索檢查元素工具功能的主要功能，瞭解網站是如何構建的。
1. 除錯和修復問題
查詢和修復錯誤是檢測工具的一個重要用例。當網站出現故障時，開發人員可以深入程式碼進行故障排除，以確定是否是樣式、佈局、響應速度等方面的問題。
導致頁面出錯的元素會直觀地顯示在檢查器中，讓開發人員能夠快速縮小問題程式碼的範圍。
由於可以對數值進行實時調整，以非破壞性方式測試修復，因此很容易找到修復方法。
檢查工具還提供對控制檯面板的訪問。這樣就可以進行更高階的除錯，並執行自定義 JavaScript 檢視頁面的反應。
因此，在處理前端和後端網站錯誤時，檢查元素工具可以提供強大的功能來揭示問題的根源。
2. 瞭解網站開發
對於仍在學習 HTML、CSS 或 JavaScript 的新開發人員來說，檢查工具對學習過程有很大幫助。通過元素檢查工具，您可以看到您在網站上試圖實現的專業實現。最終，它能幫助你改進實現。
您還可以測試更改 HTML 中的元素和內容對頁面的影響。
例如，調整邊距值以觀察間距變化，或使用 CSS 後代選擇器鎖定巢狀元素。與閱讀教科書上的示例相比，真實世界的背景更能讓人印象深刻。
此外，看到專業網站開發人員如何構建和優化網站，還能為你的網頁編碼提供藍圖。實驗能力加上熱門網站的可檢視原始碼，有助於快速成長。
3. 測試設計和內容
網頁設計師經常使用檢查工具來快速模擬風格變化。可以即時測試各種變化，如新字型、調整元素大小、調色盤等，而不會影響生產程式碼。
例如，比較字型以確定理想的可讀性，或更改按鈕顏色以檢視它們的外觀。有了檢查元素工具，您就可以在瀏覽器中完成這些操作，而無需在 Photoshop 或 Figma 等外部裝置中進行更改。
同樣，對於撰稿人和營銷人員來說，在本地修改文字有助於預覽內容和佈局調整。從測試段落寬度到檢查後設資料，無需訪問內容管理系統（CMS）後臺即可輕鬆進行編輯，這一點非常有價值。
4. 檢視SEO資料
在考慮網頁的搜尋引擎優化和社交元時，瀏覽器開發工具提供了重要的洞察力。檢查元標籤-描述、標題、OG標籤-最關鍵的是影響連結在 SERP 中的顯示方式和分享方式。
例如，大多數社交網路都會讀取 og:title og:description 資訊。所有這些資訊都在網站的 <head> 元素中。
5. 檢查效能
檢查元素工具還能進行網路效能稽覈，以提高網站的整體速度和載入行為。在 Chrome 瀏覽器中，”網路” 選項卡會顯示載入時間線，其中包括每個元素所需的時間。
在檢查頁面時，你可以檢視總下載時間和資源請求，並將這些資料分解為單個元素。找出哪些圖片、字型或 JavaScript 檔案會降低效能。然後，直接解決這些問題：壓縮資產、實施快取並推遲非必要的指令碼。
網路檢測還可以通過節流來模擬移動或無線網路連線緩慢的情況。通過測量模擬連線的載入時間，發現可用性缺陷。網頁在 3G 上是否仍能正常執行？某些檔案是否會阻止渲染？這些資訊可以幫助您提高網站的整體頁面速度。
6. 更多作用
這只是通過檢查元素工具所能實現的表面現象。我們主要關注的是開發人員的使用案例，但設計師、撰稿人和營銷人員無需編碼專業知識也能實現前面討論的許多目標。你還會發現，分析可訪問性和安全漏洞也經常會用到檢查功能。
現在，希望你能更好地理解通過檢查網頁所能實現的一切，在進入實際操作之前，讓我們快速瞭解一下這些工具是如何工作的。
如何在主要瀏覽器中訪問檢查元素工具
檢查元素工具是一種實用程式，可讓您檢視任何網頁的底層原始碼。此外，您可以使用它進行臨時更改並實時檢視結果，同時保持原始原始碼不變。如果您需要測試更改或診斷問題，這將非常有用。如果您遇到一個具有您喜歡的功能的網站並且很好奇它是如何實現的，它也可以派上用場。
大多數主要瀏覽器（包括Chrome、Firefox和Safari）都提供了此工具的變體。讓我們看看如何在每個中訪問它。
Chrome檢查元素工具
在Chrome中可以通過三種方式訪問檢查元素工具：
- 右鍵單擊頁面上的元素並選擇Inspect（檢查）。
- 單擊視窗右上角的三點選單，然後選擇“更多工具”>“開發者工具”。
- 按鍵盤上的 Ctrl + Shift + C （在 Mac 上為Cmd + Option + C ）。
當該工具開啟時，它會向您顯示一個拆分檢視。一方面，您可以預覽正在檢查的網站，以及一些用於調整檢視和模擬不同螢幕解析度的控制元件：
另一方面，有幾個包含資訊的窗格。頂部窗格是頁面的 HTML。將滑鼠懸停在部分程式碼上將突出顯示右側頁面的相關區域：
下面是一個顯示頁面資訊的窗格。此處顯示的詳細資訊因您選擇的選項卡而異。在上面的螢幕截圖中，它顯示了頁面的CSS樣式。
底部窗格只是關於Chrome 開發者工具的新聞和更新。您可以通過單擊X安全地關閉它以減少混亂。
最後，您可以通過單擊HTML窗格右上角的三點選單並選擇停靠選項之一來更改這些窗格的位置。
1. 開啟開發者工具
首先將 Chrome 瀏覽器（或任何基於 Chromium 的瀏覽器）導航到要檢查的任何網頁。右鍵單擊頁面上的任意位置，然後從上下文選單中選擇 “檢查”。
或者使用上述鍵盤快捷鍵。
預設情況下，DevTools 會停靠在大螢幕瀏覽器視窗的底部。你也可以將其作為單獨視窗開啟或更改停靠位置-點選 “檢查元素” 視窗右上角的三個豎點。
無論在哪裡渲染，首先看到的都是主元素面板，其中顯示了所有 HTML 程式碼。
在頂部還可以訪問其他各種分析選項卡：控制檯、原始碼、網路等。
根據 檢查元素視窗的開啟位置，其中一部分將顯示以 <html> 開頭的頁面原始碼。當你點選程式碼中的不同內容時，右側（或下方）會顯示樣式，包括字型、顏色、邊距、襯墊等。
程式碼和外觀之間的這種聯絡有助於理解和嘗試更改。不過，在進行任何操作之前，我們先來看看如何高效地鎖定元素進行檢查。
2. 查詢要檢查的元素
隨著頁面越來越長、越來越複雜，在開發工具中通過視覺掃描查詢所需的元素並定位其程式碼可能會變得枯燥乏味。取而代之的是使用節點選擇工具。
在 Chrome DevTools 中，單擊左上角（檢查器視窗）的圖示，該圖示類似與游標交叉的選擇器（或按 Ctrl/Cmd+Shift+C）。
現在，你的滑鼠將切換元素選擇模式。將滑鼠懸停在頁面上的任何可視實體上，注意檢查器程式碼是如何自動突出顯示其 DOM 節點的。
現在，點選頁面上的任何元素都會直接高亮顯示使該元素出現在頁面上的程式碼。你還可以在 HTML 程式碼的右側或下方看到樣式。還可以使用搜尋框或搜尋選項卡查詢元素。另外，Ctrl+F (Windows) 和 Cmd+F (Mac) 也可以！
讓我們看看選中元素後可以編輯什麼。
3. 與 DOM 互動
檢查元素功能還提供了一種與文件物件模型（DOM）互動的方式–文件物件模型是編輯器中可見的頁面元素的結構化表示。
開發人員可以直接在 Chrome DevTools 中利用 DOM 重塑內容、樣式和互動性。
一些常見的元素操作方法包括：
- 通過直接編輯內容欄位來編輯文字。
- 切換 CSS 樣式（如顏色和字型），以便在 CSS 面板中直觀地測試樣式更改。
- 修改連結和按鈕等元件屬性以重塑功能。
- 重新排列結構元素，為其他佈局提供原型。
DOM 會根據檢查器檢視中的更改實時更新。因此，任何調整都會在瀏覽器中即時預覽，然後在重新整理時重置，從而降低了開發過程中的實驗風險。
4. 測試響應性
除了編輯單個元素，檢查器工具還提供了測試各種裝置和視口響應性的環境。
Chrome DevTools 包括裝置模式模擬。您可以選擇預設來模擬標準的手機或平板電腦解析度和觸控功能。或者使用更高階的選項來手動配置精確尺寸、畫素比、CPU 節流和其他指標。
這樣可以快速驗證以下方面：
- 不同斷點的佈局。
- 移動使用者的觸控目標間距。
- 低功耗裝置上的網站效能。
- 不同硬體上的可訪問性。
在開發過程中在模擬移動螢幕上預覽頁面的能力有助於完善響應性和漸進增強交付。在各種模擬裝置上進行測試可確保廣泛的瀏覽器和裝置支援。
Firefox檢查元素工具
Firefox中的檢查元素工具與Chrome的非常相似，可以通過類似的方式訪問：
- 右鍵單擊頁面上的元素並選擇“檢查元素”。
- 單擊 Firefox 視窗右上角的漢堡選單，然後選擇更多工具 > Web開發工具。
- 按鍵盤上的 Ctrl + Shift + C （在 Mac 上為Cmd + Option + C）。
Firefox預設將資訊窗格放在螢幕底部：
但是，您可以通過單擊三點選單並選擇其他選項輕鬆移動它們。
1. 檢視 DOM 屬性
在分析複雜介面時，焦點狀態和動態效果依賴於 HTML 屬性而不是 CSS。右鍵單擊 “檢視器” 檢視中的任意元素，選擇 “顯示 DOM 屬性“。
這將顯示與節點相關的所有本地屬性。您可以直接在此編輯值，通過檢查器修改元件行為，而無需修改程式碼。
例如，調整範圍滑塊的最小/最大值和步進增量，直觀地設定邊界，更改覈取方塊/無線電按鈕名稱組切換，覆蓋資料集屬性鉤子不同的遠端資料，等等，不勝列舉。
2. 直觀地使用方框模型圖
在網站上移動游標時，Firefox 會顯示填充、邊框和頁邊距，從而方便檢查。
單擊任何節點時，”檢查器” 面板會在三種狀態之間切換：彈性盒、盒模型和疊加網格。
當你想測試元素的間距、填充和邊距是否應用得當時，這將非常有用。
此外，它還能讓你更直接地修復任何問題，因為你可以通過點選特定元素，精確地檢視影響這些元素的 CSS 樣式。幾何分析可以幫助初學者更快地掌握空間關係。
3. 使用顏色選擇器編輯顏色
在檢查工具中，單擊任何接受背景、邊框等顏色的屬性旁邊的任何色塊。它會顯示顏色滑塊、alpha 設定和顏色選擇器，以便從開啟的頁面中提取顏色。
您無需再花時間猜測顏色程式碼或檢查設計資產中使用的程式碼。只需從頁面上的現有元素甚至影象中挑選即可。
Safari檢查元素工具
在Mac計算機上，Safari Web瀏覽器也提供了檢查元素工具。但是，訪問它還有一個額外的步驟——您需要啟用Safari開發人員工具。
為此，請前往螢幕頂部的選單欄並導航至Safari>偏好設定>高階。然後，您可以選中相關框以啟用開發工具：
啟用後，您可以像在其他瀏覽器中一樣訪問檢查元素工具功能：
- 右鍵單擊一個元素並選擇檢查元素。
- 在頂部選單欄中，導航到 開發>顯示頁面檢查器。
- 按 鍵盤上的Cmd + Option + I 或 Cmd+Opt+C。
Safari工具的初始佈局與瀏覽器略有不同：
但是，與Chrome和Firefox一樣，您可以通過單擊檢查器視窗左上角的圖示輕鬆對其進行自定義。
1. 時間軸和網路速度
與大多數其他瀏覽器類似，Safari 檢查器中的時間線功能強大。資源列表可幫助你立即確定哪些檔案導致了渲染延遲，以及原因是什麼。你還可以檢視哪些指令碼阻礙了頁面載入。
2. 網站層的 3D 檢視
如果你想分析構成網站的圖層，只需進入 “Layers（圖層）” 選項卡，就會看到所有圖層的完整 3D 模型
檢查元素工具常見用途
現在您知道如何訪問“檢查元素”工具，讓我們看看您可以使用它執行的一些有用操作。有很多可能性，但以下用途是一些最常見的用途。請注意，我們將在這些示例中使用 Chrome，但這些功能在其他瀏覽器中的工作方式應該類似。
1. 在網站上查詢CSS類
您可以利用檢查元素的最有用的方法之一是在頁面的層疊樣式表 (CSS) 中查詢詳細資訊。由於幾個原因，這很方便。首先，如果您只是在瀏覽網際網路並遇到一個您非常喜歡其風格的網站，您可以檢視 CSS 以收集一些您自己的網頁設計的想法。
它在您自己的網站上也很有用。例如，如果一個元素看起來不太正確，您可以快速檢查它以確保它使用正確的 CSS。
使用檢查元素工具檢查樣式有兩種基本方法。如果您想快速檢視單個專案，可以在預覽窗格中將滑鼠懸停在其上以檢視有關它的一些基本資訊：
在這裡，您可以在我們的部落格上看到標題的配色方案、字型、邊距等。在詳細窗格中，該工具還會突出顯示相關程式碼，以便您可以準確瞭解發生了什麼。單擊預覽中的元素將更新樣式窗格以顯示其CSS：
如果將滑鼠懸停在元素上似乎沒有做任何事情，請確保檢查器窗格中的游標圖示以藍色突出顯示：
如果您知道要查詢的特定CSS類或樣式並希望檢視使用它的每個元素，您還可以使用搜尋功能。在檢查器開啟的情況下，按鍵盤上的 Ctrl + Shift + F （在 Mac上為Cmd + Shift + F ）。這將開啟一個搜尋框，您可以在其中搜尋頁面的程式碼。 相關結果將突出顯示，就像您在搜尋文件一樣。
2. 對站點進行故障排除
檢查元素工具對於解決問題非常方便。例如，如果元素的顏色或字型看起來不太正確，您可以使用我們在上一節中描述的工具快速檢查它。
您還可以從“檢查元素”工具直接編輯頁面的HTML。只需雙擊要更改的程式碼即可對其進行編輯。
請注意，網站上的程式碼實際上 並未更改——如果您重新整理頁面，它將恢復到其原始形式。但是，此功能對於快速測試和故障排除非常有用。
最後，內建偵錯程式是一種更高階的工具，您可以使用它來檢視頁面的任何錯誤訊息。要訪問它，請單擊檢查元素工具視窗頂部的Console控制檯：
還有其他選項卡可用於檢視來源、網路活動等。要訪問完整列表，請單擊檢查器頂部的雙箭頭圖示。
注：平時使用我們的主題或者外掛的站長，當遇到異常問題，使用此種方法查詢故障並通過工單提交錯誤資訊截圖給我們，將有利於我們快速定位和解決問題。
3. 編輯文字以預覽更改
檢查元素工具的最佳用途之一是快速預覽頁面文字、字型或顏色的更改。這樣，您甚至無需登入WordPress儀表板就可以準確地看到您的想法。
要編輯元素，請右鍵單擊它並選擇“檢查”。 這將開啟具有該元素程式碼焦點的工具。如果您已經開啟了檢查元素工具，您還可以單擊預覽窗格中的專案以突出顯示相關程式碼。
接下來，只需雙擊程式碼以使其可編輯。例如，我們在這裡更改了部落格的標題：
您還可以更改顏色。只需選擇元素並滾動 樣式窗格即可找到相關部分。您可以單擊顏色方塊以調出顏色選擇器：
如果您知道要使用的顏色，也可以直接編輯顏色的十六進位制程式碼。
4. 預覽影象變化
檢查元素工具還可以輕鬆預覽影象更改。這也是嘗試不同影象尺寸的絕佳方式。
只需在預覽窗格中選擇要更改的影象，然後在HTML窗格中雙擊其URL：
然後，您可以貼上不同影象的URL進行測試。如果圖片在您的WordPress媒體庫中，您可以在附件詳細資訊中快速找到URL：
甚至還有一個方便的按鈕可以將URL複製到剪貼簿。再次記住，您在檢查器中所做的任何更改都只是暫時的，並且只對您可見，因此請隨意嘗試。
5. 使用裝置模擬測試站點
最後，檢查元素的另一個有用功能是能夠模擬不同的螢幕尺寸甚至特定裝置。這使您能夠測試站點的響應能力，並準確瞭解它在各種移動裝置形式下的顯示效果。
開啟檢查元素工具，單擊看起來像堆疊的手機和平板電腦的圖示：
這將啟用裝置模擬。請注意，當您開啟檢查器時，它可能會預設啟用。使用周圍的手柄調整頁面預覽的大小，或單擊預覽窗格頂部的下拉選單以選擇各種裝置：
您還可以輸入特定的縱橫比，甚至可以通過單擊預覽窗格頂部的“旋轉”圖示來檢查移動裝置旋轉時頁面的外觀。要模擬各種感測器，例如位置和觸控，請單擊檢查器窗格中的三點選單，然後選擇更多工具 >感測器。
常見問題
您可以在任何網站上使用檢查元素工具嗎？
可以，檢查元素工具適用於所有現代網站。不過，有些網站在伺服器端渲染程式碼，只將 JavaScript 物件推送到前端。這樣做一般是為了防止網路爬蟲工具獲取資料，而使用檢查元素工具可能會讓您難以理解網站結構。
在檢查元素工具中所做的更改會永久儲存嗎？
不會。通過檢查工具進行的任何編輯只能暫時在瀏覽器檢視中本地呈現。重新整理後會恢復預設的外部頁面內容。更改不會對實際原始檔產生任何影響。
其他使用者能否看到檢查網站時的調整？
其他瀏覽網站的使用者無法檢視檢查元素工具編輯，即使在多臺裝置上登入同一瀏覽器配置檔案也是如此。請將更改視為僅在您的機器上進行。
除了檢查元素工具，還有其他開發工具嗎？
當然有。如前所述，控制檯、來源、網路和其他分析選項卡在開發過程中也非常有價值。此外，瀏覽器擴充套件還能進一步擴充套件 DevTools 的功能。
小結
無論您是 Web 開發新手還是經驗豐富的專業人士，檢查元素工具都是一個強大的實用程式，絕對應該在您的武器庫中。它易於訪問，幾乎普遍可用，並且可以快速輕鬆地進行各種操作。
在本文中，我們演示瞭如何在Chrome、Firefox和Safari中訪問檢查元素工具。我們還向您展示瞭如何使用它來定位CSS類、對網站進行故障排除、臨時更改文字和影象以及模擬移動裝置。使用此工具包，您擁有使檢查元素工具成為工作流程一部分所需的一切。
評論留言