移动端Web开发调试之Chrome远程调试(Remote Debugging)
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
在智能手機還未普及時，移動設備的調試處處是alert的，這估計是最常用的辦法了。以前很多時候為了預覽頁面在移動設備上的效果，需要先將頁面上傳到測試服務器，再將url輸入到設備瀏覽器，或者使用第三方二維碼掃碼應用，通過移動設備訪問打開瀏覽實際效果，每次換設備都要重復這些操作，頁面多的話這些繁瑣的事情就特別讓人厭煩了。移動互聯網的浪潮，伴隨著智能硬件的興起與移動設備的普及，讓前端工程師這個職業變得更為專業，前端工程師要做的工作也越來越多，尤其是國內大大小小眾多的手機廠商的興起、手機型號的繁多，僅僅依靠Firebug與Chrome/Safari自帶的debug工具已經遠遠難以滿足需求了。繁瑣重復性勞動占用了相當的時間，慶幸的是前端的自動化工具也越來越多。越來越多的便捷調試工具無非是前端工程師的一大福音。
近幾年，瀏覽器廠商也紛紛推出自己的遠程調試(RemoteDebugging)工具，比如Opera Mobile 可以借助其推出的跨設備跨平臺桌面開發者工具Opera Dragonfly 實現遠程調試，iOSSafari 可以開啟Web檢查器在 Mac OS X系統中實現遠程調試。Android4+已上系統的 Chrome forandroid可以 配合 ADB（Android Debug Bridge）實現桌面遠程調試，桌面版Chrome 32+已經支持免安裝ADB即可實現遠程調試移動設備頁面/WebView 。國內的UC瀏覽器開發者版也推出了自己的遠程調試工具RemoteInspector（簡稱RI）。
除了瀏覽器廠商之外，也涌現出許多第三方開發的遠程調試工具，諸如支持全平臺調試的Weinre 和Adobe Edge Inspect CC，國人自研的ios專用工具MIHTool。
本篇主要說一下Chrome RemoteDebugging 的方法，之前也遇到一些坑，自己總結了一些經驗，分享如下。
Chrome DevTools調試移動設備Brower Page Tabs/WebViews
安卓遠程調試目前支持所有操作系統（Windows,Mac,Linux, and Chrome OS.）中調試，支持：
● 調試站點的頁面
● 調試安卓原生App中的WebView
● 實時將安卓設備的屏幕圖像同步顯示到開發機器。
● 通過端口轉發（port forwarding）與虛擬主機映射（virtual host mapping）實現安卓移動設備與開發服務器進行交互調試。
調試要求：
● 開發環境安卓桌面版Chrome32+
● 一條USB數據線，連接電腦與移動設備，安裝相應機型的USB驅動。驅動程序下載地址：http://developer.android.com/tools/extras/oem-usb.html
如果電腦上安裝有百度手機助手、360手機助手這類軟件，一般連接后可以自動安裝相應的USB驅動程序。
● 如果是調試網頁，移動設備需要安裝Chrome forAndroid ，且安卓系統須為Android 4.0+
● 對于APP WebView的調試，需要系統為Android 4.4+ 并且原生應用內的Webview須進行相應的調試聲明配置。
說明：遠程調試要求桌面版Chrome瀏覽器版本要高于安卓移動設備的Chrome版本號。有條件的最好使用Chrome 的金絲雀特別版Chrome Canary (Mac/Windows)或者Chrome桌面開發版Chrome Dev channel release (linux)。
第一步：首先在移動設備上開啟USB調試模式。方法：
● Android 3.2+，打開設置 – 應用程序 – 開發，在“USB調試”處打鉤選上
● Android 4.0~ Android 4.1 ，打開設置-開發者選項-進入在“USB調試”處打鉤選上。
● Android 4.2+，打開設置-關于手機-手機配置信息-連點“版本號”7次，返回上層就可以看到“開發者選項”顯示出來了，在“USB調試”處打鉤選上。
第二步：用USB數據線連接設備，驅動裝好連接成功后，你可能會在設備上看到一個彈框請求允許使用這臺計算機通過usb調試
勾選后點擊“確定”。
第三步：在電腦上打開Chrome瀏覽器的菜單– 更多工具 – 檢查設備（Chromemenu > More tools > Inspect Devices），或者直接在瀏覽器地址欄輸入chrome://inspect 或者about:inspect
打開后DevTools后，確保打鉤選中Discover USB devices
如果USB連接成功，這時候我們可以看到移動設備的型號和設備上運行的頁面和允許調試的WebView列表。找到需要調試的目標頁面，點擊inspect即可打開DevTools，點擊reload可重新加載當前的調試頁面，點擊focus tab可將標簽頁置頂，close為關閉當前頁面。更可以通過在輸入框中鍵入網址新開一個頁面。
點擊inspect打開DevTools后，你可以選中頁面中的DOM元素，同時設備中對應元素也高亮顯示，也可使用DevTools中的InspectElement選中目標元素，可以實時與移動設備頁面交互，方便的定位問題所在，進行代碼調試。
在輸入框中輸入一個新的網址，點擊Opoen可打開你想要調試的新頁面。
說明：由于Chrome版本不同，DevTools也可能有些差別，比如我的Chrome38.0.2125.104m版竟然沒有打開新頁面的url輸入框，升級到v39后恢復正常，知道原因的歡迎留言。
1. DevTools窗口使用F5快捷鍵（CMD+R for Mac）重新加載頁面
2. 使用Network面板可以實時觀察頁面在手機實際網絡環境中資源的加載情況。
3. Timeline面板可以用來分析頁面渲染和CPU使用情況，通常情況下移動設備的性能會比電腦上要低一些。
4. 在DevTools的Console控制臺中編寫腳本執行，會同步表現在移動設備中檢查的頁面。
5. 如果要調試本地搭建的服務器程序，需要用到端口轉發和虛擬主機映射，以使設備上可以呈現你本地環境下的頁面內容。
調試WebView需要滿足安卓系統版本為Android 4.4+已上。并且需要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，如下：
[java]view plaincopy
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
WebView.setWebContentsDebuggingEnabled(true);
}
以上配置方法適用于安卓應用內所有的WebView情形。
安卓WebView是否可調試并不取決于應用中manifest的標志變量debuggable，如果你想只在debuggable為true時候允許WebView遠程調試，請使用以下代碼段：
[java]view plaincopy
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
if(0!=(getApplicationInfo().flags&=ApplicationInfo.FLAG_DEBUGGABLE))
{WebView.setWebContentsDebuggingEnabled(true);}
}
WebView的可用列表如下：
所列信息其中包括頁面的title，url地址，頁面尺寸大小及其相對于設備屏幕的相對位置。
實時屏幕投影（Live screencasting）
調試移動設備時視線在兩個設備的屏幕之間來回切換太不方便了，screencast實現了移動設備屏幕與開發環境DevTools的同步，你可以通過screencast與移動設備上的內容進行交互式的操作。
Screencast只呈現頁面的內容，而不顯示工具條地址欄、設備鍵盤等其他設備接口，這些在Screencase中表現為透明部分。
Android 4.4，是由Google公司制作和研發的代號為KitKat的手機操作系統，于北京時間2013年9月4日凌晨對外公布了該Android新版本的名稱，為Android 4.4（代號 KitKat 奇巧）。據悉，該代號來自雀巢的KitKat巧克力。對于KitKat 4.4.3，screencast不僅可以在Tab網頁實現，在WebView上也可以同步交互操作。
點擊DevTools右上角的Screencast圖標，可以開啟Screencast視圖，移動設備屏幕會實時展現在左側的Screencast面板中。
Chrome32+版本的DevTools對連接的設備支持native USB debugging。而版本號稍低的一些則需要通過安裝ADB或ADB plugin調試移動設備上的Chrome網頁。由于之前一直是使用ADB plugin方式調試，如今一番折騰發現高版本更為方便實用的特性，由于網上的資料比較零散，關鍵的東西都沒有提及，坑也不少，這也正是寫此文的緣由。
曾經靠安裝Android SDK套件，需要執行類似 adb forward tcp:9001 localabstract:chrome_devtools_remote 這樣的命令，才能開始調試，現在我們完可以擺脫這些繁瑣的命令了。
開發機器安裝ADB plugin是Chrome 28+之后的方式，區別于以前需要安裝整個Android SDK套件，同時移動設備要安裝Chrome for Android 28+。ADB擴展程序安裝成功后，Chrome菜單旁邊會出現一個灰色的Andr??oid啟動圖標。
點擊Android的圖標，然后單擊ADB開始。一旦ADB已經開始，菜單圖標變成綠色，并顯示當前連接的設備的數量，如果有連接設備的話。
點擊View inspection Targets打開：列表中會顯示每個連接的設備及其選項卡頁面。查找要調試的頁面，并點擊頁面鏈接URL旁邊的inspect啟動DevTools調試窗口。
使用用DevTools特別重要的一點是：如果你點擊inspect打開的DevTools窗口一片空白，且刷新無效時，那極有可能是由于被墻的緣故，你可以嘗試appspot.com是否可以ping的通，如果無法ping通，那你現在就先翻墻吧（goagent 或紅杏都不錯，將appspot.com加入白名單），當然你還需要有google賬戶。
補充說明一下，如果接上USB數據線后，沒有顯示任何連接的設備，請按照以下步驟排查：
● 檢查您的設備連接到USB，檢查USB數據線。
● 確保您的設備發出ADB設備命令列為可用。如果沒有，檢查是否有您的設備上是否啟用USB調試。
● 若是Windows系統，檢查你的USB驅動是否安裝正確。參考http://developer.android.com/tools/extras/oem-usb.html
● 桌面Chrome瀏覽器打開chrome://inspect檢查Discover USB devices是否選中
● 確保桌面瀏覽器版本要高于移動設備的Chrome版本號
● 如果Chrome for Android版本較低，請檢查移動設備上Chrome瀏覽器設置，確保設置中啟用USB調試。高版本中無此設置項，無須設置。
● 如果依然無法顯示，嘗試重新拔插USB數據線。
端口轉發（Port forwarding）
你的手機和開發機器有時會處于兩個不同的網絡（如本地服務器和線上服務器兩個不同的網絡環境），手機上可能獲取不到開發環境的頁面內容。況且，有時候你的開發環境處于公司出于安全原因管控限制下的網絡中。
Chrome For Android中的端口轉發解決了這一困難，在手機上測試你開發的網站瞬間變得容易。它的工作原理是在移動設備上創建一個監聽TCP端口，該端口映射到開發機器特定的TCP端口，兩個端口通過USB線路通信，所以這種連接并不依賴于所處網絡環境的配置。
在進入正題前必須要提前說明搭建本地服務器需要注意的一些點。安裝本地服務器，這里安裝的是wamp集成包。一鍵安裝完成后，需要修改Apache的一些設置。
1. 打開Apache安裝目錄下的配置文件httpd.conf增加監聽多個端口。
[plain]view plaincopy
#Listen:AllowsyoutobindApachetospecificIPaddressesand/or
#ports,insteadofthedefault.Seealsothe<VirtualHost>
#directive.
#
#ChangethistoListenonspecificIPaddressesasshownbelowto
#preventApachefromglommingontoallboundIPaddresses.
#
#Listen12.34.56.78:80
Listen80
Listen8888
Listen8999
Listen1818
開啟Apache服務后可通過命令netstat –n –a查看所配置的端口是否開啟。
如果你本地環境也開啟了IIS服務，為了避免二者都是用80端口發生沖突，可以按照上述方法修改Apache的默認端口。修改設置完成后別忘了重啟Apache服務。
如何改變IIS端口：若保留Apache服務與IIS服務同時運行，不想改變Apache默認80端口，那么只能改變IIS端口，方法如下：開始->運行->輸入:inetmgr->Internet信息服務->本地計算機->網站->右鍵“默認網站”->屬性->選擇“網站”標簽->修改TCP端口即可。最后重新啟動IIS服務。
2. 在httpd.conf文件中開啟虛擬主機配置
[plain]view plaincopy
#Virtualhosts
#Includeconf/extra/httpd-vhosts.conf
將第二行前的#號去掉，即是為了允許加載擴展配置。
1. Apache服務器默認的路徑為安裝目錄下的htdocs，如果想改變默認目錄，可以修改httpd.conf文件下的DocumentRoot和Directory，修改兩者路徑到你指定的目錄即可。
[plain]view plaincopy
#
#DocumentRoot:Thedirectoryoutofwhichyouwillserveyour
#documents.Bydefault,allrequestsaretakenfromthisdirectory,but
#symboliclinksandaliasesmaybeusedtopointtootherlocations.
#
DocumentRoot"E:/wamp/www/"
#
#ThisshouldbechangedtowhateveryousetDocumentRootto.
#
<Directory"E:/wamp/www/">
打開extra目錄下的httpd-vhosts.conf配置文件，在文件最后位置分別為監聽的端口設置虛擬主機目錄
[plain]view plaincopy
#
#Usename-basedvirtualhosting.
#
NameVirtualHost*:80
#
#VirtualHostexample:
#AlmostanyApachedirectivemaygointoaVirtualHostcontainer.
#ThefirstVirtualHostsectionisusedforallrequeststhatdonot
#matchaServerNameorServerAliasinany<VirtualHost>block.
#
<VirtualHost*:80>
ServerAdminwebmaster@dummy-host.example.com
DocumentRoot"E:/wamp/www/dummy-host.example.com"
ServerNamedummy-host.example.com
ServerAliaswww.dummy-host.example.com
ErrorLog"logs/dummy-host.example.com-error.log"
CustomLog"logs/dummy-host.example.com-access.log"common
</VirtualHost>
<VirtualHost*:80>
ServerAdminwebmaster@dummy-host2.example.com
DocumentRoot"E:/wamp/www"
ServerNamelocalhost
ErrorLog"logs/dummy-host2.example.com-error.log"
CustomLog"logs/dummy-host2.example.com-access.log"common
</VirtualHost>
<VirtualHost*:8888>
ServerAdminprograms@dummy-host2.example.com
DocumentRoot"E:/wamp/www/programs"
ServerNamelocalhost
ErrorLog"logs/programs-host2.example.com-error.log"
CustomLog"logs/programs-host2.example.com-access.log"common
</VirtualHost>
<VirtualHost*:8999>
ServerAdminprograms@dummy-host2.example.com
DocumentRoot"E:/wamp/www/site"
ServerNamelocalhost
ErrorLog"logs/programs-host2.example.com-error.log"
CustomLog"logs/programs-host2.example.com-access.log"common
</VirtualHost>
<VirtualHost*:1818>
ServerAdminwebapp@dummy-host2.example.com
DocumentRoot"E:/wamp/www/webapp"
ServerNamea.test.com
ErrorLog"logs/webapp-host2.example.com-error.log"
CustomLog"logs/webapp-host2.example.com-access.log"common
</VirtualHost>
其中a.test.com若要生效還需要在本地host文件中增加映射關系：127.0.0.1 a.test.com
然后我們測試一下，在瀏覽器輸入你配置的主機名和端口號，url指向你要打開的文件。
若出現上述提示，檢查你的虛擬主機目錄是否正確。如果目錄設置正確，即可打開頁面。
一般情況下目錄訪問權限默認為：
[plain]view plaincopy
#
#First,weconfigurethe"default"tobeaveryrestrictivesetof
#features.
#
<Directory/>
OptionsFollowSymLinks
AllowOverrideAll
Orderdeny,allow
Denyfromall
</Directory>
許多人為了方便直接設置為
[plain]view plaincopy
#
#First,weconfigurethe"default"tobeaveryrestrictivesetof
#features.
#
<Directory/>
OptionsFollowSymLinks
AllowOverrideAll
Orderallow,deny
Allowfromall
</Directory>
出于安全考慮，根據調試的人員和實際需要，我個人傾向于為特定目錄設置不同的權限，示例如下：
[plain]view plaincopy
#
#First,weconfigurethe"default"tobeaveryrestrictivesetof
#features.
#
<Directory/>
OptionsFollowSymLinks
AllowOverrideAll
Orderdeny,allow
Denyfromall
</Directory>
<Directory"E:/wamp/www/webapp">
OptionsFollowSymLinks
AllowOverrideAll
Orderdeny,allow
Denyfromall
Allowfrom192.8
</Directory>
<Directory"E:/wamp/www/programs">
Options-IndexesFollowSymLinks
AllowOverrideAll
Orderdeny,allow
Denyfromall
Allowfrom192.8.102.192.8.104.192.8.22.
</Directory>
設置完成后重啟Apache服務生效。
安全是安全了，不過有一個問題，訪問localhost下的頁面會出現這樣的情形：
其實我們再增加一句 Allow from127.0.0.1 ::1 localhost 即可解決此問題。如下：
[plain]view plaincopy
<Directory"E:/wamp/www/programs">
Options-IndexesFollowSymLinks
AllowOverrideAll
Orderdeny,allow
Denyfromall
Allowfrom192.8.102.192.8.104.192.8.22.
Allowfrom127.0.0.1::1localhost
</Directory>
重啟再試，頁面正常顯示出來了。如下圖：
現在搭建好了本地服務器，開啟了若干監聽端口，進入正題，接著說端口轉發。
要使用端口轉發（Port forwarding）功能，需要滿足以下條件：
1.在開發機器的Chrome瀏覽器打開chrome://inspect
2.點擊PortForwarding，彈出設置窗口
3.在設備端口輸入框，填寫移動設備要監聽的端口號（默認為8080）
4.在Host主機輸入域，填寫運行web應用的當前ip地址（或主機名稱，如localhost）加端口號。IP地址可以填寫開發機器可訪問的任何本地地址。當前，端口號范圍必須在1024~65535之間（包括）
5.選中Enableport forwarding.
6.點擊Done完成。
當chrome://inspect窗口的端口號閃動為綠色時，表明該端口轉發配置已生效。此時你可以在移動設備上打開本地頁面進行調試了。
在Chrome29之前端口轉發功能有限，如果遇到問題，請確保你的Chrome版本升級到29以上再使用。在Chrome31+端口轉發已經不是試驗性功能了，而是正式發布的功能了。
前面我們已經搭建好本地服務器環境。接上USB線，打開chrome://inspect/#devices，根據Apache所設的監聽端口，設置相應DevTools的端口轉發參數，如下圖：
完成了端口轉發的設置后，這時候我們就可以進行調試本地環境下的頁面了。
輸入url，打開本地的頁面。
例如
http://localhost:1818/taskmarket/index.html
http://localhost:8888/christmas/index.html
如下圖所示：
虛擬主機映射（Virtual hostmapping）
當你在localhost域名（或你的本地開發機器IP）下調試，端口轉發很靈驗。不過，如果你要使用自己定制的本地域名來調試那就不管用了。
如果你在使用一個僅能運行于特定白名單中的域名下的JavaScriptSDK，因此你在host文件中設置了如127.0.0.1 xxx.com這樣的對應關系。或許你在Web服務器（MAMP，wamp，xampp等）用虛擬主機配置了個性的域名。
若是想讓移動設備顯示特定域名下頁面內容，你需要使用上述的端口轉發技術和代理服務器技術來實現。代理服務器可以將移動設備上的請求映射到主機的正確位置。
搭建代理
目前有許多搭建代理服務器的工具，比如Mac上的Charles Proxy，在Windows系統下的Fiddler，Linux下的Squid cache，Squid作為一款開源的代理服務軟件，也可以用作Web緩存服務器，實現高速的Web訪問需求。主機上安裝運行代理服務器，所有來自安卓移動設備的請求都將會轉發到代理服務器。
代理服務的搭建方法這里不細說看，感興趣的可以參考我的文章或自行查找。
端口轉發代理設置的步驟：
1. 安裝代理服務軟件，在主機上搭建代理服務器。
2. 開啟代理服務，并確保代理服務器運行的端口與Chrome端口轉發所設端口不相同。
3. Chrome瀏覽器打開“檢查設備”chrome://inspect
4. 點擊Port forwarding 彈出設置窗口。
5. 設備端口處填上安卓設備要監聽的端口，如9000。
6. 主機IP處可以填寫localhost:xxxx，比如localhost:9000，也可以填寫我上面配置過的本地域名a.test.com:1818
7. 勾選Enableport forwarding
8. 點擊Done按鈕完成參數配置。
移動設備代理服務參數設置：
1. 打開設置-WLAN（Settings> Wi-Fi）
2. 長按當前連接的無線網絡（代理服務設置適用于每個無線網絡）
3. 點擊修改網絡（Modify network）
4. 勾選高級選項（Advanced options），將顯示設置項：
5. 點擊“代理”（Proxy）菜單選擇“手動”（Manual）
6. 在“代理服務器主機名”（Proxyhostname）處輸入localhost或者127.0.0.1
7. 在“代理服務器端口”（Proxy port）處輸入端口號，如9000
8. 點擊保存（Save）。
通過以上參數設置，移動設備上所有請求被轉發到主機的代理服務器，代理服務器代表安卓移動設備來發送請求，使得發送到特定域名下的請求得到了合理的解析。現在你可以調試特定域名下的頁面了。
注意：為了不影響移動設備正常上網瀏覽，斷開USB數據線后一定要恢復代理設置。
Fiddler默認使用8888端口，我的本地服務器已經占用8888端口，所以在Fiddler-Tools菜單中將監聽端口設為未使用的10000端口，如圖：
手機端代理設置參數完畢后，打開ChromeDevTools進行調試。點擊inspect可以看到頁面顯示在手機瀏覽器了，現在開始調試吧。
我的測試頁面為http://a.test.com:1818/taskmarket/index.html
DevTools實例的調試截圖如下：
手機端Chrome for Android中的實時截圖如下：
注意主機要和移動設備處在同一網段的局域網內。
有問題的童鞋可以留言或查看我博客的其他相關文章。 Chrome遠程調試部分就到這里了。移動端的調試還沒有結束，下一節我會介紹Weinre遠程調試的技巧和詳細教程。
轉載請注明出處： freshlover的CSDN專欄文章《移動端Web開發調試之Chrome遠程調試(Remote Debugging)》http://blog.csdn.NET/freshlover/article/details/42528643
參考文章：Remote Debugging on Androidwith Chromehttps://developer.chrome.com/devtools/docs/remote-debugging
總結
以上是生活随笔為你收集整理的移动端Web开发调试之Chrome远程调试(Remote Debugging)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 双十一购物退款了信用卡怎么还？可以少还吗
- 下一篇： barefoot公司和Tofino芯片