本篇主要说一下Chrome RemoteDebugging 的方法，之前也遇到一些坑，自己总结了一些经验，分享如下。
Chrome DevTools调试移动设备Brower Page Tabs/WebViews
安卓远程调试目前支持所有操作系统（Windows,Mac, Linux, and Chrome OS.）中调试，支持：
● 调试站点的页面
● 调试安卓原生App中的WebView
● 实时将安卓设备的屏幕图像同步显示到开发机器。
● 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。
调试要求：
● 开发环境安卓桌面版Chrome32+
● 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动。驱动程序下载地址：
&& 如果电脑上安装有百度手机助手、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.&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的手机操作系统，于北京时间日凌晨对外公布了该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窗口一片空白，且刷新无效时，那极有可能是由于被墙的缘故，你可以尝试是否可以ping的通，如果无法ping通，那你现在就先FQ吧（goagent 或红杏都不错，将加入白名单），当然你还需要有google账户。
补充说明一下，如果接上USB数据线后，没有显示任何连接的设备，请按照以下步骤排查：
● 检查您的设备连接到USB，检查USB数据线。
● 确保您的设备发出ADB设备命令列为可用。如果没有，检查是否有您的设备上是否启用USB调试。
● 若是Windows系统，检查你的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&&&
&&&&ServerAdminwebmaster@dummy-&&
&&&&DocumentRoot&"E:/wamp/www&/dummy-"&&
&&&&ServerName&dummy-&&
&&&&ServerAliaswww.dummy-&&
&&&&ErrorLog"logs/dummy--error.log"&&
&&&&CustomLog"logs/dummy--access.log"&common&&
&/VirtualHost&&&
&VirtualHost&*:80&&&
&&&&ServerAdminwebmaster@dummy-&&
&&&&DocumentRoot"E:/wamp/www"&&
&&&&ServerName&localhost&&
&&&&ErrorLog"logs/dummy--error.log"&&
&&&&CustomLog"logs/dummy--access.log"&common&&
&/VirtualHost&&&
&VirtualHost&*:8888&&&
&&&&ServerAdminprograms@dummy-&&
&&&&DocumentRoot"E:/wamp/www/programs"&&
&&&&ServerName&localhost&&
&&&&ErrorLog"logs/programs--error.log"&&
&&&&CustomLog"logs/programs--access.log"&common&&
&/VirtualHost&&&
&VirtualHost&*:8999&&&
&&&&ServerAdminprograms@dummy-&&
&&&&DocumentRoot"E:/wamp/www/site"&&
&&&&ServerName&localhost&&
&&&&ErrorLog"logs/programs--error.log"&&
&&&&CustomLog"logs/programs--access.log"&common&&
&/VirtualHost&&&
&VirtualHost&*:1818&&&
&&&&ServerAdmin&webapp@dummy-&&
&&&&DocumentRoot"E:/wamp/www/webapp"&&
&&&&ServerName&&&
&&&&ErrorLog"logs/webapp--error.log"&&
&&&&CustomLog"logs/webapp--access.log"&common&&
&/VirtualHost&&&
其中若要生效还需要在本地host文件中增加映射关系：127.0.0.1
然后我们测试一下，在浏览器输入你配置的主机名和端口号，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地址可以填写开发机器可访问的任何本地地址。当前，端口号范围必须在之间（包括）
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.这样的对应关系。或许你在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，也可以填写我上面配置过的本地域名: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专栏文章《)》http://blog.csdn.net/freshlover/article/details/&
参考文章：/devtools/docs/remote-debugging
阅读(...) 评论()输入关键字或相关内容进行搜索
HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。webkit remote debug其实是google、apple官方提供的服务，本文主要介绍google的chrome下如何调试Android手机上webview里运行的网页。
系列文章目录导航：
- [调试方式介绍三 webkit remote debug之Chrome调试Android手机]
- Chrome调试Android手机之概述\n调试是软件开发过程中很重要的环节，它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。对于移动平台的开发者来说，从Android4.4开始，也可以通过Chrome的DevTools工具连接设备对于应用进行调试。调试效果如图所示：
- Android设备或模拟器的系统版本为4.4及以上；
- PC机器上Chrome版本为30及以上。真机调试环境\n如果你有Android设备，并且系统是4.4以上版本，那么可以直接使用Chrome连接进行调试。检测设备版本\n打开系统“设置”-& “关于”，查看Android版本：
Android版本必需是4.4及以上，否则无法进行应用调试。请参考“模拟器调试环境”章节使用模拟器进行应用调试。显示开发者选项\nAndroid设备默认“开发者选项”是隐藏的，需要打开“设置”-& “关于”页面，多次（7次）点击“版本号”项，返回到“设置”页面可显示“开发者选项”：
点击“开发者选项”，打开“开发者选项”设置页面。开启USB调试\n连接PC\nAndroid设备通过USB数据线连接到PC，如果系统无法正确识别，则需要安装驱动，通常可到设备制造商的官方网站下载安装。也可使用第三方手机助手软件安装，如“360手机助手”、“应用宝”等。PC识别到设备后，这时可通过HBuilder的真机运行功能进行连接并安装HBuilder应用。
如果使用真机，则跳过下面的安装模拟器环境，直接看后面“”章节。
如果没有Android4.4或以上的手机，可参考下面的章节安装配置模拟器。Android模拟器调试环境\nAndroid模拟器一般使用Google官方的模拟器。
如果觉得慢，三方模拟器里genymotion也有较多人使用。
下文仅介绍Google官方模拟器的用法。如果没有Android4.4及以上版本设备，可以配置Android模拟器来调试。Android模拟器一直都以运行速度慢著称，其实官方已经提供解决方案使用Intel HAXM技术来加速，使得模拟器运行速度有大幅的提升。
CPU支持Intel VT技术（AMD CPU无法使用HAXM加速）；
内存推荐4G；
Window XP/Vista/7/8（32/64-bit），推荐Windows 7/8（64-bit）。
\n网络要求
使用Google的服务，不得不付出的代价就是要准备好翻墙工具。
模拟器安装更新和调试初始化时都必须翻墙。
无条件翻墙的同学可以尝试修改本机host的方法来访问Google相关服务，host内容参考，注意及时更新：）ADT工具\n配置模拟器调试环境需要安装ADT工具，如果已经配置过android开发环境，则可跳过此章节。下载ADT工具Android模拟器开发环境需通过ADT工具进行安装，这里不需要下载完整的ADT Bundle，使用独立ADT工具即可：
- 进入官网下载Android SDK Tools
选择windows平台下的独立ADT插件安装包。
同意使用条款和条件
点击下载按钮。
保存安装包
目前版本为22.6.2，保存到本地为：installer_r22.6.2-windows.exe。
\n安装ADT工具
- 双击运行保存的ADT安装文件（install_r22.6.2-windows.exe），开始安装
选择下一步“Next”。
配置JDK环境
如果已经安装了JDK环境，则提示确认：
直接选择下一步“Next”。
如果没有安装过JDK，则会提示没有找到：
需安装JDK，并设置JAVA_HOME环境变量，完成后重新运行ADT安装文件。
选择默认值，仅当前用户使用即可，选择下一步“Next”。
选择安装目录
选择非系统盘目录（如“D:\AndroidSDK”），确保有足够的磁盘空间安装SDK及模拟器文件（至少需要1G的空间）。选择下一步“Next”。
选择开始菜单目录
保持默认值，选择下一步“Next”。
完成后，选择下一步“Next”：
选择立即启动SDK管理器（Android SDK Manager），选择下一步“Next”，完成ADT工具的安装。
如未立即启动，可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“SDK Manager.exe”程序。
\n下载SDK和模拟器\n安装ADT工具后，启动SDK管理程序对各版本编译工具、SDK、模拟器、插件进行管理，如升级、安装、卸载等。如果已经下载了SDK和模拟器，可跳过此章节。
- 更新SDK列表
启动SDK管理程序后会自动获取最新的工具、SDK、模拟器及扩展插件列表。
列表更新完成
更新完成后，显示日志：
选择下载项
使用Intel HAXM加速模拟器，必须选择以下项下载：
Android SDK Platform-tools
Android平台工具，基础组件
Android 4.4.2（API19）
SDK Platform
Android4.4.2 SDK，模拟器基础组件
Android 4.4.2（API19）
Intel x86 Atom System Image
Inter x86平台的Android4.4.2模拟器镜像文件
Intel x86 Emulator Accelerator (HAXM installer)
Inter x86平台Android模拟器硬件加速程序
选择好下载项后，如下图所示：
选择“Intall 4 Packages...”，开始下载安装。\n
接受许可协议
分别选择右侧packages列表中的项后，选中“Accept License”接受许可协议。然后点击“Install”，开始下载。
由于SDK和模拟器镜像文件比较大，下载时间会比较长，而且国内访问google官方网站不太稳定，经常提示下载失败：
关闭提示对话框，重新下载，或者翻墙后再尝试下载。
\n安装Intel X86HAXM\n下载Intel X86 HAXM插件后，需要到下载目录运行安装程序进行安装，目录为： “%ADT安装目录%\extras\intel\Hardware_Accelerated_Execution_Manager\”。双击运行intelhaxm.exe进行安装，目前新版本为1.0.8，如果已经安装过低版本，建议升级。
选择下一步“Next”。
配置HAXM使用最大内存
安装程序会自动计算推荐值，使用默认值，选择下一步“Next”。
选择下一步“Next”。
\n创建模拟器\nADT工具带Android模拟器管理程序（Android Virtual Device Manager），可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“AVD Manager.exe”程序。
由于没有创建过模拟器，在列表中显示无可用模拟器，点击“New...”开始新建模拟器。
新建模拟器
模拟器名称，根据爱好输入
模拟设备，根据爱好选择，建议根据显示器分辨率来选择，大显示器选择则高分比率模拟器
选择“Android 4.4.2 - API Level 19”
选择“Intel Atom (x86)”
模拟器皮肤，根据爱好选择，推荐选择WVGA800
Front Camera
前置摄像头，用不到就选“None”，模拟摄像头就选“Emulated”，使用PC的摄像头就选“WebCam0”
Back Camera
后置摄像头，与前置摄像头选择类似
Memory Options
内存大小，根据PC内存大小设置，推荐RAM：512；Heap：64
Internal Storage
内部存储器大小，根据PC系统盘空间大小设置，推荐200M
SD卡存储器大小，根据PC系统盘空间大小设置，推荐200M
注意务必设置好SD Card，否则无法真机运行。
设置完成后，点击“OK”。\n
创建完成后在模拟器列表中显示
\n启动模拟器\n创建完模拟器，每次启动Android模拟器管理程序都能在列表中显示：
启动模拟器
选择“Android4.4.2”模拟器，点击“Start...”启动。
设置启动配置信息
Scale Display to real size
是否缩放到设置的模拟器分辨率，在PC分辨率低时使用
Wipe user data
是否擦除用户数据，重置模拟器时使用
点击“Launch”启动。\n
等待加载模拟器
PC的配置决定速度，耐心等待模拟器的启动。
完成启动模拟器
模拟器配置完毕，这时可通过HBuilder的真机运行功能进行连接，参考后面“应用调试”章节。
\n应用调试（Chrome）\n配置完模拟器或真机调试环境后，可通过Chrome的DevTools工具快速调试HBuilder开发的移动应用。安装HBuilder应用\n启动HBuilder后会自动检测连接到PC上的设备（模拟器或真机），创建“移动App”后，可通过以下方式在设备上安装HBuilder应用进行调试：
运行的快捷键是Ctrl+R。也可以通过鼠标操作（注意下图中run in device的按钮在新版中已经不存在了，只需点击手机即可）
- 通过“运行”菜单启动
通过工具栏启动
设备上安装完HBuilder应用后，会同步应用资源并自动运行。
应用启动后则可通过Chrome的DevTools工具连接进行调试。
\n使用Chrome调试\n检测Chrome版本号
Chrome 30及以上版本才支持Android设备调试，打开Chrome的关于页面查看：
要求最低Chrome30以上版本，如果版本太低则需更新版本，推荐使用最新版本。打开设备检查页面
在Chrome地址栏，输入“chrome://inspect”或通过“菜单”-&“工具”-&“检查设备”打开设备检查页面：
DevTools工具会自动检测已连接设备运行的可调试页面列表，点击对应页面的“inspect”链接打开调试页面。
如果上图界面没有显示可调试的手机，请重新根据上文提到的方法检查手机的usb调试模式或驱动安装情况。同时注意Android4.4以下的手机无法调试，注意海马玩等模拟器无法调试。
如果上图界面有手机，但没有可调试的app，可能的原因如下：
1. 手机端需要调试的HBuilder基座或其他app并没有启动或没有运行任何html页面；
2. 要调试的app拒绝了调试请求。HBuilder调试基座是默认开放调试请求的，但云打包或本地打包的app默认是关闭调试请求的。云打包是在manifest里配置是否允许调试，具体请查询，本地打包也要配置debug=&true&，具体需要看本地打包配置环境。点击&inspect&时，如果遇到启动了一个白屏界面，说明被墙了。因为此服务需要连接google的服务器
一般情况下，只在第一次使用&inspect&时需要翻墙，以后会缓存在本地。
开发者可以使用三方翻墙服务，但注意并不是可以访问就可以使用chrome调试，有些翻墙软件支持的dns并不全。关键是要ping通（此url可能随google调整服务而变化）。其实更简单易行的方法是修改本机host。这里提供一些host清单。，注意及时更新。于日亲测可行，注意此host文件涉及的国外域名很多，不需要的dns解析可以删除）
注意host文件修改在window下需要管理员权限，具体方法本文不讲述请自行百度。页面调试
打开调试页面后DevTools会自动加载相关资源，调试页面操作方式与普通html调试页面完全一致。
- 在Elements下查看DOM结构
选中DOM元素后，在设备上会高亮显示，右侧Styles下修改CSS属性可即时生效：
在Sources下断点调试JavaScript
按F5可重新加载页面，重新开始调试。
通过“菜单”-&“工具”-&“检查设备”打开设备检查页面，只显示了设备名称，却没有inspect按钮，要怎么办
这种情况有两个可能：
1. 手机设备Android系统不是4.4以上版本；
2. 手机设备没有开启USB调试。
chrome 调试真机，inspect后，弹出的页面显示空白，看不到DOM树，用虚拟机的话可以。
解决了，翻墙就可以
刚试了下，很好，试调起来方便多了
如果在苹果机上面怎样去调试
x86的模拟器调试不了，控制台说安装完成，其实里面没有，为什么？
如果有webView， 怎么配置，才能在chrome dev里面调试？
是哪个翻墙 pc还是安卓
pc已经翻墙了，安卓也是4.4.2的，也开启了usb调试。
但是chrome只显示了手机名称 H60-L11#DU2TDM152R020599。
这个怎么破
使用HBuilder的真机运行，不能使用提交到App云端打包。
hbuild怎么才能和genymotion 连起来 调试？要怎么配置啊？ Mac下。。多谢
chrome只显示了手机名称
却没有inspect按钮，要怎么破？求指教求指教求指教求指教求指教求指教求指教求指教
3q 已经可以测试了
确认android版本是否为4.4及以上版本？
谷歌怎么翻墙？
ChromeGAE2.4 这个软件可以，很好用
Chrome的DevTools工具去哪里下载呀
能不能把hbuilder做的跟visual studio一样有自带的debug的功能，不要非装Chrome的DevTools这个工具才能debug
虚拟机调试：同步失败,失败原因:failed to copy ，Read-only file system
是什么原因啊
这个写得真好，第一次点击inspect时，需要翻墙，这个很重要，需要突出一下，我点inspect后一直是白屏，后来仔细阅读了这篇文章后才知道，但是不够突出
题主，早上好，我用chrome 调试android 应用程序中的本地html时，多次点击inspect 会出现一闪而过的白色窗口，多次点击后会出现 Cannot load DevTools frontend from an untrusted origin?remoteFrontend=true&dockSide=undocked&toolbarColor=rgba(223,223,223,1)&textColor=rgba(0,0,0,1)
这样的提示，调试 手机上的chrome 就没有问题，想问一下题主，你知道这个问题怎么解决么！！ 谢谢！！
调试很有必要，试了很久才成功，发现文章中是不是漏了一点。
代码中要加上这句
WebView.setWebContentsDebuggingEnabled(true);
否则chrome上看不到要调试的页面
应该是插件模式开发的才需要加这个。
我也加了这个，但是还是出现 多次点击inspect 会出现一闪而过的白色窗口，多次点击后会出现 Cannot load DevTools frontend from an untrusted origin?remoteFrontend=true&dockSide=undocked&toolbarColor=rgba(223,223,223,1)&textColor=rgba(0,0,0,1) 这样的提示，调试 手机上的chrome 就没有问题。
我也是这样
嗯，最好可以有个genymotion的插件，这样好多啦，因为那个Android模拟器太慢啦。
为什么我一直还是白屏，已经翻墙，机器也是4.4.2，chrome最新，没有设置WebView.setWebContentsDebuggingEnabled(true);不知道在mui里怎么设置。
推荐使用正式Chrome版本（已知canary版本存在此问题）
目前只有真机运行才具备调试功能，提交App云端打包后默认会关闭调试功能
已经翻墙了，android 4.4.4,chrome版本 43.0.,手机开了USB调试，但是只显示了MI NOTE LTE
#310BA098，其他啥都没有，求解？
你用的啥翻墙软件？
刚测试了下，感觉真棒。终于能像调试网页一样调试了！
红杏 收费的 不过价格 很合理
为啥要用谷歌啊，国内限制谷歌这么死，不会翻墙怎么办？
请问是不是需要能够访问到这个网站
我翻墙能否访问 但是点击inspect 还是白屏 求帮忙
是因为DevTools无法从服务器加载相关的调试资源，需要翻墙才能下载???
问下，能说清楚，DevTools无法从服务器加载相关的调试资源？？ 到底是那些资源的，我好可以知道名字，一个个下载，我下载了一个浏览器，那个浏览器可以翻墙，可是GOOGLE本身的浏览器不能翻墙，我好知道确实那些资源，好单独找到下载。
解决了吗、我也是这个样子啊
通过“菜单”-&“工具”-&“检查设备”打开设备检查页面，只显示了设备名称，却没有inspect按钮，要怎么办
确认手机的Android版本是否大于等于4.4
翻墙要翻到什么程度啊？我现在google的所有网站都可以访问，但大开inspect还是空白，哪位大神知道答案？
这种调试方式还是很不方便。只能加载一个页面，比如子页面就是跟主页面分开调试的。对于devTools看来，两者没有任何关系。而且我这里子页面虽然能看到文件名，但内容一直也加载不上来。
可以用firefox调试吗，求解？
点击 inspect 弹出的页面里显示
404. That’s an error.
The requested URL /serve_rev/@169177/devtools.html was not found on this server. That’s all we know.
请问这个是服务器原因？
我的也是这个问题 你的怎么解决的？
感谢~~搞定!:-)
我之前点击inspect都是，弹出的框都是空白的，后来通过翻墙后解决了这个问题。
已经翻墙了 ，可以打开 为什么 inspect 之后 还是空白的啊
非常棒！！！
非常棒！！！
点inspect是空白，修改hosts没用啊
点inspect是空白，是不是要下载一些资源啊，有多大啊，翻墙后只有不到50k的速度，要下多久啊，有没有知道的朋友？？？？
特别为翻墙购买了一个商用vpn，但是点击inspect后仍然是空白。手机是红米note 1（android版本4.4.4），chrome 是40.0，HBuilder 是6.9.2，系统使用的是win10。接下来应该怎么弄呢。盼大神指点。
最新的SDK 要开启chrome调试需要 control.xml 里面需要添加 debug=&true& ， 找了两天！ 真是坑阿！
&hbuilder version=&1.9.9.22134& debug=&true&&
这么重要的说明都不写，谁猜得到？
文件在哪？找不到啊
知道真相的我眼泪掉下来。。。。不会翻墙怎么办。。。
android 5.0以上的 inspect一直是空界面 翻墙也没用 4.4的可以 要怎么弄？
chrom调试时设置断点有时候起作用，大部分时候无效，有朋友遇到吗？
请问，最后一句”按F5可重新加载页面，重新开始调试”，这句怎么按F5调试呢？我现在页面断点都打好了，调试就是不能进入？谢谢回复！
要用安卓4.1.1
说错了，是4.4以上版本
Lantern ，谷歌出的翻墙软件，一键翻墙，6到不行
安卓4.4.4，chrome 46版本 ，about:inspect只显示设备名 没有inspect按钮
手机上有没有启动HBuilder应用？
最新版本HBuilder.7.0.0.windows
1.创建一个APP工程 helloH5+
2.连接上真机，同时在手机上也能看到运行的例子程序
1.manifest.json 里面debug模式设置打钩
2.通过改写HOSTS文件，能够打开.hk，应该是翻墙了
3.在谷歌浏览器输入chrome://inspect/#devices 可以看到设备已经能够连接 点击inspect 一直是白屏 请问这样的原因是什么呢？
需要安装翻墙软件，主要是 这个无法ping通，点击inspect将一直是空白的，采用Lantern 这个确实可以进行翻墙，安装后杀毒的总是提示有风险都忽略了，最终实现翻墙。点击一次后显示，关闭翻墙软件后面就一直可以用了
多谢 ，启动hbuilder就可以了。
为什么我用的真机安卓5+版本,谷歌是50+的版本..里面的调试JS的Sources是空白的,什么文件都没有??
为什么我用的真机安卓5+版本,谷歌是50+的版本..里面的调试JS的Sources是空白的,什么文件都没有??
我用的是小米4 安卓6.0+ 以于电脑连接 可手机上打开HBuilder就是以空白页 为什么
调试能否不翻墙？
给个解决办法啦
按照文章里的步骤，手机打开h5页面后，chrome里面就会出现inspect了，
mac下怎么调试安卓啊....
要回复文章请先或