手機網頁 網頁開發

手機網頁教學-手機網頁的Firebug網頁檢測除錯器(限iOS6)

2012/10/18

梅問題-手機網頁教學-iOS6手機網頁的firbug

  身為網頁從業人員,應該對於Firebug不感陌生,透過該工具,除了可以快速的檢測出網站的問題外,還可透過Firebug來檢視網頁區塊,除了Firebug外Chrome與IE8.0+也都內建有相關的網頁檢測工具,方便網頁人員快速找出問題點,但在製作手機網頁時,就只能透過瀏覽器的外掛,或是縮小瀏覽比例,來進行測試,雖然說很方便,但桌機版的瀏覽器,與行動裝置版的支援性還是有些不太一樣,所以一旦發生跑位或網頁出現錯誤時,就只能徒手抓猴,哈~現在終於不用再瞎眼抓猴啦!只要開啟iOS6瀏覽器Safari的進階功能,以及Mac上瀏覽器Safari的開發者機制,就能開始進行檢測啦!


相關需求:
適用裝置:iPhone、iPod touch、iPad
適用平台:iOS6.0
檢測設備:Mac OSX Safar i(僅限MAC平台)

行動裝置設定:
Step1
進到 設定/Safari / 進階
梅問題-手機網頁教學-iOS6手機網頁的firbug
Step2
「網頁檢閱器」給開啟。
梅問題-手機網頁教學-iOS6手機網頁的firbug

MAC Safari設定:
Step1
開啟Mac的Safari瀏覽器,選擇功能表「偏號設定」
梅問題-手機網頁教學-iOS6手機網頁的firbug


Step2

切到「進階」,將下方的選項勾起來,此時上方的功能列,就會看到「開發人員」的選項。
梅問題-手機網頁教學-iOS6手機網頁的firbug
Step3

將手機與電腦連接,並開啟要檢測的網頁。
梅問題-手機網頁教學-iOS6手機網頁的firbug

網頁檢測閱器:
Step1

回到Mac在,點開發人員選項,就會看到裝置的名稱,以及目前所瀏覽的網頁。
梅問題-手機網頁教學-iOS6手機網頁的firbug


Step2

這時就會開啟檢測的面板,有沒有感到很熟悉,與Chrome還蠻像的。
梅問題-手機網頁教學-iOS6手機網頁的firbug


Step3

接著將右邊的面板,切到{}頁籤,就會看到目前區塊所設定的CSS。

梅問題-手機網頁教學-iOS6手機網頁的firbug


網頁區塊檢測:
Step1

這時當點電腦上的網頁區塊,手機中也會同時被選取起來。
梅問題-手機網頁教學-iOS6手機網頁的firbug
Step2

回到MAC的網頁檢測面板,點一下面板中的手指頭
梅問題-手機網頁教學-iOS6手機網頁的firbug
Step3

這時點手機上的網頁區塊,Mac上的網頁檢測面板,也會即時將所選取的網頁區塊,給標示出來

梅問題-手機網頁教學-iOS6手機網頁的firbug