部分瀏覽器遠程調(diào)試
各個瀏覽器遠程調(diào)試及其所用工具如下表所示：
| 平臺 | 瀏覽器 | 連接方式 | 使用ADB | 調(diào)試工具 |
|---|---|---|---|---|
| IOS | Safari(mac) | 數(shù)據(jù)線 | 不 | Inspector |
| Android | Android Chrome | 數(shù)據(jù)線 | 內(nèi)置 | Inspect |
| Android | Firefox For Mobile | 數(shù)據(jù)線 | 是 | FireFox原生調(diào)試工具 |
| Android | UC開發(fā)這工具 | 數(shù)據(jù)線 | 是 | Inspector |
ADB
在使用firefox和UC瀏覽器調(diào)試時，需要用USB連接設備，并使用adb方式連接。簡要的介紹一下adb吧：ADB = Android Debug Bridge，即調(diào)試橋，為安卓機器的調(diào)試工具。把 adb.exe及dll 放入系統(tǒng)路徑中，即可以在CMD/terminal中使用adb命令了。adb forward = 端口映射，提供透明socket通信。
ADB的使用中，端口有可能有沖突，windows端的命令如下：
- 查看使用了5037端口的進程pid:
netstat –ano | findstr "5037" - 根據(jù)pid查看進程：
tasklist/fi "pid eq 進程的pid" - 強制關閉進程：
taskkill /f /pid 進程的pid
騰訊手機助手、360手機助手、豌豆莢等手機管理軟件都會使用adb來進行手機的管理，因此調(diào)試前應先關閉這些軟件，節(jié)約時間。
使用Chrome遠程調(diào)試Chrome瀏覽器
可以測試WebView，允許在調(diào)試時自動做port-forwarding，可以不用刷機，不用改hosts。
準備遠程調(diào)試
- 對于web頁面的：Android 4.0+ ，并在Android設備上安裝chrome瀏覽器。
- 對于Android Apps：Android 4.4+ 和調(diào)試做需要的網(wǎng)頁視圖配置
- USB線用于接入你的Android設備
- 開發(fā)設備上需安裝Chrome32 以后的版本
- 在中國你還需要翻墻
具體步驟
-
在安卓設備上設置允許USB調(diào)試
勾選 設置>開發(fā)者選項>USB調(diào)試
2.調(diào)試頁面上確認USB設備已經(jīng)接入
調(diào)試頁面打開方式 chrome菜單中>工具>檢查設備
3.通過USB鏈接你的設備
如果你在windows上進行開發(fā)，為你的設備安裝設備USB驅動，在chrome 開發(fā)者網(wǎng)站上查找驅動OEM USB 驅動
4.調(diào)試遠程的web 視圖
當你連接好你的設備后，每當你打開一個可調(diào)式頁面時，在調(diào)試頁面會展示移動設備上的每一個鏈接。
點擊inspect按鈕，你可以打開對應頁面的開發(fā)這工具。
可以使用輸入框來在手機上打開對應的網(wǎng)站
5.調(diào)試未發(fā)布的頁面
打開本地服務器，把移動設備和開發(fā)設備連入同一個無線網(wǎng)絡，之后將使用ip方式訪問頁面，進行調(diào)試。
調(diào)試小貼士
1.通過調(diào)試工具使用F5可以遠程刷新頁面
2.當查看網(wǎng)絡瀑布圖的時候，要保證移動設備處于真實的網(wǎng)絡環(huán)境即是在的3G或2G網(wǎng)絡環(huán)境下。
3.移動設備上的硬件通常加載你的頁面內(nèi)容慢一些，因此使用Timeline 來分析優(yōu)化渲染和對CPU性能的影響。
說明
關閉調(diào)試工具窗口不會影響到你的遠程設備。
Chrome會使你的移動設備在調(diào)試時免于受到自動鎖屏的影響，但是你需要知道雖然這個很實用，他也會讓你的設備的安全性降低。
你可能會注意到允許你進行遠程調(diào)試的開發(fā)這工具版本與你開發(fā)機上的版本不相同，這是因為該工具是與在Android上chrome版本是一致的。
如果遇到頁面白板問題，嘗試著將手機和桌面的Chrome都更到最新吧，并嘗試著使用桌面端的chrome://inspect/#devices打開并刷新頁面，然后打開Inspector。如果還是不可以，多半是因為翻墻不成功。
調(diào)試webviews
從安卓4.4版本以后，可以通過開發(fā)者工具調(diào)試原生安卓設備中頁面。調(diào)試webView和調(diào)試chrome很相似，除了在Chrome中設置允許USB web調(diào)試設置以外。
調(diào)試WebView中的內(nèi)容，你需要通過setWebContentDebuggingEnabled來保證設備的可編程性，他是WebView類中的一個靜態(tài)方法。
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
這個設置應用于所有設備的webViews，要注意的是網(wǎng)頁調(diào)試不受設備說明中的調(diào)試標志狀態(tài)的影響。如果你想當調(diào)試標志為true的時候才能進行調(diào)試，測試標志當運行的時候。
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) {
WebView.setWebContentsDebuggingEnabled(true);
}
}
在開發(fā)工具中打開一個webView
到inspect頁面中可以看到一系列的可調(diào)式WebViews，同時還有形象的表示W(wǎng)ebViews的大小和相對設備屏幕的位置，如果你的webViews有標題位，這些也會顯示。在你想要調(diào)試的webViews上點擊inspect，使用開發(fā)者工具像你想象那樣遠程調(diào)試瀏覽器頁面。
端口轉發(fā)
通常，你有一個網(wǎng)絡服務器在本地開發(fā)機上，你希望設備上可以鏈接到這個站點上。如果移動設備和開發(fā)機連入一個網(wǎng)絡，這是很簡單就能實現(xiàn)的。但是有的時候這個也很難做到，譬如在被限制的公司網(wǎng)絡上。
Android版本的chrome支持端口轉發(fā)使得這個工作變得很簡單，他通過在移動設備上生成一個可以映射到開發(fā)機上特定TCP端口的TCP端口監(jiān)聽器。信息通過被轉發(fā)的端口在USB上傳輸，因此他不依靠于移動設備的網(wǎng)絡進行配置。
啟用端口轉發(fā)
這一步建立在你已完成遠程調(diào)試配置并且可以運轉，在你的開發(fā)機上的Chrome中配置。
- 打開chrome://inspect
- 打開位于頂部的端口轉發(fā)按鈕
- 在設備端口空中，鍵入android設備監(jiān)聽的端口號碼
- 在host空中，添加網(wǎng)絡應用運行的IP地址以及端口號，這個地址可以是你開發(fā)機上的任何可訪問的本地地址。當前，這個被限制在1024和65535之間。
- 確保你勾選開啟端口轉發(fā)。
在chrome頁面你可以看到代表的你的端口轉發(fā)成功的綠色圓圈。現(xiàn)在，在Open Tab處鍵入你的本地URL并且在你的移動設備上打開。
你能夠看到你開發(fā)機上的內(nèi)容。
虛擬主機映射
遠程調(diào)試和ADB
更多
UC瀏覽器
UC開發(fā)者中心，可以獲取到你感興趣的開發(fā)工具的相關內(nèi)容，也可以觀看具體參考手冊
構建Weinre調(diào)試服務器
在使用webkit內(nèi)核的移動端瀏覽器（比如海豚瀏覽器等），還可以使用Weinre來進行遠程調(diào)試，而調(diào)試的方法是構建一個調(diào)試服務器。Weinre代表We b In spector Re mote，是一種遠程調(diào)試工具。舉個例子，在電腦上可以即時 的更改手機上對應網(wǎng)頁的頁面元素、樣式表，或是查看Javascript變量，同時還可以看到手機上頁面的錯誤和警告信息.
Weinre作為一種遠程調(diào)試工具，在結構上分為三層：
目標頁面（target）：被調(diào)試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；
Debug客戶端（client）：本地的Web Inspector調(diào)試客戶端；
Debug服務端（agent）：一個HTTP Server，為目標頁面與Debug客戶端建立通信。
獲取Weinre
在任何的支持 Node.js 環(huán)境的系統(tǒng)下通過包管理器（npm）即可安裝Weinre
<code>npm -g install weinre
使用Weinre進行遠程調(diào)試
1.啟動 WeinreDe bug 服務端
weinre --httpPort 8080 --boundHost -all-
2.通過PC瀏覽器(WebKit內(nèi)核)打開WeinreDe bug 客戶端
Open in your pc browser http://localhost[Your IP]:8080
- 在你需要調(diào)試的頁面上加上通信用的腳本
<script src="http://localhost[Your IP]:8080/target/target-script-min.js#anonymous"></script> - 在手機上訪問你的測試頁面，在電腦上進入到WeinreDe bug客戶端看是否通信成功，如果一切沒問題
Open in your pc browser http://localhost[Your IP]:8080/client/#anonymous - 最后跟平時一樣實時調(diào)試頁面
