在桌面chrome中調試android設備中的web頁面

準備工做

1, 桌面版chromehtml

2, Android設備(安裝有chrome瀏覽器)android

3, Android-sdkchrome

Android-sdk安裝及設置

SKD安裝

http://developer.android.com/sdk/index.html下載android-sdk開發包,安裝後,執行SDK Manager.exe,安裝android SDK Platform-tools工具包。瀏覽器

clip_image001

環境變量配置:

在環境變量添加path,並添加路徑<sdk>/platform-tools;app

clip_image002

添加後,在cmd窗口執行adb,看到以下相關信息,表示配置成功。frontend

clip_image004

Android設備工做

開啓USB調試選項

進入設置,選擇開發者選項,勾選USB調試chrome-devtools

clip_image006

開啓android設備上面chrome中USB網頁調試選項

clip_image008

開始調試準備

設備檢測

鏈接數據線後,進入cmd命令行,輸入 adb devices,查看是否有設備列表。如圖:工具

clip_image009

Chrome快捷方式

添加chrome快捷方式到桌面,修改目標:<path>\chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile.net

點擊該快捷方式啓動chrome,在瀏覽器地址欄輸入:localhost:9222命令行

clip_image010

有縮略圖能夠選擇。點擊後,若是沒法顯示該頁,請配置host文件

HOST配置

進入C:\Windows\System32\drivers\etc,編輯HOST文件,添加以下配置。

203.208.46.178 chrome-devtools-frontend.appspot.com

沒法沒有保存權限,請查找相關教程。

調試頁面

前面工做完成後,點擊localhost:9222中的縮略圖,進入調試頁面:

clip_image012

能夠看到控制檯,在console窗口中能夠看到打印信息。

相關文章
相關標籤/搜索