在智能手機還未普及時，移動設備的調試處處是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後恢復正常，知道原因的歡迎留言。
DevTools窗口使用F5快捷鍵（CMD+R for Mac）重新加載頁面
使用Network面板可以實時觀察頁面在手機實際網絡環境中資源的加載情況。
Timeline面板可以用來分析頁面渲染和CPU使用情況，通常情況下移動設備的性能會比電腦上要低一些。
在DevTools的Console控制檯中編寫腳本執行，會同步表現在移動設備中檢查的頁面。
如果要調試本地搭建的服務器程序，需要用到端口轉發和虛擬主機映射，以使設備上可以呈現你本地環境下的頁面內容。
調試WebView需要滿足安卓系統版本爲Android 4.4+已上。並且需要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，如下：
[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
以上配置方法適用於安卓應用內所有的WebView情形。
安卓WebView是否可調試並不取決於應用中manifest的標誌變量debuggable，如果你想只在debuggable爲true時候允許WebView遠程調試，請使用以下代碼段：
[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
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的一些設置。
- 打開Apache安裝目錄下的配置文件httpd.conf增加監聽多個端口。
[plain] view plain copy 在CODE上查看代碼片派生到我的代碼片
Listen: Allows you to bindApache to specific IP addresses and/or
ports, instead of the default. See also the
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服務。
- 在httpd.conf文件中開啓虛擬主機配置
[plain] view plain copy 在CODE上查看代碼片派生到我的代碼片
Virtual hosts
Includeconf/extra/httpd-vhosts.conf
將第二行前的#號去掉，即是爲了允許加載擴展配置。
- Apache服務器默認的路徑爲安裝目錄下的htdocs，如果想改變默認目錄，可以修改httpd.conf文件下的DocumentRoot和Directory，修改兩者路徑到你指定的目錄即可。
[plain] view plain copy 在CODE上查看代碼片派生到我的代碼片
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.
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 block.
First, we configure the”default” to be a very restrictive set of
features.
Options FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all
許多人爲了方便直接設置爲
[plain] view plain copy 在CODE上查看代碼片派生到我的代碼片
First, we configure the”default” to be a very restrictive set of
features.
Options FollowSymLinks
AllowOverride All
Order allow ,deny
Allow from all
出於安全考慮，根據調試的人員和實際需要，我個人傾向於爲特定目錄設置不同的權限，示例如下：
[plain] view plain copy 在CODE上查看代碼片派生到我的代碼片
First, we configure the”default” to be a very restrictive set of
features.
Options FollowSymLinks
AllowOverride All
Order deny,allow
Deny from all