Mobile WebApp 開發技巧 - 透過 Safari Web Inspector 遠端偵錯 iOS UIWebView


Mobile Web 也想要 Debugimages

伴隨著行動上網裝置的大賣,許多網站開始支援使用手機瀏覽,在實機上要 Debug 網頁或者 WebApp 就會比較麻煩一些,我們總不能一直印 log 或 alert 來進行偵錯。以往在桌面環境上的瀏覽器,都有提供 Web Debug Tools (像是 Chrome 按下 F12),在 iOS 上其實也一樣可以進行 Debug,在 iOS 6 之後 Safari 有個好用的 Web Inspector (Remote Debugging Tools) 可以用,讓我們可以直接透過 Mac 上的 Safari 進行遠端 Debug,理所當然過程中需要接上傳輸線,這樣的方式也可以對 App 中的 UIWebView 進行偵錯,對於常常寫 WebApp 的開發者來說實在相當方便。

使用 Safari Web Inspector 遠端除錯

首先針對要偵錯的 iDevice 接上 Mac 並且進入 iOS 設定中的「Safari」選項,在「進階」選單中開啟「網頁檢閱器」,iPhone 畫面如下:

IMG_2665

接著我們開啟 MacOS 中的 Safari,並且啟用「開發」選項,如下圖:

螢幕快照 2014-04-29 下午4.40.34

當我們的 iOS 開啟網頁或者 App 中的 UIWebView 被開啟時,我們就可以在 Mac 中的 Safari「開發」功能表中看到連上線的 iDevice,直接選取正在開啟的頁面就可以進行 Debug 囉,畫面如下:

螢幕快照 2014-04-29 下午4.38.47

Debug 畫面就跟我們平常使用的工具一樣,該有的都有,是不是很方便呢?執行畫面如下:

IMG_2666

螢幕快照 2014-04-29 下午4.22.33

iOS 真棒,那 Android 怎麼辦?

iOS 看來方便是方便沒錯,但是上面的環境有幾個前提,要有  Mac 並且 iOS 6.0 以上,也就是說 iOS5, Android 與 Windows, Linux 請走 GG 這條路。哈,其實還是有方法的,接下來我們就來介紹 weinre 這個方便的工具,讓這些非 Apple 系列的行動裝置也能輕易的進行除錯,僅請期待。

Facebook 留言

廣告

樂樂童鞋