如何在 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 服務感興趣,這些服務可以使您的網頁瀏覽私密並訪問地理限制的內容以滿足專業需求。

Leave a Comment

在 Google Chrome 中查看 IMDb 影片評分 [擴充功能]

在 Google Chrome 中查看 IMDb 影片評分 [擴充功能]

IMDb 無疑是網路上最大的電影資料庫,幾乎囊括了所有上映的電影(無論是失敗的還是票房大賣的)的資訊。

如何聯絡任何網站的所有者

如何聯絡任何網站的所有者

假設你造訪任何網站,想聯絡網站管理員,但在網站上找不到任何聯絡資訊,你會怎麼做?而不是

下載前提取/檢視存檔檔案的兩種方法

下載前提取/檢視存檔檔案的兩種方法

假設您需要下載一個 5MB 的聲卡驅動程序,而您在製造商的網站上找到了一個 100MB 的存檔文件,其中包含完整的列表

蘋果正在收集 FaceTime 訊息,以查看視訊通話

蘋果正在收集 FaceTime 訊息,以查看視訊通話

可以理解的是,當重大洩密事件曝光時,人們需要更多證據才能得出最終結論。回到正題,有兩個

在 FroYo Android 裝置上安裝阿拉伯語/英語薑餅鍵盤

在 FroYo Android 裝置上安裝阿拉伯語/英語薑餅鍵盤

預設的 Android 鍵盤不支援阿拉伯語輸入,但使用此自訂修改的鍵盤,您將能夠輸入英語和阿拉伯語

在線查看任何 JPEG 圖像的完整 EXIF 元數據信息

在線查看任何 JPEG 圖像的完整 EXIF 元數據信息

在我今天早些時候的帖子中,我寫了關於從照片中刪除元數據的文章。但如果你想做完全相反的事情,那就閱讀完整的 EXIF 元數據。

免費觀看來自世界各地的公共網路攝影機直播

免費觀看來自世界各地的公共網路攝影機直播

Webcams.Travel 是一項免費的線上服務,可讓您找到並查看來自世界各地的即時網路攝影機。它總共有 9505 個即時網路攝影機,

匯出並匯入 Opera 設定 [備份]

匯出並匯入 Opera 設定 [備份]

您的瀏覽個人資料中儲存了大量重要訊息,在大多數情況下,這些資訊您都無法承受遺失。市面上有很多工具

AndFTP 是一款優秀的 Android FTP 伺服器/用戶端

AndFTP 是一款優秀的 Android FTP 伺服器/用戶端

如果你喜歡把所有重要檔案都放在自己的伺服器上,ANDFTP 就是你的最佳選擇。這是一款功能強大的安卓應用,透過它,你

如何在 Google 地圖上使用室內地圖

如何在 Google 地圖上使用室內地圖

谷歌地圖提供即時視圖,本質上是透過擴增實境技術提供的方向指引。當你需要在人流密集的區域行走,而又沒有清晰的路線時,它們非常有用。