他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)我的谷歌浏览器手机端调试界面是白色_百度知道
我的谷歌浏览器手机端调试界面是白色
我看别人的电脑开启的手机端测试都是黑色的，怎么调
我有更好的答案
手机上有安全中心之类的软件？进去看看浏览器的权限，关于网络的都打开试试。
采纳率：86%
来自团队：
为您推荐：
其他类似问题
谷歌浏览器的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。输入关键字或相关内容进行搜索
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及以上；真机调试环境\n如果你有Android设备，并且系统是4.4以上版本，那么可以直接使用Chrome连接进行调试。检测设备版本\n打开系统“设置”-& “关于”，查看Android版本：
Android版本必需是4.4及以上，否则无法进行应用调试。请参考“模拟器调试环境”章节使用模拟器进行应用调试。显示开发者选项\nAndroid设备默认“开发者选项”是隐藏的，需要打开“设置”-& “关于”页面，多次（7次）点击“版本号”项，返回到“设置”页面可显示“开发者选项”：
点击“开发者选项”，打开“开发者选项”设置页面。开启USB调试\n连接PC\nAndroid设备通过USB数据线连接到PC，如果系统无法正确识别，则需要安装驱动，通常可到设备制造商的官方网站下载安装。也可使用第三方手机助手软件安装，如“360手机助手”、“应用宝”等。PC识别到设备后，这时可通过HBuilder的真机运行功能进行连接并安装HBuilder应用。使用HBuilder调试\n在HBuilder最新版里，点运行菜单，点里面的“打开Webview调试模式”。
如果手机连接正常，调试app处于启动状态，那么右侧会列出可调试的页面。点击调试即可打开chrome控制台进行调试。================================================正常情况下，开发者阅读到此结束。后续文档是Android模拟器的安装教程和不使用HBuilder调试而使用chrome调试的教程\n================================================附录：Android模拟器调试环境\n如果你没有Android手机，又想调试Android应用，那么你需要安装Google官方的Android模拟器。
注意三方模拟器如genymotion、海马玩、Bluestacks蓝叠等模拟器只能真机运行，不能debug调试。下文仅介绍Google官方模拟器的安装方法。由于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调试webview\n配置完模拟器或真机调试环境后，可通过Chrome的DevTools工具快速调试HBuilder开发的移动应用。安装HBuilder应用\n启动HBuilder后会自动检测连接到PC上的设备（模拟器或真机），创建“移动App”后，可通过以下方式在设备上安装HBuilder应用进行调试：
运行的快捷键是Ctrl+R。也可以通过鼠标操作（注意下图中run in device的按钮在新版中已经不存在了，只需点击手机即可）
- 通过“运行”菜单启动
通过工具栏启动
设备上安装完HBuilder应用后，会同步应用资源并自动运行。
应用启动后则可通过Chrome的DevTools工具连接进行调试。
\n使用Chrome调试\n我们推荐开发者直接使用HBuilder的调试，详见上文。这样可以免翻墙。
如果你不使用HBuilder的调试，而要自己使用chrome调试，可以看这里的教程，注意要翻墙。
检测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&时需要翻墙，以后会缓存在本地。
开发者可以使用三方翻墙服务，但注意并不是可以访问google.com就可以使用chrome调试，有些翻墙软件支持的dns并不全。关键是要ping通chrometophone.appspot.com（此url可能随google调整服务而变化）。还有一个简单易行的方法是修改本机host。这里提供一些host清单。，注意及时更新。于日亲测可行，注意此host文件涉及的国外域名很多，不需要的dns解析可以删除）
注意host文件修改在window下需要管理员权限，具体方法本文不讲述请自行百度。页面调试
打开调试页面后DevTools会自动加载相关资源，调试页面操作方式与普通html调试页面完全一致。
- 在Elements下查看DOM结构
选中DOM元素后，在设备上会高亮显示，右侧Styles下修改CSS属性可即时生效：
在Sources下断点调试JavaScript
按F5可重新加载页面，重新开始调试。
\n注意：每个Webview在chrome候选调试列表里是不同的列表，需要单独点inspect。当你inspect WebviewA时，点击了一个按钮，打开了WebviewB，此时若要调试B，需要返回chrome://inspect/#devices页面，找到WebviewB，然后点inspect。
模拟器的部分，没有链接，我去搜索的Android的官网，网站上面给的链接就是一个Android studio，参照教研，研究了好久，发现现在好像Android studio已经集成了sdk tools和模拟器等组件，跟这里的教程说的东西很不一样，也不知道是我找的官方网站不对还是怎么回事，反正到现在还没有会用，不知道怎么启动模拟器，请问能否更新一下教程？
这波广告可以的~
不翻墙的解决方法：http://www.cnblogs.com/slmk/p/7591126.html
从七月中旬开始做混合app，到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了，这期间遇到过无数的坑，主要是熟悉和使用mui框架，h5+，以及调用原生api等，入坑已深，现在正准备开发一款旅游类的混合app，原型图已经出。现在准备开工了。同时，希望有一起做混合app的，有兴趣加qq群一起讨论交流学习，爬坑，共同进步。
sdk和模拟器，我都不装，科学上网之后，地址栏输入&chrome://inspect& , 一样可以用真机调试。
有webview怎么调试？？？
我是通过修改host文件，翻的墙
请问要在哪里加呢？
你用啥插件或者软件翻墙的啊？有免费的吗？
求翻墙的host，连ADT都下载不了
给个地址各路大神。
控制台的Source是空白的问题解决了吗？
在host文件配置
61.91.161.217 chrometophone.appspot.com
离线打包，5+SDK，用chrome在线调试，在assets/data/control.xml，加入debug=&true&，修改如下：
&hbuilder version=&xxxxxxxxxxx& debug=&true&&
感谢 @PeterZhan 提供的信息。
5+SDK怎么用chrome进行在线调试。我修改了manifest.json：plus--&distribute--&&debug&:true，但仍然不能在chrome://inspect/#devices中找到我要调试的页面。
我也用Lanter翻墙了，为嘛点击inspect 一直是白屏 ，什么原因啊
哥们你太牛了，这个都能猜到？我整了半天了，本地打包的，PC上chrome就找不到。添加了这个就找到了
真机还需要设置manifest.json，居然都不说
mac下怎么调试安卓啊....
按照文章里的步骤，手机打开h5页面后，chrome里面就会出现inspect了，
调试能否不翻墙？
给个解决办法啦
我用的是小米4 安卓6.0+ 以于电脑连接 可手机上打开HBuilder就是以空白页 为什么
为什么我用的真机安卓5+版本,谷歌是50+的版本..里面的调试JS的Sources是空白的,什么文件都没有??
为什么我用的真机安卓5+版本,谷歌是50+的版本..里面的调试JS的Sources是空白的,什么文件都没有??
多谢 ，启动hbuilder就可以了。
需要安装翻墙软件，主要是appspot.com 这个无法ping通，点击inspect将一直是空白的，采用Lantern 这个确实可以进行翻墙，安装后杀毒的总是提示有风险都忽略了，最终实现翻墙。点击一次后显示，关闭翻墙软件后面就一直可以用了
最新版本HBuilder.7.0.0.windows
1.创建一个APP工程 helloH5+
2.连接上真机，同时在手机上也能看到运行的例子程序
1.manifest.json 里面debug模式设置打钩
2.通过改写HOSTS文件，能够打开google.com.hk，应该是翻墙了
3.在谷歌浏览器输入chrome://inspect/#devices 可以看到设备已经能够连接 点击inspect 一直是白屏 请问这样的原因是什么呢？
手机上有没有启动HBuilder应用？
安卓4.4.4，chrome 46版本 ，about:inspect只显示设备名 没有inspect按钮
Lantern ，谷歌出的翻墙软件，一键翻墙，6到不行
说错了，是4.4以上版本
要用安卓4.1.1
请问，最后一句”按F5可重新加载页面，重新开始调试”，这句怎么按F5调试呢？我现在页面断点都打好了，调试就是不能进入？谢谢回复！
chrom调试时设置断点有时候起作用，大部分时候无效，有朋友遇到吗？
android 5.0以上的 inspect一直是空界面 翻墙也没用 4.4的可以 要怎么弄？
知道真相的我眼泪掉下来。。。。不会翻墙怎么办。。。
文件在哪？找不到啊
最新的SDK 要开启chrome调试需要 control.xml 里面需要添加 debug=&true& ， 找了两天！ 真是坑阿！
&hbuilder version=&1.9.9.22134& debug=&true&&
这么重要的说明都不写，谁猜得到？
www.androiddevtools.cn
特别为翻墙购买了一个商用vpn，但是点击inspect后仍然是空白。手机是红米note 1（android版本4.4.4），chrome 是40.0，HBuilder 是6.9.2，系统使用的是win10。接下来应该怎么弄呢。盼大神指点。
点inspect是空白，是不是要下载一些资源啊，有多大啊，翻墙后只有不到50k的速度，要下多久啊，有没有知道的朋友？？？？
点inspect是空白，修改hosts没用啊
非常棒！！！
非常棒！！！
已经翻墙了 ，可以打开google.com 为什么 inspect 之后 还是空白的啊
我之前点击inspect都是，弹出的框都是空白的，后来通过翻墙后解决了这个问题。
感谢~~搞定!:-)
我的也是这个问题 你的怎么解决的？
点击 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.
请问这个是服务器原因？
可以用firefox调试吗，求解？
这种调试方式还是很不方便。只能加载一个页面，比如子页面就是跟主页面分开调试的。对于devTools看来，两者没有任何关系。而且我这里子页面虽然能看到文件名，但内容一直也加载不上来。
翻墙要翻到什么程度啊？我现在google的所有网站都可以访问，但大开inspect还是空白，哪位大神知道答案？
确认手机的Android版本是否大于等于4.4
通过“菜单”-&“工具”-&“检查设备”打开设备检查页面，只显示了设备名称，却没有inspect按钮，要怎么办
解决了吗、我也是这个样子啊
是因为DevTools无法从服务器加载相关的调试资源，需要翻墙才能下载???
问下，能说清楚，DevTools无法从服务器加载相关的调试资源？？ 到底是那些资源的，我好可以知道名字，一个个下载，我下载了一个浏览器，那个浏览器可以翻墙，可是GOOGLE本身的浏览器不能翻墙，我好知道确实那些资源，好单独找到下载。
我翻墙能否访问google.com 但是点击inspect 还是白屏 求帮忙
请问是不是需要能够访问到appspot.com这个网站
为啥要用谷歌啊，国内限制谷歌这么死，不会翻墙怎么办？
红杏 收费的 不过价格 很合理
刚测试了下，感觉真棒。终于能像调试网页一样调试了！
你用的啥翻墙软件？
已经翻墙了，android 4.4.4,chrome版本 43.0.,手机开了USB调试，但是只显示了MI NOTE LTE
#310BA098，其他啥都没有，求解？
推荐使用正式Chrome版本（已知canary版本存在此问题）
目前只有真机运行才具备调试功能，提交App云端打包后默认会关闭调试功能
为什么我一直还是白屏，已经翻墙，机器也是4.4.2，chrome最新，没有设置WebView.setWebContentsDebuggingEnabled(true);不知道在mui里怎么设置。
嗯，最好可以有个genymotion的插件，这样好多啦，因为那个Android模拟器太慢啦。
我也是这样
我也加了这个，但是还是出现 多次点击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上看不到要调试的页面
题主，早上好，我用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 就没有问题，想问一下题主，你知道这个问题怎么解决么！！ 谢谢！！
这个写得真好，第一次点击inspect时，需要翻墙，这个很重要，需要突出一下，我点inspect后一直是白屏，后来仔细阅读了这篇文章后才知道，但是不够突出
虚拟机调试：同步失败,失败原因:failed to copy ，Read-only file system
是什么原因啊
能不能把hbuilder做的跟visual studio一样有自带的debug的功能，不要非装Chrome的DevTools这个工具才能debug
Chrome的DevTools工具去哪里下载呀
ChromeGAE2.4 这个软件可以，很好用
谷歌怎么翻墙？
确认android版本是否为4.4及以上版本？
3q 已经可以测试了
chrome只显示了手机名称
却没有inspect按钮，要怎么破？求指教求指教求指教求指教求指教求指教求指教求指教
hbuild怎么才能和genymotion 连起来 调试？要怎么配置啊？ Mac下。。多谢
使用HBuilder的真机运行，不能使用提交到App云端打包。
pc已经翻墙了，安卓也是4.4.2的，也开启了usb调试。
但是chrome只显示了手机名称 H60-L11#DU2TDM152R020599。
这个怎么破
是哪个翻墙 pc还是安卓
如果有webView， 怎么配置，才能在chrome dev里面调试？
x86的模拟器调试不了，控制台说安装完成，其实里面没有，为什么？
如果在苹果机上面怎样去调试
刚试了下，很好，试调起来方便多了
解决了，翻墙就可以
chrome 调试真机，inspect后，弹出的页面显示空白，看不到DOM树，用虚拟机的话可以。
这种情况有两个可能：
1. 手机设备Android系统不是4.4以上版本；
2. 手机设备没有开启USB调试。
通过“菜单”-&“工具”-&“检查设备”打开设备检查页面，只显示了设备名称，却没有inspect按钮，要怎么办
要回复文章请先或
赞助DCloud可免广告，谷歌模块化手机进展神速 有9个不同模块可换|谷歌|Android|Ara_手机_新浪科技_新浪网
谷歌模块化手机进展神速 有9个不同模块可换
　　谷歌的Project
Ara手机模块化项目是在去年下半年曝光的，当时看好这一项目的人并不多，因为要像PC一样对手机的各主要硬件模块做可变更的设计并没有那么容易，而且在硬件设备集成化程度越来越高的今天，Ara从某个角度来看显得稍微有点反人类。另外，在谷歌将摩托罗拉移动售予联想之后，Project
Ara的进度更加受到人们的关注。
　　昨天Phonebolks积木手机团队发布了一则有关Ara项目的视频，Ara的进展速度似乎比我们预想得都还要更快。时代杂志先前报道称明年一季度就会有消费版本问世似乎确实有了眉目。
　　这则视频虽然并没有太多的信息含量，不过我们还是能从中一瞥类似处理器、摄像头一类模块的大概样貌。它们以真正像是积木的形式完成了模块化定制的目标，不同的硬件模块能够非常轻松地以磁力卡扣到手机框架中，模块的插拔通电管理则可以通过设备中的应用进行。
　　今年二月份时，时代杂志相对详细地对Project
Ara项目做了报道，报道中提及谷歌将推的这种模块化手机会有大中小三种不同的尺寸型号。这一消息在视频中也得到了验证，虽然仅是以渲染图的方式出现在这 则视频中。视频中出现的实体设备主要是中号版本，而大号版本似乎支持9个模块的替换，传言中最低50美元起的小号版后背框架部分也有至少6个可替换模块。
　　对很多喜好玩机的同学而言，仅是在软件层面每天刷个机显然是不够发烧的，如果手机模块能够自行更换，那该有多酷啊，虽然这个项目本身主要讲究的仍是 资源的最大化利用，摒除那些对用户而言不重要的模块部分，以及充分挖掘手机的剩余价值。对Ara项目感兴趣的同学请关注即将在4月15日举行的首届Ara 开发者大会，届时应当会有更多有关Project Ara项目和设备的消息放出。
&&|&&&&|&&&&|&&
您可通过新浪首页顶部 “”， 查看所有收藏过的文章。
，推荐效果更好！
看过本文的人还看过}