好用的调试工具

ChromeDevTools

在PC上调试HTML页面时，经常用到firefox上的firebug和chrome上的DevTools，这两个工具帮助开发和测试在debug问题上提供了很大的便利。在当下移动互联网热的时代，无线端的HTML5的产品越来越多，面对纷繁复杂的浏览器环境（搜狗浏览器，chrome，手机自带，app等等），经常遇到一些诡异的问题，在定位问题时令开发和测试束手无策。那么在移动端，是否也有这样好用的工具呢？接下来为各位简要介绍两个好用的工具。

在介绍之前，先简要说明一下，当前无线开发同学调试无线页面的过程。目前常用的方法是在chrome上设置移动UA，模拟移动设备。这种方式的好处是显而易见的，在PC浏览器上很方便进行现场调试，但有时遇到的一些兼容性的bug，在PC浏览器上是无法复现的。其中的一个原因是，手机厂商在自主研发过程中，会对android系统自带的浏览器进行二次开发，开发的结果存在差异。

1. Android手机允许USB调试。

2. 手机连接电脑，并允许调试。

3. 在PC chrome 浏览器地址栏中输入：chrome://inspect。
   

4. 勾选 “Discover USB devices”。

5. 打开手机上chrome浏览器，并输入需要debug的网址

6. 在DevTools下的Devices可以看到移动端浏览器的链接。

点击 inspect，在PC上Chrome DevTools中即可看到手机端chrome的页面，PC端和手机端的操作是同步的。

Weinre

Weinre代表We b In spector Re mote，是一种远程调试工具。上一个工具，调试的局限性是，仅能在chrome中进行调试。而winre则适用于任何一个浏览器。
配置过程如下weinre介绍主页

1. 下载weinre的bin文件，并解压到本地目录。
2. 在PC上配置node环境，具体搭建方式请搜狗一下。
3. 启动weinre服务：node weinre

  <img data-s="300,640" data-type="png" src="http://mmbiz.qpic.cn/mmbiz/za53OcOES1TvXkU8deDgQwZLIib8Mm8c5s9k53AnpVtPHTsHtxGJ2J7PH5mkTt1DY88lkibic9ZP7Y7nHnbusvAyA/0?wx_fmt=png" _src="http://mmbiz.qpic.cn/mmbiz/za53OcOES1TvXkU8deDgQwZLIib8Mm8c5s9k53AnpVtPHTsHtxGJ2J7PH5mkTt1DY88lkibic9ZP7Y7nHnbusvAyA/0?wx_fmt=png" data-ratio="0.1079136690647482" data-w="">

4. 访问服务页面“http://10.129.152.246:8090”，服务页面中有两项需要关注，调试窗口和要注入的js代码，见标红框。

5. 将Target Script的代码像引用正常js文件的一样，引入到被测试页面。如：

6.在手机任意浏览器中访问被测试页面
7.在PC浏览器中，打开“debug client user interface”中的链接。在Elements中即可看到手机浏览器中的元素内容。

6.调试case：将hello word 修改为 hello Sogou

6.手机浏览器里：