如何在 Chrome、Firefox、Safari 和 Edge 上檢查元素

您可以使用大多數 Web 瀏覽器上的“檢查”命令來檢查網站的各種代碼元素。在 Chrome 上，您可以通過右鍵單擊上下文菜單項來獲取它。不同的網絡瀏覽器可能會以不同的方式命名該選項，但目標是相同的。

了解競爭對手網站的構建有助於數字營銷人員和開發人員利用自己的品牌打造極具競爭力的網站。但是，作為開發人員或設計師，您需要知道如何檢查流行的 Web 瀏覽器上的元素。 

閱讀本教程直到最後，以全面了解互聯網用戶使用的大多數熱門網站的檢查元素功能。

什麼是任何 Web 瀏覽器的 Inspect 元素？

現代網絡瀏覽器附帶了許多開發人員工具來幫助用戶檢查網站源代碼、惡意活動等。這樣的工具之一就是檢查元素。它以 HTML 或代碼格式顯示突出顯示的內容。 

你可以閱讀代碼來了解代碼在後台實際做了什麼。專家主要使用此工具來編輯任何網站的源代碼。源代碼可能包括層疊樣式表（CSS）、超文本標記語言（HTML）、媒體文件、JavaScript等。

當您通過inspect元素修改部分源代碼時，您可以直接在網頁上看到效果。然而，此類更改不會對網站服務器產生任何持久影響。當您刷新網頁時，網站本身會恢復為原始源代碼。   

誰應該知道如何檢查元件以及為什麼？

如果您來自以下任何職業，您必須知道如何檢查網頁上的元素： 

1. 內容創作者和作者

您可以通過檢查元素工具消除不必要的元素來拍攝高質量的網站屏幕截圖。它可以讓您通過在網站源代碼上精確定位冗餘視覺資產的代碼來發現它們。  

2. 網站開發者

當您處於開發階段時，您可以使用檢查元素功能在線測試各種Web組件。另外，開發完成後，還可以使用inspect元素進行調試。 

3. 客戶支持代表

客戶體驗代理可以通過使用此選項操作 Web 組件來在線幫助開發人員和營銷人員。 

4. 網站和平面設計師

圖形和網站設計師還可以通過在實施之前可視化新添加的內容來受益於檢查元素工具。 

5. 數字營銷人員

搜索引擎優化和營銷主管使用此工具來發現競爭對手優化網站的行為。例如，您可以找出目標關鍵字、網站元數據、SEO 標題、內容標題、Google 搜索索引狀態等。 

如果您知道如何檢查網絡瀏覽器上的元素，您就可以利用到目前為止提到的所有優點。讓我們看看下面幾種流行的網絡瀏覽器上的檢查元素選項： 

如何檢查 Chrome 上的元素

• 訪問您需要使用檢查元素工具的網站。
• 選擇任何元素，如文本、圖像、超鏈接等。

• 現在，右鍵單擊，然後從上下文菜單中選擇“檢查” 。

• 元素導航窗格將在右側打開，顯示許多代碼。

• 藍色突出顯示的代碼是您在網站上選擇的元素。

• 只需單擊Elements 側邊欄右上角的  關閉（十字）按鈕即可關閉面板。

如何在 Safari 上檢查元素

1. 在 macOS 設備上打開 Safari 應用程序，然後單擊“首選項”。
2. 在“首選項”的“高級”部分中選擇“在菜單欄中顯示開發”菜單。
3. 現在，將顯示“開發”選項。
4. 然後，訪問任意網站並選擇一個 Web 組件。
5. 右鍵單擊並單擊Inspect Element，即可在檢查器視圖控制台中查看所選 Web 組件的代碼。
6. 您可以單擊檢查視圖導航窗格的十字按鈕來關閉檢查元素工具。 

如何在 Firefox 上檢查元素

1. 打開 Firefox 並訪問競爭對手的網站。
2. 現在，導航到您需要檢查元素的頁面。
3. 選擇任何 Web 組件，例如圖像、插圖、內容或​​超鏈接。
4. 右鍵單擊鼠標，您將看到一個包含多個選項的上下文菜單。
5. 這些選項之一是Inspect Element。
6. 單擊“檢查元素”以打開檢查視圖側邊欄。
7. 檢查視圖中突出顯示的代碼是您所選組件的代碼行。
8. 選擇檢查視圖控制台右上角的關閉或十字圖標將關閉面板。

如何檢查邊緣上的元素

1. 使用 Microsoft Edge 瀏覽器訪問網頁。
2. 在瀏覽器的工具欄上，您將看到一個烤肉串或三個垂直點菜單。點擊它。
3. 將打開一個包含很多選項的上下文菜單。
4. 向下滾動，直到找到“更多工具”選項。現在，點擊它。
5. 將打開一個新的上下文菜單，其中包含另一個選項開發人員工具。選擇那個。
6. 這將打開頁面的檢查視圖。
7. 或者，選擇網站上的任何元素，然後右鍵單擊。
8. 從出現的上下文菜單中單擊“檢查” 。
9. 您將在檢查視圖控制台中看到的突出顯示的代碼是元素代碼。
10. 就像到目前為止提到的其他網站一樣，單擊檢查視圖控制台上的十字圖標將關閉檢查元素功能。 

結論

到目前為止，您已經發現了幾種檢查流行 Web 瀏覽器代碼元素的方法。您現在應該清楚地了解如何檢查上述網絡瀏覽器上的元素。

您可以將所學到的知識應用到您作為網絡開發人員、設計師或數字營銷人員的職業或愛好中。 

您可能還對最好的 VPN 服務感興趣，這些服務可以使您的網頁瀏覽私密並訪問地理限制的內容以滿足專業需求。