移动web开发之本地调试

浏览数：57 / 时间：2015年06月11日

本文转载自http://ued.qunar.com/mobile/guide/mobile/2014/10/27/mobile-fe-dev-remote-debugg.html

本文适用于调试所需的所用能容都在本地PC上，或在外网上。

7.1 部分浏览器调试情况

各个浏览器远程调试及其所用工具如下表所示：

平台	浏览器	连接方式	使用ADB	调试工具
IOS	Safari(mac)	数据线	不	Inspector
Android	Android Chrome	数据线	内置	Inspect
Android	Firefox For Mobile	数据线	是	FireFox原生调试工具
Android	UC开发这工具	数据线	是	Inspector

ADB

在使用firefox和UC浏览器调试时，需要用USB连接设备，并使用adb方式连接。简要的介绍一下adb吧：ADB = Android Debug Bridge，即调试桥，为安卓机器的调试工具。把 adb.exe及dll 放入系统路径中，即可以在CMD/terminal中使用adb命令了。adb forward = 端口映射，提供透明socket通信。

点此下载

ADB的使用中，端口有可能有冲突，在windows端的可使用如下命令：

查看使用了5037端口的进程pid:netstat –ano | findstr "5037"
根据pid查看进程：tasklist/fi "pid eq 进程的pid"
强制关闭进程：taskkill /f /pid 进程的pid

腾讯手机助手、360手机助手、豌豆荚等手机管理软件都会使用adb来进行手机的管理，因此调试前应先关闭这些软件，节约时间。

7.2 使用Chrome调试

Chrome远程调试可以调试WebView，允许在调试时自动做port-forwarding，可以不用刷机，不用改hosts。

7.2.1 使用PC-Chrome远程调试移动Chrome浏览器

对于web页面：要求移动设备系统为Android 4.0+ ，并在Android设备上安装chrome浏览器。
对于Android Apps：要求移动设备系统为Android 4.4+ 和调试需要的网页视图配置
USB线用于接入你的Android设备
开发设备上需安装Chrome32 以后的版本
国内环境需要FQ

具体步骤

1. 在安卓设备上设置允许USB调试

勾选设置>开发者选项>USB调试

2.调试页面上确认USB设备已经接入

调试页面打开方式 chrome菜单中>工具>检查设备

3.通过USB链接你的设备

如果你在windows上进行开发，为你的设备安装设备USB驱动，在chrome 开发者网站上查找驱动OEM USB 驱动

4.调试远程的web 视图

当连接好设备后，每当打开一个可调式页面时，在调试页面会展示移动设备上的每一个链接。点击inspect按钮，可以打开对应页面的开发这工具。可以使用输入框来在手机上打开对应的网站。

5.调试未发布的页面

打开本地服务器，把移动设备和开发设备连入同一个无线网络，之后将使用ip方式访问页面，进行调试。

调试小贴士

1.通过调试工具使用F5可以远程刷新页面

2.当查看网络瀑布图的时候，要保证移动设备处于真实的网络环境即是在的3G或2G网络环境下。

3.移动设备上的硬件加载页面内容通常慢一些，因此使用Timeline 来分析优化渲染和对CPU性能的影响。

说明

1.关闭调试工具窗口不会影响到你的远程设备。

2.Chrome会使你的移动设备在调试时免于受到自动锁屏的影响，但是你需要知道虽然这个很实用，他也会让你的设备的安全性降低。

3.你可能会注意到允许你进行远程调试的开发这工具版本与开发机上的版本不相同，这是因为该工具是与Android上chrome版本是一致的。

4.如果遇到页面白板问题，尝试着将手机和桌面的Chrome都更到最新吧，并尝试着使用桌面端的chrome://inspect/#devices打开并刷新页面，然后打开Inspector。如果还是不可以，多半是因为FQ不成功。

7.2.2 使用PC-Chrome远程webviews

从安卓4.4版本以后，可以通过开发者工具调试原生安卓设备中页面。调试webView和调试chrome很相似，除了在Chrome中设置允许USB web调试设置以外。

调试WebView中的内容，你需要通过setWebContentDebuggingEnabled来保证设备的可编程性，他是WebView类中的一个静态方法。

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }

这个设置应用于所有设备的webViews，要注意的是网页调试不受设备说明中的调试标志状态的影响。如果你想当调试标志为true的时候才能进行调试，测试标志当运行的时候。

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

在开发工具中打开一个webView

到inspect页面中可以看到一系列的可调式WebViews，同时还有形象的表示WebViews的大小和相对设备屏幕的位置，如果你的webViews有标题位，这些也会显示。在你想要调试的webViews上点击inspect，使用开发者工具像你想象那样远程调试浏览器页面。

7.2.3 端口转发

通常，你有一个网络服务器在本地开发机上，你希望设备上可以链接到这个站点上。如果移动设备和开发机连入一个网络，这是很简单就能实现的。但是有的时候这个也很难做到，譬如在被限制的公司网络上。

Android版本的chrome支持端口转发使得这个工作变得很简单，他通过在移动设备上生成一个可以映射到开发机上特定TCP端口的TCP端口监听器。信息通过被转发的端口在USB上传输，因此他不依靠于移动设备的网络进行配置。

启用端口转发

这一步建立在你已完成远程调试配置并且可以运转，在你的开发机上的Chrome中配置。

打开chrome://inspect
打开位于顶部的端口转发按钮
在设备端口空中，键入android设备监听的端口号码
在host空中，添加网络应用运行的IP地址以及端口号，这个地址可以是你开发机上的任何可访问的本地地址。当前，这个被限制在1024和65535之间。
确保你勾选开启端口转发。

在chrome页面你可以看到代表的你的端口转发成功的绿色圆圈。现在，在Open Tab处键入你的本地URL并且在你的移动设备上打开。

你能够看到你开发机上的内容。

虚拟主机映射 远程调试和ADB

7.3 UC浏览器的调试

UC开发者中心，可以获取到你感兴趣的开发工具的相关内容，也可以观看具体参考手册

7.4 通过Mac调试移动端页面

设备开启调试，绑定Mac机器，USB连接Mac
打开safari，Ctrl + ， > “高级”> 勾选“在菜单中显示开发”
菜单 > 开发
找到你的设备，打开inspector

详情可见：通过Mac远程调试iPhone/iPad上的网页

7.5 fireFox的调试

详情可见：Remotely debugging Firefox for Android

7.6 构建Weinre调试服务器

在使用webkit内核的移动端浏览器（比如海豚浏览器等），还可以使用Weinre来进行远程调试，而调试的方法是构建一个调试服务器。Weinre代表We b In spector Re mote，是一种远程调试工具。举个例子，在电脑上可以即时的更改手机上对应网页的页面元素、样式表，或是查看Javascript变量，同时还可以看到手机上页面的错误和警告信息.

Weinre作为一种远程调试工具，在结构上分为三层：

目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍； Debug客户端（client）：本地的Web Inspector调试客户端； Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信。