移动端之Chrome远程调试

原理

安卓远程调试支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持:

调试站点的页面

调试安卓原生App中的WebView

实时将安卓设备的屏幕图像同步显示到开发机器

通过端口转发(port forwarding)与虚拟主机映射(virtual host mapping)实现安卓移动设备与开发服务器进行交互调试

调试要求

开发环境安卓桌面版Chrome32+

一条USB数据线,连接电脑与移动设备,安装相应机型的USB驱动

如果是调试网页,移动设备需要安装Chrome forAndroid ,且安卓系统须为Android 4.0+

对于APP WebView的调试,需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置。

说明:远程调试要求桌面版Chrome浏览器版本要高于安卓移动设备的Chrome版本号

方法

1.手里usb连接电脑(我用的mac,所以演示用mac),查看是否连接成功

连接成功

2.手机连接成功后,启动chrome,输入chrome://inspect/#devices

移动端之Chrome远程调试_第1张图片
启动chrome

3.打开app上的webview

移动端之Chrome远程调试_第2张图片
连接webview

4.点击inspect,调试

调试

点击inspect打开DevTools后,你可以选中页面中的DOM元素,同时设备中对应元素也高亮显示,也可使用DevTools中的Inspect Element 选中目标元素,可以实时与移动设备页面交互,方便的定位问题所在,进行代码调试。

你可能感兴趣的:(移动端之Chrome远程调试)