在智能手机还未普及时，移动设备的调试处处是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调试”处打钩选上。
第三步：在电脑上打开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可打开你想要调试的新页面。
补充说明一下，如果接上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数据线。
本文由 admin 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2024-05-16 22:03:46