移动端调试工具

       weinre可以实现类似chrome开发工具的功能，JS报错需手动打印显示； Rosin是fiddle的一款插件，手机通过fiddle代理上网，Rosin能打印出各种控制台信息，无需手动调整代码; browser-sync是一款自动刷新工具，具体安装方法如下：

一、weinre

1、安装：npm -g install weinre

2、运行：weinre --boundHost -all-

3、打开主页，点击链接debug client user interface:     http://localhost:8080/client/#anonymous

4、在需要远程调试的页面添加weinre脚本(把localhost换成你的实际IP)

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

5、显示debug页面http://localhost:8080/client/#anonymous

测试结果：部分样式修改后手机上无效果，JS报错无法直接自动抛出，可以通过把try catch的e.message在控制台打印出来，在代码执行顺序上有延迟性，需等调试的target-script-min.js加载完成后才可打印。

如：

try{
     if(w>b){
          console.log("11");
     }
}catch(err){
     setTimeout(function(){
          console.log(err.message);
     },3000)    //3S后打印错误，也可在页面上以按钮控制在页面加载完成后打印
}

1、安装：npm -g install weinre

2、运行：weinre --boundHost -all-

3、打开主页，点击链接debug client user interface:      http://localhost:8080/client/#anonymous

4、在需要远程调试的页面添加weinre脚本(把localhost换成你的实际IP)

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

5、显示debug页面http://localhost:8080/client/#anonymous

测试结果：部分样式修改后手机上无效果，JS报错无法直接自动抛出，可以通过把try catch的e.message在控制台打印出来，在代码执行顺序上有延迟性，需等调试的target-script-min.js加载完成后才可打印。

如：

try{
     if(w>b){
          console.log("11");
     }
}catch(err){
     setTimeout(function(){
          console.log(err.message);
     },3000)    //3S后打印错误，也可在页面上以按钮控制在页面加载完成后打印
}

WEINRE:  http://people.apache.org/~pmuellr/weinre/docs/latest/

http://blog.csdn.net/spring21st/article/details/8932839

http://www.cnblogs.com/shawn-xie/archive/2012/12/10/2811206.html

http://ju.outofmemory.cn/entry/1355

2、Rosin（推荐）

是一款fiddle插件，由AlloyTeam开发，能接收页面中的console的输出

来源：http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/

项目地址：http://alloyteam.github.io/Rosin/

下载地址：

Roisn for Fiddler2

Roisn for Fiddler4

1、打开Fiddler，切换到Rosin Tab

2、点击“Add Rule”按钮，打开规则添加面板

3、选择规则匹配类型，支持三种匹配类型：

Host——域名，如：qq.com

Path——路径或者具体的页面地址，如：http://web.p.qq.com/coupon 或者http://web.p.qq.com/coupon/demo.html

Regex——正则表达式，如：^http:\/\/web.p.qq.com

4、输入具体的规则内容

5、打开测试页面，在测试页面代码中调用console打日志，或者在PC控制台模拟

6、回到Fiddler，切换到Rosin的Log选项卡，选择我们的测试页面，查看日志

7、对于复杂对象，双击Object字符区域选中，然后右键

8、复杂对象都会被转为JSON对象，生成一个JSON View

9、功能区，一些功能按钮，包括：日志文件导出、日志清空、日志文件删除

10、搜索功能，搜索框中输入文本，会自动高亮匹配结果，按Enter切换匹配区域

11、javascript运行时错误信息捕获，并且支持跨域情况下的捕获（还记得那些Script.error 0的错误吗）

js错误捕获：log Level选all或error,可以看到报错提示，右键对象查看具体报信息及报错行数

手机流量抓包与配hosts

在PC上，我们可以很方便地配host，但是手机上如何配host，这是一个问题。

这里主要使用fiddler和远程代理，实现手机配host的操作，具体操作如下：

1.首先，保证PC和移动设备在同一个局域网下；

2.PC上开启fiddler，并在设置中勾选“allow remote computers to connect”

3.手机上设置代理，代理IP为PC的IP地址，端口为8888（这是fiddler的默认端口）。通常手机上可以直接设置代理，如果没有，可以去下载一个叫ProxyDroid的APP来实现代理的设置。

4此时你会发现，用手机上网，走的其实是PC上的fiddler，所有的请求包都会在fiddler中列出来，配合willow使用，即可实现配host，甚至是反向代理的操作(也可通过配置hosts文件实现)。

http://www.cnblogs.com/shawn-xie/archive/2012/12/10/2811206.html

3、不同客户端自动刷新，node下安装browser-sync（类似F5）

http://www.cnblogs.com/kbqncf/p/4206244.html

安装：npm install -g browser-sync

A、本地没有搭建服务器环境的
针对单纯的静态页面，我们需要使用到browser-sync 的 --server 命令。
假设我的静态页面都在C:\wamp\www\openadmin\style\html\目录下，
通过控制台进入到C:\wamp\www\openadmin(即把改目录当初server的root目录)，敲入下面的命令：
browser-sync start --server --files "style/html/*.html"

访问地址：http://localhost:3000/style/html/module.html

B、本地已经搭建了服务器环境的
本地搭好服务器，设置了vhost  local.openadmin.com 指向 C:\wamp\www\openadmin\目录
运行：
browser-sync start --proxy local.openadmin.com --files "style/**"