
不管你是採用 RWD 響應式網站設計,還是單獨打造一個純行動版的網頁,總之在完成第一階段的設計後,都是免不了的要直接在手機上測試,看看有沒有任何問題。
大多數的時候,這個手機版實測程序,只要看一看網頁在手機上呈現的狀態,就可以進行調整,一些樣式上的錯位,也可以很輕易的在筆電或是桌機上改寫CSS來完成。
但有的時候,就是有一些很奇特的 Bug,百思不得其解,怎麼弄都弄不掉。
要不就是改一個小東西,得來來回回的在桌面上改寫存檔,再用手機 Refresh 瀏覽器一次重新查看,沒改好,再來一次....讓整個工作過程都充滿了火氣 XD
雖然在 MacOS 上的 Safari 有提供一個『使用者代理』的功能,可以讓我們選擇不同的裝置類型,來模擬在這些裝置上執行的樣子,可是幫助不大,實際進行開發工作的時候,基本就可以直接忽略這個功能了 T_T
難道在行動版的網頁,就不能像桌面版的頁面一樣,可以直接用瀏覽器提供的『開發者工具』,立即同步的來 Debug嗎?
乍聽之下好像是痴人說夢?
但其實真的是可以的喔,我們一起往下看看吧 :)
如何用 MacOS 的 Safari 開發者工具來測試行動版網站
要使用 MacOS 桌面版的 Safari 開發者工具,來對 iPhone 的行動版網站偵錯,做法分成兩個部分:
- 一個是在 iPhone 上的設定
- 另一個則是 MacOS 上的作業。
我們先來設定一下 iPhone吧!
要讓 iPhone 可以跟桌面版的開發者工具同步,設定的步驟如下:
- 開啟 iPhone 『設定』。
- 設定的主頁面中,往下滑,點選『Safari』。
- 在 Safari 的設定頁面裡,點選最下面的『進階』。
- 接著開啟『網頁檢閱器』。
- 回到 iPhone 上的 Safari,開啟你要測試的那個網頁(就留在這裡)。
- 然後將 iPhone 用連接線接上電腦。
- OK,這一個階段完成。

完成了 iPhone 上的這個階段的設定,也把 iPhone 用連接線接上電腦以後,我們就要開始進行在 Mac 上同步測試偵錯行動版網站了喔。
我們一步一步來進行:
- 開啟桌面版的 Safari。
- 在 Safari 的功能表上,點選『開發』。
- 這時候你就會看到在『開發』功能表裡面,會多出一個 iPhone。
- 滑鼠移到開發功能表裡的那個『iPhone』選項以後,就會看到展開的此選單上方,會出現你要偵錯的那個網址。
如果在這個選單上方沒有出現任何網址,而是顯示『沒有可檢閱的應用程式』,沒關係,這是因為 iPhone 進入休眠了,把iPhone點醒,確認畫面是停在手機版 Safari 你要偵錯的那個頁面,然後這個選項就會出現。
選取 iPhone 上要檢閱的行動版網頁
- 接著點選那個網址,我們熟悉的網頁檢閱器就會自動打開了。
- 在網頁檢閱器中,我們就可以切換不同的功能標籤頁,來替行動版同步偵錯、測試、微調,非常方便。
不僅僅偵錯,也可以用來學習
用這個遠端桌面同步手機的方式來檢閱行動版網頁,除了在開發 RWD 行動版網頁好用以外,對於學習也很有幫助。
怎麼說呢?
很多時候在瀏覽其他網站時,會發現別人的行動版網站有些地方設計的很好,或是有些功能很厲害,想學。
可是回到桌面上查看的時候,就發現那些功能或設計只出現在行動版的頁面上,要是想找出來哪個功能是哪段語法,那真的就是大工程了,找死你也不見得找的到。
用這種方法,就可以很快的對比到特定的段落和樣式,方便我們複製...學習這個新技巧。
好吧,那麼大家就開始動工了吧!