如何在 Mac 上檢查元素

瀏覽網絡時，我們往往不會過多思考幕後發生的事情。文本、圖像和視頻要么出現，要么不出現。然而，每次您訪問某個頁面時，您的瀏覽器或 Web 服務器都會執行大量代碼。所以有時，能夠看到該代碼會很有幫助。例如，如果頁面加載不正確，或者您想知道視頻播放器是如何嵌入的。

在本文中，我們將向您展示如何在 Safari、Chrome 和 Firefox 中檢查元素。

什麼是檢查元素？

檢查元素是大多數 Web 瀏覽器中的一項高級功能，它允許您打開一個窗口，顯示 HTML、CSS、JavaScript 和其他組合起來構建網頁的編碼。在某些網絡瀏覽器中，您必須在“設置”中啟用它，但在大多數瀏覽器中，它已經在菜單中。它主要針對開發人員，允許他們調試網站，但它在其他情況下也很有用。

為什麼要在 Web 瀏覽器中檢查元素？

除了調試頁面之外，Inspect Element 也是一個出色的工具，用於檢查 WordPress 等內容管理系統中添加的 Google Analytics 等代碼是否已正確部署。它還可用於找出視頻未播放或文件無法開始下載的原因。

閱讀更多：對 Mac 上的 Mac 錯誤代碼 -43 進行故障排除

如果您是一名開發人員，渴望了解網站如何實現特定效果，請使用 Inspect Element。您甚至可以在瀏覽器中編輯代碼以測試更改後的外觀。主瀏覽器窗口中的網頁將立即更新以顯示所有更改。

如何在網絡瀏覽器中檢查元素

檢查元素的方式取決於您使用的瀏覽器。我們將向您展示如何在 Safari、Firefox 和 Chrome 中執行此操作。

如何在 Safari 中檢查元素

要檢查 Safari 元素，您需要做的第一件事是啟用“開發”菜單。以下是如何做到這一點。

1. 啟動 Safari。
2. 單擊 Safari 菜單，然後選擇“設置”。
3. 選擇高級選項卡。
4. 選中標有“在菜單欄中顯示開髮菜單”的框。
5. 關閉設置。

啟用“開發”菜單後，單擊它並選擇“顯示頁面源”，或按 Command-Option-U。您將看到瀏覽器底部打開一個窗口，頂部有許多選項卡。您可以在這裡做幾件事。

1. 單擊來源可查看頁面所有不同部分的列表。在側邊欄中，您將看到文件夾列表，例如框架、圖像和腳本。單擊圖像文件夾可查看頁面上的圖像庫。單擊任何文件夾旁邊的下拉列表以查看該文件夾中的元素。單擊其中之一，主窗口中將出現預覽。
2. 選擇“元素”選項卡可查看構成網頁的代碼的嵌套視圖。如果展開任何部分，該部分中的代碼將可見；如果您選擇它，它將顯示與之相關的頁面段落。
3. 單擊工具欄中的重疊矩形，在新窗口中打開元素檢查器。
4. 在“元素”選項卡中，單擊標尺圖標可查看每個元素的確切位置。

如何在 Safari 中檢查和更改特定網頁元素

上面的方法可以讓您很好地了解 Safari 中的網頁。但是，如果您想在頁面上查找特定元素並更改它以測試某些內容該怎麼辦？方法如下：

1. 導航到網頁上您想要檢查的元素，例如一行文本。
2. 選擇文本並按住 Control 鍵並單擊它。然後從上下文菜單中選擇“檢查元素”。
3. 該窗口將在網頁底部打開，您將看到控制該元素的代碼。
4. 您可以通過在檢查器中雙擊文本並輸入新文本來更改瀏覽器中的文本。或者，如果是圖像，您可以將 URL 替換為其他圖像的 URL。

如何在 Google Chrome 中使用檢查元素

1. 啟動 Chrome。單擊“視圖”菜單，將指針移至底部的“開發人員”，然後選擇“檢查元素”，或按 Command-Option-C。
2. 瀏覽器窗口右側將打開一個窗口，顯示網頁上的元素。
3. 您會注意到檢查器頂部的選項卡與 Safari 中的選項卡類似：“元素”、“控制台”和“源”。
4. 在“元素”選項卡中，將鼠標懸停在任何部分上以突出顯示其控制的網頁部分。
5. “源”選項卡將所有不同類型的元素分組到文件夾中，就像在 Safari 中一樣。

   

如何在 Chrome 中檢查和更改特定網頁元素

Chrome 中查看和更改網頁上特定元素的過程與 Safari 中相同。

1. 在網頁上找到該元素。然後按住 Control 鍵並單擊它。
2. 從菜單中選擇“檢查”。在右側的側欄中，您將看到與所選元素相關的代碼部分。
3. 單擊箭頭以顯示整個部分。
4. 當您找到要更改的文本行時，選擇它，刪除該文本並鍵入新文本。如果您要更改圖像，請鍵入或粘貼新圖像的 URL。

如何在 Firefox 中使用檢查元素

1. 啟動火狐瀏覽器。單擊“工具”菜單。
2. 將鼠標指針懸停在瀏覽器工具上並選擇 Web 開發人員工具。
3. 您將看到屏幕底部打開一個窗口，類似於 Safari 中打開的窗口。
4. 在這種情況下，沒有單獨的“元素”或“源”選項卡。要檢查代碼，請選擇“檢查器”選項卡。
5. 您會注意到，當您將鼠標懸停在“檢查器”選項卡中的代碼部分上時，上面頁面的部分會突出顯示。

如何在 Firefox 中檢查特定網頁元素並更改它

上述所有功能都適用於 Firefox，就像在 Safari 和 Chrome 中一樣。

1. 按住 Control 鍵並單擊網頁上要檢查或更改的元素。
2. 從菜單中選擇“檢查”。
3. 單擊下拉箭頭以顯示代碼。
4. 選擇文本，將其刪除，然後鍵入新文本（或選擇圖像 URL 並將其替換為另一個圖像的 URL。）

一旦您知道如何在 Mac 上檢查元素，您就可以分析網站上的源代碼，甚至進行更改和測試結果。對於大多數瀏覽器來說，該過程非常相似。通常有一個開發人員工具菜單或視圖菜單中的查看源命令。在 Safari 中，只有當您在“設置”中啟用“開發人員”菜單時，它才可見，但在大多數瀏覽器中，它位於菜單欄中。按照上述步驟檢查 Safari、Chrome 或 Firefox 中的元素。