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