如何在 Mac、Windows、iPhone 和 iPad 上檢查元素

開發人員和 UI 設計人員使用 Inspect Element 功能在不更改源代碼的情況下在線修改網站。但是如何在不參加 Web 開發課程的情況下檢查元素呢？

Inspect Element 是一個方便的開發人員工具，與流行的 Web 瀏覽器一起開箱即用。您只需要知道如何在瀏覽網站時單擊幾下即可部署該工具。

你可以做很多魔術，比如改變網站佈局、截取無文本的屏幕截圖、改變字體、修改數字等等。

在下面找到一個簡明的分步指南，以了解如何毫不費力地檢查元素。

什麼是檢查元素？

Inspect Element 是大多數 Web 瀏覽器中可用的 Web 開發工具。您可以使用它來編輯您正在訪問的任何網站的前端源代碼。

您所做的更改發生在網絡瀏覽器內的沙箱中。因此，您沒有對實際網站進行任何更改。此外，當您刷新頁面時，您所做的表面更改也會消失。

以下是一些創造性的使用方法：

• 你需要從一個網站上截圖，圖片上的文字讓你很困擾。使用檢查元素工具刪除這些文本。
• 您想通過在紐約時報或華盛頓郵報上展示您的名字來惡作劇您的朋友。檢查元素是執行此操作的最佳方法。
• 通過使用 Inspect Element 工具實時應用它們來測試網站上的調試代碼。如果可行，您可以更改後端源代碼。
• 作為數字營銷人員，您可以使用這個強大的網絡開發工具來揭示競爭對手的關鍵字、SEO 標題、元標記等。

如何在 Windows 上檢查元素

在 Windows 上使用 Inspect Element 工具非常簡單。在下面找到在 Windows 上使用各種 Web 瀏覽器檢查元素的分步指南：

谷歌瀏覽器檢查工具

如何在 Windows Chrome 瀏覽器上檢查元素

• 使用Google Chrome時，右鍵單擊網站上的任意位置。
• 右鍵單擊上下文菜單將彈出。
• 在底部，您會看到Inspect。
• 單擊檢查以在右側面板上查看 HTML 和 CSS 代碼。

如何在不右鍵單擊的情況下在 Chrome 中打開檢查元素？

在適用於 Windows 的 Google Chrome 上，有一些方便的快捷方式可以打開 Inspect Element 工具。這些熱鍵如下：

• Ctrl + Shift + C
• 功能鍵F12

上述熱鍵也適用於 Windows 的 Mozilla 瀏覽器。

Mozilla 檢查器工具

如何在 Windows Mozilla 瀏覽器上檢查元素

在 Mozilla 瀏覽器上，該過程與 Google Chrome 相同。但是，Inspector窗口將顯示在瀏覽器的底部而不是右側，就像在 Google Chrome 中一樣。

Microsoft Edge 檢查工具

如何在 Windows Edge 瀏覽器上檢查元素

令人驚訝的是，Microsoft Edge 的 Inspect Element 與 Google Chrome 瀏覽器的工作方式類似。右鍵單擊即可使用“檢查”工具。此外，HTML 和 CSS 代碼顯示在右側，類似於 Google Chrome。

如何在 Mac 上檢查元素

您是否在 Apple 的 Mac 計算機上使用 Google Chrome、Mozilla Firefox 或 Microsoft Edge？如果是，那麼您可以按照上述 Windows 部分中提到的步驟部署 Inspect Element 工具。

但是，如果您使用的是默認的 macOS 網絡瀏覽器 Safari，那麼使用 Inspect Element 工具是一個棘手的遊戲。默認情況下，Safari 不會在 Mac 上顯示檢查元素。這是您需要做的：

如何在 Mac 上打開檢查元素

首先，您需要在 Mac 上的 Safari 上激活開發者工具。就是這樣：

• 運行Safari瀏覽器。
• 訪問您要檢查其中網頁元素的網站。
• 從 Safari 瀏覽器的頂部菜單欄中選擇Safari 。
• 從打開的上下文菜單中單擊首選項。
• 在首選項屏幕上，選擇高級。
• 選中“高級首選項”屏幕底部的“顯示開發”菜單。

您已在 Safari for Mac 上成功啟用開發者工具。現在，按照以下步驟使用 Inspect Element：

• 在網站的任何元素（如文本或圖像）上，右鍵單擊。
• 將出現一個上下文菜單。在底部，您會看到Inspect Element。
• 單擊它可在網站下方打開一個調試部分，顯示 HTML 和CSS代碼。

What Are the Keys for Inspect Element?

您可能正在尋找 Mac 上檢查元素的快捷方式。您可以使用以下內容：

• 命令+ Shift + C
• 按下Control鍵，然後選擇任何元素。
• 用兩根手指點擊觸控板

如何檢查 Chromebook 上的元素

Chromebook 使用 Google Chrome 作為默認瀏覽器。因此，在打開任何網站後，只需右鍵單擊即可在隨後的上下文菜單中找到檢查元素選項。

如果您在單位或學校使用 Chromebook，您可能會問以下問題：

Why Can’t I Inspect on My School Chromebook?

大多數學校和企業管理員會禁用他們為您提���的用於工作或學習的 Chromebook 的高級功能。由於開發人員工具是高級功能，因此您的學校或工作 Chromebook 可能不會顯示 Inspect Element 工具。

如何在 iPad/iPhone 上檢查元素

遺憾的是，您無法在沒有 Mac 的情況下在 iPhone 或 iPad 上使用 Inspect Element 工具。

iOS 和 iPadOS 具有適用於 Safari 應用程序的 Web Inspector。但是，僅當您將移動設備連接到已激活 Safari 開發人員工具的 Mac 時，它才有效。以下是您可以嘗試的步驟：

• 打開 iPad/iPhone設置應用程序。
• 單擊左側導航窗格中的Safari 。

在 iPad 或 iPhone 上打開 Safari 設置

• 然後，在右側向下滾動以查找並選擇Advanced。

在 iPad 和 iPhone 上激活 Web Inspector

• 激活Web Inspector的開關。
• 現在，使用USB將移動設備連接到 Mac 。
• 在 Mac 上授權 iPhone/iPad。
• 在 Safari 上打開移動設備上的任何網站。
• 現在，在 Mac 上運行 Safari 並選擇頂部菜單欄上的開發。
• 在打開的上下文菜單中，查找您的移動設備名稱。
• 將光標懸停在移動設備上可以查看所有打開的網站。
• 現在，選擇任何網站以在 Mac 的 Safari 瀏覽器上查看 HTML 和 CSS 源代碼。

結論

您已經探索了使用檢查元素工具進行臨時網頁編輯的所有可能方法。您還學習瞭如何檢查各種設備（如 Mac、Windows、Chromebook、iPad 和 iPhone）的元素。

下次您出於娛樂或專業需要需要修改網頁時，請嘗試這些方法。與別處解釋的其他復雜方法相比，您肯定會喜歡這些輕鬆的步驟。

如果上述步驟對您有幫助，請不要忘記在下面留下評論，您發現任何具有挑戰性的方法，或有關檢查元素工具的任何秘密提示。

需要網頁作為印刷參考？立即了解如何快速將網頁另存為 PDF ！