移动前端开发之Chrome 实现远程调试

通常情况我们调试移动端页面最常用的方法就是：切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果

但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了

近几年，浏览器厂商也纷纷推出自己的远程调试(RemoteDebugging)工具，比如Opera Mobile 可以借助其推出的跨设备跨平台桌面开发者工具Opera Dragonfly 实现远程调试，iOS Safari 可以开启Web检查器在 Mac OS X系统中实现远程调试。Andriod 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

第一步：首先在移动设备上开启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 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试。

如果找不到，可以打开电脑的chrome 在地址栏输入 chrome://inspect 选中 Discover USB devices 可以检测到你的设备 可以看到监测到我的设备是小米4

在输入框中输入一个新的网址，点击Opoen可打开你想要调试的新页面。

说明：由于Chrome版本不同，DevTools也可能有些差别，比如我的Chrome38.0.2125.104 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);
    }  
  }

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窗口一片空白，且刷新无效时，那极有可能是由于被墙的缘故，你可以尝试appspot.com是否可以ping的通，如果无法ping通，那你现在就先翻墙吧（goagent 或红杏都不错，将appspot.com加入白名单），当然你还需要有google账户。

补充说明一下，如果接上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数据线。

端口转发（Port forwarding）

你的手机和开发机器有时会处于两个不同的网络（如本地服务器和线上服务器两个不同的网络环境），手机上可能获取不到开发环境的页面内容。况且，有时候你的开发环境处于公司出于安全原因管控限制下的网络中。 

Chrome For Android中的端口转发解决了这一困难，在手机上测试你开发的网站瞬间变得容易。它的工作原理是在移动设备上创建一个监听TCP端口，该端口映射到开发机器特定的TCP端口，两个端口通过USB线路通信，所以这种连接并不依赖于所处网络环境的配置。

在进入正题前必须要提前说明搭建本地服务器需要注意的一些点。安装本地服务器，这里安装的是wamp集成包。一键安装完成后，需要修改Apache的一些设置。

参考文章：

chrome远程调试-https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0307_7685.html

Remote Debugging on Androidwith Chrome 

https://developer.chrome.com/devtools/docs/remote-debugging

 freshlover的CSDN专栏文章

《移动端Web开发调试之Chrome远程调试(Remote Debugging)》http://blog.csdn.net/freshlover/article/details/42528643

转载本站文章《移动前端开发之Chrome 实现远程调试》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0307_7685.html