远程调试H5：weinre+ngrok

最近作H5开发时，常常遇到在chrome模拟器上样式显示正常，在手机上却出现样式错误的状况，这时仅仅使用chrome模拟器来调试很难解决问题，因而开始琢磨怎么在PC端远程调试手机页面。

weinre使用比较简单，首先用npm安装weinre:

npm install -g weinre

启动服务监听端口：

weinre --boundHost 10.75.6.51 --httpPort 9999

浏览器打开服务地址：

10.75.6.51:9999

在待调试页面中引入下图中的js文件：

找到debug地址，并在浏览器中打开：

手机上访问待调试页面，会看到weinre能监听到：

还能够对页面元素审查：

weinre兼容性挺强，并且能支持微信端页面的调试，到此为止，若是页面请求使用的是http，那weinre已经能够解决调试问题了。

可是若是要调试https请求的页面，仅仅使用weinre没法解决，由于在页面中须要引入调试的js文件，weinre启动的是http服务，因而使用反向代理软件ngrok，它能够作地址映射，并支持http/https/tcp等，使用也比较简单：

这是官网下载地址：https://ngrok.com/download，或者能够直接使用npm下载：

npm install -g ngrok

而后启动ngrok：

ngrok http 10.75.6.51:9999

其中地址：中子域名由ngrok生成，每次启动可能不同，能够使用下面命令自定义子域名，但须要付费用户才能使用- -

ngrok http -subdomain=test 10.75.6.51:9999

启动后能够打开 http://127.0.0.1:4040 查看链接信息：

oh，回到weinre调试这个话题~如今能够在html中这样引入js了：

参考资料：
http://yujiangshui.com/multidevice-frontend-debug/
http://www.cnblogs.com/chaojidan/p/4430213.html
http://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/