2014年1月5日 星期日

使用Chrome開發工具調整android上的網頁樣式

最近腦力不太好,需要紀錄一下,也方便自己找資料~XD

-------2014.04.08 更新 步驟-------

1.先在PC chrome打網址[chrome://flags],將[啟用開發人員工具實驗性功能]啟用。

2.啟用後再打網址[chrome://inspect ],將[ Discover USB devices ] 打勾
   點後面的[ Port forwarding ],將Enable port forwarding 勾選,再按 Done。
   就會出現你的手機型號。
3. 在Chrome上開啟要除錯的網頁,手機也打開要除錯的頁面,這時手機型號下方會出現開啟的網頁,點網頁下方的[ inspect ],就會開啟開發人員視窗提供偵錯。
來源:https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

-------2014.01.17[啟用透過USB進行遠端偵錯] 在新版Chrome已被拿掉.....> <"-------

環境:
PC和android載具都必須下載chrome,android的連接線要連到PC。
android的chrome裡面要到[設定]→[進階]→[開發人員工具]→開啟[USB網頁偵錯功能]。

流程:
1.先在PC chrome打網址[chrome://flags],將[啟用開發人員工具實驗性功能]、[啟用透過USB進行遠端偵錯]這兩項啟用。

2.啟用後再打網址[chrome://inspect ],你就會看到連接android chrome的各網址,網址的後面都會有個Inspect,選擇你要偵錯的網址點下去。

3.pc chrome就會另外開一個 android的開發人員視窗提供偵錯。

來源:
1. http://gigaom.com/2013/10/08/how-to-screencast-an-android-device-to-chrome-or-chrome-os/

2.高雄前端社群:廖洧杰 補充的實作流程
https://www.facebook.com/groups/358503154261390/

沒有留言:

張貼留言