如何在 iPhone 上檢查元素：您需要了解的一切

如果您不知道，網頁由大量元素組成，這些元素被格式化為顯示為一個單一實體。Web 開發人員需要了解每一個元素、它們在網頁上的佈局方式，並了解它們各自如何工作。

Windows 和 Mac 用戶會熟悉右鍵單擊任何網頁時可用的“檢查”或“檢查元素”選項。此選項提供了一種查看網站源代碼、查看其所有元素、每個元素背後的代碼行以及編輯其 Javascript、HTML、CSS 以及其中的所有其他媒體文件的方法。這樣，您不僅可以了解特定網站的工作原理和功能，還可以在自己的瀏覽器上對其進行修改，而不會影響實際的網頁。 

儘管檢查選項被稱為“開發人員”工具，但從中受益的不僅僅是開發人員。即使是初學者和非開發人員也可以使用此工具來了解網站的構建方式以及每個元素如何協同工作。如果您希望在 iPhone 上瀏覽網頁時使用檢查元素選項，這篇文章應該可以幫助您找到實現這一目標的方法。 

相關： 如何在 Android 上檢查元素

您可以直接在 Safari 上檢查網頁元素嗎？

簡單回答是不。iOS 上的 Safari 與許多其他移動瀏覽器一樣，不提供用於查看網頁開發的本機檢查工具。蘋果沒有提供為什麼沒有這樣的選項的原因，但我們認為這與智能手機上的顯示屏有多小有關。較小的顯示尺寸可能會使用戶更難在正在檢查的框周圍導航，因為當您想要編輯網頁代碼甚至找到網頁代碼時，您可能必須小心地放置光標。 

造成這種情況的另一個原因可能是智能手機缺乏計算能力。儘管現代 iPhone 有足夠的能力來運行圖形密集型遊戲，但查看網站的頁面信息可能會很棘手，因為並非所有網站都是平等創建的。有些網站可能擁有大量精心設計的資源和圖層，使其看起來無縫，但相同的資源在檢查時可能需要一些時間才能加載。 

相關： 在 iPhone 上循環播放視頻 [指南]

在 iPhone 上檢查 Element：您還有哪些其他選擇？

雖然您無法在 iOS 上的 Safari 應用程序上使用本機“檢查元素”工具，但仍有一些方法可以解決此限制。下面提供了三種檢查您在 iPhone 上的 Safari 瀏覽器上訪問的網頁元素的方法。 

方法 #01：在 Mac 上使用 Safari

如果您除了 iPhone 之外還擁有 macOS 設備，那麼您仍然可以直接從 Safari 應用程序檢查網頁，但在 Mac 上。Apple 允許您使用其“開發”工具從 iOS 上的 Safari 調試網頁，就像在 Mac 上一樣。雖然調試站點的過程相對簡單，但其初始設置可能比您預期的要長。但不用擔心，我們將以最簡單的方式解釋設置過程，並幫助您在第一次後輕鬆檢查頁面。 

在 iOS 上啟用 Web Inspector

為了能夠調試 Web 元素，您首先需要為 iOS 上的 Safari 應用程序啟用 Web Inspector。為此，請打開“設置”應用程序並選擇“Safari”。

在 Safari 中，向下滾動並點擊“高級”。 

在下一個屏幕上，點擊“Web Inspector”旁邊的開關，直到它變成綠色。 

Mac 上的初始設置

在 iOS 上成功啟用適用於 Safari 的 Web Inspector 後，就可以在 Mac 上完成設置了。在 Mac 上，打開 Safari 應用程序，單擊菜單欄中的“Safari”選項，然後選擇“首選項”。 

在出現的窗口中，選擇頂部的“高級”選項卡，然後選中“在菜單欄中顯示開髮菜單”框。 

您現在應該看到“開發”選項出現在頂部的菜單欄上。 

現在，使用 iPhone 附帶的 USB 數據線在 iPhone 和 Mac 之間建立連接。當您的 iPhone 連接到 Mac 時，您可以單擊菜單欄上的“開發”，然後查看您的 iPhone 是否出現在設備列表中。如果是，請單擊此列表中的設備名稱。 

為了確保您可以無線檢查網頁，而無需像剛才那樣使用 USB 電纜，請在 iPhone 菜單打開時單擊“通過網絡連接”選項。 

現在，您可以斷開 iPhone 與 Mac 的連接，並且仍然可以檢查網頁，而無需在它們之間連接電纜。 

在 Mac 上檢查 iOS 網頁

現在您已在“開發”菜單上啟用了“通過網絡連接”，您可以直接在 Mac 上通過 iOS 上的 Safari 檢查網頁。您只需確保iPhone和Mac都連接到同一無線網絡即可無線調試網頁。 

為此，請打開 iPhone 上的 Safari 應用程序並轉到您要檢查的網頁。 

解鎖 iPhone 並打開所選網頁後，轉到 Mac 並打開 Safari 應用程序。在這裡，單擊菜單欄中的“開發”並轉到“iPhone”。 

當您將鼠標懸停在“iPhone”上時，您應該會看到在 iOS 上打開的網頁列表。單擊此列表中您要檢查的網頁。 

Mac 上將加載一個新窗口，顯示可以從所選網頁檢查的所有信息。 

在檢查過程中的任何時候，您都可以通過查找 iPhone 上的藍色區域來查看一行代碼指向頁面的哪個部分。

此藍色區域表示您在 Mac 上懸停的代碼是構成此特定網頁的突出顯示元素的代碼。在不同代碼行之間移動會將該藍色突出顯示實時移動到 iPhone 頁面的不同部分。 

相關： 如何在 FaceTime 中保留效果

方法 #02：在 iOS 上使用快捷方式 

如果您沒有 Mac 或者想直接從 iPhone 瀏覽網站，那麼您會很高興知道 iOS Shortcuts 應用程序可以實現此目的。iOS 上的“快捷方式”應用程序提供了一系列預製選擇，可讓您查看頁面的源代碼、編輯網頁、從網站抓取圖像以及從 Safari 應用程序中查找舊版本的網頁。不幸的是，沒有一個快捷方式可以在 iOS 上提供全面的 Web 調試，因此您需要為每個目的添加一個快捷方式。 

我們找到了以下快捷方式，您可以使用它們直接從 iOS 在網站上執行調試。這些都是：

查看源代碼– 此快捷方式可讓您以基本骨骼格式查看網頁的源代碼。 

編輯網頁– 此快捷方式可讓您在本地編輯網頁內容，以便您可以測試新的設計或格式以及它在 iPhone 上的外觀。 

從頁面獲取圖像- 檢查頁面的主要原因可能是查看圖像或保存那些非交互式的圖像。此快捷方式從某個網頁抓取所有圖像，然後集中預覽它們。如下面的屏幕截圖所示，您可以查看所選網頁上託管的 24 張圖像中的每一張。 

Wayback Machine – 此快捷方式將您帶到網頁的 Wayback Machine，您可以在其中查看仍保存在互聯網檔案館中的先前版本。 

根據您想要在 iOS 上檢查網頁的方式，您可以通過單擊上面的相關鏈接或在“快捷方式”>“圖庫”中搜索它們，將任何快捷方式添加到您的 iPhone。 

在搜索結果中，點擊您想要添加到 iPhone 的快捷方式。 

當預覽屏幕打開時，點擊底部的“添加小部件”選項。 

所有快捷方式都將顯示在“我的快捷方式”>“所有快捷方式”屏幕中，並且也可以在 Safari 的“共享”表中訪問它們。  

要檢查網頁，請在 Safari 中打開它，然後點擊底部的“共享”按鈕。 

在出現的共享表中，向下滾動並找到您添加到 iPhone 的快捷方式。 

選擇“編輯網頁”將直接讓您編輯網頁的部分內容。當您選擇其他三個選項中的任何一個時，系統會提示您是否需要快捷方式來訪問網頁。在這裡，點擊“允許一次”。 

相關： 如何將 WidgetSmith 添加到主屏幕

方法#03：使用第三方應用程序

如果您對上述結果不滿意，則必須探索第三方應用程序才能檢查網頁的元素。與 Safari 類似，您找不到在最流行的網絡瀏覽器（Chrome、Firefox、Brave 等）中檢查網頁的方法。相反，您必須依賴為執行此特定任務而創建的應用程序，而此類應用程序可能很難找到。

雖然在 App Store 上進行簡單的搜索就會為您提供多個用於檢查 Web 元素的結果，但您不會發現許多免費且評價很高的應用程序。根據用戶反饋，我們建議您 從 App Store 安裝Inspect Browser或Gear Browser應用程序，它們提供 JavaScript、CSS 和 HTML 的元素檢查和編輯功能。

這就是您在 iPhone 上檢查元素所需了解的全部內容。 

有關的

• 如何在不按住 iPhone 的情況下粘貼
• 如何在 iMessage 上留下群組文本以及會發生什麼
• 如何查找正在跟踪您的 Airtag
• 您應該了解的 30 個不常見的 iOS 15 技巧
• 如何在 iPhone 上設置隨機壁紙而不重複