移動端Web開發調試之Chrome遠程調試(Remote Debugging)

在智能手機還未普及時，移動設備的調試處處是alert的，這估計是最常用的辦法了。以前很多時候爲了預覽頁面在移動設備上的效果，需要先將頁面上傳到測試服務器，再將url輸入到設備瀏覽器，或者使用第三方二維碼掃碼應用，通過移動設備訪問打開瀏覽實際效果，每次換設備都要重複這些操作，頁面多的話這些繁瑣的事情就特別讓人厭煩了。移動互聯網的浪潮，伴隨着智能硬件的興起與移動設備的普及，讓前端工程師這個職業變得更爲專業，前端工程師要做的工作也越來越多，尤其是國內大大小小衆多的手機廠商的興起、手機型號的繁多，僅僅依靠Firebug與Chrome/Safari自帶的debug工具已經遠遠難以滿足需求了。繁瑣重複性勞動佔用了相當的時間，慶幸的是前端的自動化工具也越來越多。越來越多的便捷調試工具無非是前端工程師的一大福音。

近幾年，瀏覽器廠商也紛紛推出自己的遠程調試(RemoteDebugging)工具，比如Opera Mobile 可以藉助其推出的跨設備跨平臺桌面開發者工具Opera Dragonfly 實現遠程調試，iOS Safari 可以開啓Web檢查器在 Mac OS X系統中實現遠程調試。Android 4+已上系統的 Chrome for Android可以配合 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中的Inspect Element 選中目標元素，可以實時與移動設備頁面交互，方便的定位問題所在，進行代碼調試。

在輸入框中輸入一個新的網址，點擊Opoen可打開你想要調試的新頁面。

說明：由於Chrome版本不同，DevTools也可能有些差別，比如我的Chrome38.0.2125.104 m版竟然沒有打開新頁面的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，如下：

  if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {

     WebView.setWebContentsDebuggingEnabled(true);

  }

以上配置方法適用於安卓應用內所有的WebView情形。

安卓WebView是否可調試並不取決於應用中manifest的標誌變量debuggable，如果你想只在debuggable爲true時候允許WebView遠程調試，請使用以下代碼段：

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菜單旁邊會出現一個灰色的Android啓動圖標。

點擊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增加監聽多個端口。

# Listen: Allows you to bindApache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 80
Listen 8888

Listen 8999
Listen 1818

開啓Apache服務後可通過命令netstat –n –a查看所配置的端口是否開啓。

如果你本地環境也開啓了IIS服務，爲了避免二者都是用80端口發生衝突，可以按照上述方法修改Apache的默認端口。修改設置完成後別忘了重啓Apache服務。

如何改變IIS端口：若保留Apache服務與IIS服務同時運行，不想改變Apache默認80端口，那麼只能改變IIS端口，方法如下：開始->運行->輸入:inetmgr->Internet信息服務->本地計算機->網站->右鍵“默認網站”->屬性->選擇“網站”標籤->修改TCP端口即可。最後重新啓動IIS服務。

2. 在httpd.conf文件中開啓虛擬主機配置

# Virtual hosts

#Includeconf/extra/httpd-vhosts.conf

將第二行前的#號去掉，即是爲了允許加載擴展配置。

1. Apache服務器默認的路徑爲安裝目錄下的htdocs，如果想改變默認目錄，可以修改httpd.conf文件下的DocumentRoot和Directory，修改兩者路徑到你指定的目錄即可。

#

# DocumentRoot: The directoryout of which you will serve your

# documents. By default, allrequests are taken from this directory, but

# symbolic links and aliasesmay be used to point to other locations.

#

DocumentRoot "E:/wamp/www/"

 

#

# This should be changed towhatever you set DocumentRoot to.

#

<Directory "E:/wamp/www/">

打開extra目錄下的httpd-vhosts.conf配置文件，在文件最後位置分別爲監聽的端口設置虛擬主機目錄

#

# Use name-based virtual hosting.

#

NameVirtualHost *:80

 

#

# VirtualHost example:

# Almost any Apache directive may go into a VirtualHostcontainer.

# The first VirtualHost section is used for all requests that donot

# match a ServerName or ServerAlias in any <VirtualHost>block.

#

<VirtualHost *:80>

    [email protected]

    DocumentRoot "E:/wamp/www /dummy-host.example.com"

    ServerName dummy-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>

    [email protected]

    DocumentRoot"E:/wamp/www"

    ServerName localhost

    ErrorLog"logs/dummy-host2.example.com-error.log"

    CustomLog"logs/dummy-host2.example.com-access.log" common

</VirtualHost>

 

<VirtualHost *:8888>

    [email protected]

    DocumentRoot"E:/wamp/www/programs"

    ServerName localhost

    ErrorLog"logs/programs-host2.example.com-error.log"

    CustomLog"logs/programs-host2.example.com-access.log" common

</VirtualHost>

 

<VirtualHost *:8999>

    [email protected]

    DocumentRoot"E:/wamp/www/site"

    ServerName localhost

    ErrorLog"logs/programs-host2.example.com-error.log"

    CustomLog"logs/programs-host2.example.com-access.log" common

</VirtualHost>

 

<VirtualHost *:1818>

    ServerAdmin [email protected]

    DocumentRoot"E:/wamp/www/webapp"

    ServerName a.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指向你要打開的文件。

若出現上述提示，檢查你的虛擬主機目錄是否正確。如果目錄設置正確，即可打開頁面。

一般情況下目錄訪問權限默認爲：

#

# First, we configure the"default" to be a very restrictive set of

# features. 

#

<Directory />

    Options FollowSymLinks

    AllowOverride All

    Order deny,allow

    Deny from all

</Directory>

許多人爲了方便直接設置爲

#

# First, we configure the"default" to be a very restrictive set of

# features. 

#

<Directory />

    Options FollowSymLinks

    AllowOverride All

    Order allow ,deny

    Allow from all

</Directory>

出於安全考慮，根據調試的人員和實際需要，我個人傾向於爲特定目錄設置不同的權限，示例如下：

#

# First, we configure the"default" to be a very restrictive set of

# features. 

#

<Directory />

    Options FollowSymLinks

    AllowOverride All

    Order deny,allow

    Deny from all

</Directory>

 

<Directory "E:/wamp/www/webapp">

    Options FollowSymLinks

    AllowOverride All

    Order deny,allow

    Deny from all

    Allow from 192.8

</Directory>

 

<Directory "E:/wamp/www/programs">

    Options -Indexes FollowSymLinks

    AllowOverride All

    Order deny,allow

    Deny from all

    Allow from 192.8.102. 192.8.104. 192.8.22.

</Directory>

設置完成後重啓Apache服務生效。

安全是安全了，不過有一個問題，訪問localhost下的頁面會出現這樣的情形：

其實我們再增加一句 Allow from127.0.0.1 ::1 localhost 即可解決此問題。如下：

<Directory "E:/wamp/www/programs">

    Options -Indexes FollowSymLinks

    AllowOverride All

    Order deny,allow

    Deny from all

    Allow from 192.8.102. 192.8.104. 192.8.22.

    Allow from 127.0.0.1 ::1 localhost

</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按鈕完成參數配置。