檢查iOS的Safari網頁的原始碼與分析
測試iOS端網頁呈現結果除了用實機測,一般就是使用模擬的方式來除錯,但有些情況下如果是在iDevice上執行上才會發生的,那就需要針對iOS端的設備去除錯。
Mac版的Safari在開發
功能上有增加一項針對iOS除錯網頁的功能,只要您將iDevice接上並且具備開發者身份的話,開啟主要選項就可以進行除錯,接下來我們來看一下是怎麼開啟它。
Mac上Safari功能開啟
開啟Safari之後,選擇偏好設定
、進階
之後,將在選單列中顯示「開發」選單
開啟,這項功能將會開啟一些網頁除錯功能,
一般網頁開發也非用的有用。
iDevice上Safari功能開啟
進入設定
尋找一下Safari
並點擊進入,這個功能屬於較深入的功能,我們要進入進階
,
開啟網頁檢閱器
功能,如此一來整個功能全部都開啟
開始使用
將iDevice接上傳輸線與電腦連線。
iDevice上開啟Safari並且輸入你要除錯的網址
如果您在iOS上有用Safari開啟網頁時,我們相應的開啟Mac上的Safari並選擇功能開發
後,我們所連接的iDevice上就會有您在iDevice上網頁的連結名稱,此時再選擇就會進入網頁檢閱器
功能,如此一來就能進行網頁的除錯。
下圖就是網頁檢閱器
功能畫面,提供很多功能供網頁除錯使用,
在這要注意到的一點:
- 當您將iDevice上的Safari關閉,
網頁檢閱器
會自動關閉 - iDevice上的Safari除錯的頁面如果更換網址時,要將
網頁檢閱器
關閉後再重新啟動,因為網頁檢閱器只能檢閱您啟動時的網頁面
以上是Safari所提供的開發
功能之一,更詳細的功能可以到官網Safari Web Inspector Guide查看。