移動端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+
如果電腦上安裝有百度手機助手、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除錯。
● 桌面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，開啟本地的頁面。
例如
如下圖所示：
虛擬主機對映（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可以看到頁面顯示在手機瀏覽器了，現在開始除錯吧。
DevTools例項的除錯截圖如下：
手機端Chrome for Android中的實時截圖如下：
注意主機要和移動裝置處在同一網段的區域網內。
有問題的童鞋可以留言或檢視我部落格的其他相關文章。 Chrome遠端除錯部分就到這裡了。移動端的除錯還沒有結束，下一節我會介紹Weinre遠端除錯的技巧和詳細教程。
轉載請註明出處： freshlover的CSDN專欄文章《移動端Web開發除錯之Chrome遠端除錯(Remote Debugging)》http://blog.csdn.net/freshlover/article/details/42528643
參考文章：Remote Debugging on Androidwith Chrome https://developer.chrome.com/devtools/docs/remote-debugging