en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

11.06.2013

使用 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 中的網頁檢閱器畫面






沒有留言:

張貼留言