Chrome for Android有一个针对开发者很贴心的功能,就是远程遥控 debugging,在桌面电脑上为移动浏览器进行debug。首先你需要在电脑上安装Android SDK和Chrome桌面浏览器,并将移动设备设置为开发模式,通过USB线让Android手机与电脑连接,打开Android Debug Bridge (adb),并在手机的Chrome里打开Settings - Under the hood - Developer tools 里的 Enable USB Web debugging(如上图)。
在电脑上打开端口转发:
adb forward tcp:9222 localabstract:chrome_devtools_remote
在桌面电脑的Chrome里打开localhost:9222:
然后就可以看到Android手机的Chrome打开的网页了,打开任何一个网页即可开始在桌面电脑上对手机上的网页进行debug:
继续观看官方的介绍视频:
http://v.youku.com/v_show/id_XMzUwMTA4MDI0.html
----------------------------------------------------------------------------------------------------------------------------------
远程调试Chrome浏览器在Android上
内容
注:有关我们用于远程调试的交互协议的信息,请参阅调试器协议文档和chrome.debugger。
远程调试
移动你的网页内容的工作经验非常不同于桌面上什么用户体验。谷歌Chrome DevTools允许您检查,调试和分析设备上的经验与全套工具,你已经习惯了,这意味着你可以使用Chrome DevTools在开发机器上的页面在移动设备上进行调试。
![调试的Chrome为Android使用Chrome开发者工具](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/remote-debug-overview.jpg)
发生在USB调试只要您的移动设备连接到开发计算机上,您可以查看和修改HTML,脚本和样式,直到你得到一个bug的页面,其行为完全在所有设备上。
开始远程调试,您需要:
- Android手机或平板电脑浏览器为Android的谷歌播放32或更高版本。
- 使用USB电缆将设备插入。(Windows用户还需要安装相应的USB设备驱动程序。)
- Chrome浏览器32或更高版本安装在您的开发计算机。
当调试一个Web应用程序从开发机器服务,您也可以使用 反向端口转发允许移动设备从开发计算机访问一个网站通过USB。
1。设置您的设备
为了调试通过USB,你需要设置你的Android设备的发展。
要启用USB调试:
- 在Android 4.2及更高版本,开发人员选项默认是隐藏的。使其可用,进入设置>关于手机和水龙头内部版本号七倍。是啊,只需轻按7倍,即使它似乎疯了。然后,返回到上一画面,以找出开发人员选项。
- 在Android 4.0和4.1,这是在设置>开发选项。
![在开发人员选项USB调试设置](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/usb_debugging_on.jpg)
如果您正在开发在Windows上,则需要安装相应的USB驱动程序为您的设备。看到OEM的USB驱动程序在Android开发者网站。
2.1直接连接通过USB
DevTools现在支持原生USB调试连接的设备。您不再需要配置亚行或亚行的插件,看看Chrome浏览器的所有实例的Chrome浏览器供电的WebView上连接到系统的设备。此功能适用于所有操作系统的:在Windows,Mac,Linux和Chrome操作系统。
Windows用户?您需要安装 的设备驱动程序,以使Windows和您的设备之间的通信。
只需访问一下:检查
和验证发现USB设备进行检查。
![关于:检查发现USB设备](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/discover-usb-devices.png)
Chrome浏览器和设备之间的这种直接USB连接可能会中断一个``ADB连接,你可能会试图建立。如果你需要使用`ADB`二进制其他原因,取消选中“发现USB设备”复选框,拔出设备,并插回,通过`ADB设备`你建立连接之前。
注意:如果您遇到问题,上面的技术,或者正在使用Chrome浏览器的旧版本,你可以尝试传统的工作流程进行连接,它使用adb的
二进制文件从Android SDK:
Android上远程调试(传统工作流程)。
3。连接您的设备
- 使用USB数据线将移动设备连接到开发机器。
- 当您的设备连接到开发计算机上,您可能会看到在这台电脑上的设备请求权限USB调试警报。为了避免看到此警示每次调试时,检查总是允许从这台计算机,然后单击OK(确定)
![USB调试权限警报](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/usb-debugging-dialog.png)
现在,看到所有连接的设备,进入浏览器菜单>工具>检查设备:
![](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/menu.png)
您也可以直接导航到 约:检查
。
![](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/about-inspect-stuff.png)
此页面会显示每个连接的设备及其选项卡。您可以同时连接多个设备,以及多个版本的Chrome中每个设备上打开。在页面上显示较低,可调试WebViews出现在这里,也是如此。
查找你感兴趣的标签,然后单击检查链接,打开DevTools就可以了。您也可以重新载入页面,把它带到前面,或者将它关闭。最后,你可以通过一个文本输入框打开设备上的新链接。
故障排除
- 在您的设备,请确认你有开发人员选项可用,USB调试打开。如果它的工作和联系,它会设定您的设备上的通知。
- 请确认您使用的是Chrome浏览器为Android 32或更高版本。
- 如果USB调试已打开,但
有关:检查
没有显示您的设备检查发现USB设备进行检查。如果是这样,拔出设备,并尝试撤消所有USB授权的开发人员选项重试。 - 你可以试试Chrome浏览器金丝雀在桌面上为新的改进日常降落。
4。调试应用程序
![使用Chrome开发人员工具检查一个远程页面](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/elements-panel.png)
例如,在检查页面中的元素您已经选择和元素的亮点在您的设备上的Chrome移动的实时性。事实上,你可以打开通过点击图标检查模式,然后点击您的设备屏幕上。
![远程设备上的元件检查](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/image_9.png)
同样,在编辑脚本或从DevTools控制台执行命令影响被检查设备上的页面。您也可以也可以使用其他所有的面板,如时间轴和配置文件。
笔记
- 因为我们是通过USB连接,你可以保持一个真正的蜂窝网络上的设备,并查看实际的网络条件下的网络面板网络的瀑布。
- Chrome浏览器会阻止你的屏幕进入休眠状态,而远程调试。要知道,虽然有用,这使得您的设备安全性较低。
- 在移动设备上的硬件经常跑你的内容要慢得多,所以使用时间轴来分析如何优化渲染和CPU的最佳效果。
- 如果你在开发机器上运行Web服务器和网络限制防止您的移动设备访问服务器,请参阅反向端口转发。
- 您可能会注意到你有在远程调试访问DevTools的版本不同,你已经在开发机器上运行的版本。这是因为这些工具都与Chrome浏览器的Android版在使用同步。
Screencasting你的设备的屏幕
Screencasting可以让你把你的设备的体验到你的机器。这可以让你保持,而不是来回切换设备和DevTools之间你的注意力在一个屏幕上。
点击截屏图标,工具栏上开辟了一个面板在电脑上显示你的设备的屏幕。当您浏览,点击,滚动,该截屏显示器将提供一个什么样的设备上的实时视图。
当你在screencasting您的设备,您可以控制移动浏览器的前进和后退按钮,重新载入,并直接更改URL。
![截屏工具栏](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/screencast2.png)
与截屏互动
您可以通过多种方式与您的设备的截屏互动。
- 输入你的机器的键盘上的这些按键被发送到设备
- 点击可挖。点击将被发送到该设备作为适当的触摸事件。
- 滚动鼠标滚轮所,触控板,或用丢指针的内容。
- 检查元素通过选择放大镜或按Cmd的 + Shift键 + Ç
- 放大与模拟捏手势Cmd的 + 点击用两个手指 + 拖曳
- 调整的截屏是 在更好地大小的内容窗格。
- 透明的截屏部分所涵盖的事情,比如多功能框和键盘。只有页面内容正在screencasted。
![Screencasting设备](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/screencast1.png)
注:该截屏功能反复捕捉设备,让您实时取景上的截图,但是这确实有一个性能开销。禁止截屏,如果你正在测试的帧率敏感的情况。
调试Android的WebViews
开始的Android 4.4(奇巧),您可以使用DevTools到Android WebViews内原生的Android应用程序的内容进行调试。调试WebViews要求:
- 在Android设备或模拟器运行Android 4.4或更高版本,如描述的USB调试启用 2。您的设备上启用USB调试。
- 铬30或更高版本。增强的WebView界面调试可以在Chrome 31或更高版本。
- 一个Android应用程序与web视图配置进行调试。
用于调试配置WebViews
在启用USB调试网页在浏览器设置不会影响WebViews。调试你的web视图的内容,你需要通过调用来启用它编程方式从您的应用程序中setWebContentsDebuggingEnabled,对一个静态方法的WebView
类。
如果(Build.VERSION.SDK_INT> = Build.VERSION_CODES.KITKAT){ WebView.setWebContentsDebuggingEnabled(真); }
此设置适用于所有应用程序的WebViews的。请注意,网络调试不是受的状态调试的
国旗在应用程序的清单。如果您要启用网络调试,只有当调试的
是真实的
,测试该标记在运行时。
如果(Build.VERSION.SDK_INT> = Build.VERSION_CODES.KITKAT){ 如果(0!=(getApplcationInfo()。旗&= ApplicationInfo.FLAG_DEBUGGABLE)){ WebView.setWebContentsDebuggingEnabled(真); } }
打开DevTools WebView中
调试在DevTools WebView中:
-
使用USB数据线将移动设备连接到开发机器。
当您的设备连接到开发计算机上,您可能会看到在这台电脑上的设备请求权限USB调试警报。
为了避免看到此警示每次调试时,检查总是允许从这台计算机,然后单击OK(确定)。
- 在Chrome浏览器在开发计算机上,打开一下:检查。
- 您应该看到您的应用程序的名称和调试的WebViews列表。单击
检查
链接旁边的一个选项卡以检查web视图的内容DevTools。
![](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/about-inspect-webview.gif)
端口转发
通常你有你的本地开发机器上运行一个Web服务器,而你想从你的设备连接到该站点。如果移动设备和开发机是在同一网络上,这很简单。但是这可能是困难的在某些情况下,像一个受限制的企业网络上。
Chrome浏览器的Android支持端口fowarding使这一工作流程非常简单的事情。它的工作原理是你映射到一个特定的TCP端口在开发机器上的移动设备上创建一个监听TCP端口。通过转发端口的流量行进通过USB,所以它不依赖于移动设备的网络配置。
此过程假定您已经配置远程调试和工作。
1。连接您的移动设备
- 您的设备连接到您的开发机器通过USB。
- 阻止Chrome浏览器的移动设备上当前正在运行的所有实例。
- 打开Chrome浏览器为Android。
2。启用端口转发
执行在开发机器上的Chrome浏览器执行下列步骤:- 打开有关:检查。您应该看到您的移动设备,而其打开的标签页列表。
- 单击端口转发在顶部的按钮。
- 在设备端口字段中,输入的Android设备应该监听(默认为8080)的端口号。
- 在主机字段中,添加在您的Web应用程序在本地主机上运行的IP地址和端口号。
- 请务必检查启用端口转发碰前完成。
3。利润
于有关:检查你现在应该看到一个绿色的圆圈,表示你的端口转发是succssful。现在,在您的本地网址进入开放标签字段,打去打开它在您的设备的浏览器。
您应该看到正在服务的开发机器上的内容。
![](https://developers.google.com/chrome-developer-tools/docs/remote-debugging/portforward.png)