使用 Safari 上的網頁檢閱器查看 iOS 裝置中的網頁動態

 

網頁除錯除上，除了上本身編譯器提供的相關功能外，另一個聯想到的應該是使用瀏覽器的動態的網頁檢視功能，目前許多瀏覽器都有提供動態的網頁檢視功能，像是查看原始碼、網頁架構或是連結方式等等相當方便，有些檢閱器甚至可以動態編輯、分析和除錯，但是，這些功能僅提供給電腦上的瀏覽器使用，如果換做是 iOS 行動裝置上的瀏覽器，又該怎麼辦？別擔心，在新版的 Safari 7.0 版本中，你可以透過簡單的設定來完成這項功能，讓你在開發行動裝置的網頁時也可以無往不利。

在 iOS 裝置上的設定

要讓 iOS 裝置上的 Safari 能夠與電腦上的 Safari 做溝通，必須先開啟設定中的網頁檢閱器功能，你可以在「設定」>「Safari」>「進階」找到並開啟網頁檢閱器功能。

在設定中開啟網頁檢閱器功能

同樣道理，在 iOS 模擬器中也可以實現這樣的功能，你可以在 Xcode 中的 「Open Developer Tools」 >「iOS Simulator」 開啟 iOS 模擬器。

在 Xcode 中開啟 iOS 模擬器

在電腦上的 Safari 設定
來到 Safari 的「偏好設定」內，將「進階」的內頁中的最下面的「在選單列中顯示開發選單」打勾即可。

在 Safari的偏好設定中啟用開發選單

ps:開發選單中預設為隱藏狀態，在開啟之後除可以檢視使用網頁檢閱器外，還可以使用代理程式等許多實用的功能。


使用 Safari 的網頁檢閱器

在一切都設定好之後，將你 iOS 裝置（或是 iOS 模擬器）內的 Safari 開啟，任意進入一個頁面後，接著你就可以在電腦上 Safari 中的「開發」>「裝置名稱」裡找到 iOS 裝置正在瀏覽的網頁，並且啟動網頁檢視功能。

使用網頁檢閱器查看 iOS 裝置上正在瀏覽的網頁

網頁檢閱器提供許多實用的功能，除了傳統的原始碼檢視外，在記憶體、讀取秒數和資源上也可以逐一檢視，並且含有基本的除錯功能，包含網頁載入錯誤與警告等，而這些所有的項目都會依據目前 iOS 上的瀏覽動態做變更。關於更多資訊請參閱官方網站的Safari Web Inspector Guide。

Safari 7.0 中的網頁檢閱器畫面