weinre 简记

在入职不久接触了移动端WEB开发，刚开始遇到的问题就是调试的问题。在PC端的时候，我经常纠结在IE与IE之间，主要的兼容问题仍是IE一家子和他们的亲戚（啥多核浏览器，也是各类坑不断）之间。IE虽然问题多，但至少它还有一个可视化的调试工具，能够在浏览器中调试调试。面对移动端WEB的兼容问题，各类国产机修改过内核的浏览器，他们又要怎么调试？这一直是个问题，后面接触到了一些方案，其中也包含 weinre 。

长时间没有使用，即便学会的知识也会遗忘，今天我又由于年中接到的活而把 weinre 派上了用场。电脑端也是新装过几回的环境，因而还得从新走这个流程。

发现方法

最近一直活跃在 segmentfault ，对于时间的掌控仍是不是那么均衡，不能把工做以及业余工做和 segmentfault 很好的区分，也就形成了至关大一部分时间的浪费。
下午以前接到的活又来问题了，某个页面的一个块怎么偏离了正常位置，在chrome中模拟是没有任何问题的，没想到的是在实测手机浏览器中会出现问题，如何调试呢？因为忘记了以前学会的方法，最好的方式莫过于搜索一下，搜索结果中发现了 weinre 因而想起了 browser-sync ，但实际不须要，就只是搜索学习了一下 weinre。

weinre 全称是 Web Inspector Remote，就是用来调试手机端网页的。在这以前只是使用它调试过本地web静态页面，今天须要调试的是CMS中的模板页面，也就没必要在意是什么浏览器中的网页了，在公司时调试的是上线的页面，在回来的路上在想是否是能够直接调试微信内置浏览器中的兼容问题，试想应该都是可行的。

安装Weinre

电脑安装的有 node ，因而能够直接使用 npm 命令安装便可

npm i weinre -g

怎么使用

拿到一个工具不知所措的时候，均可以直接 --help 或者 -h 。你想知道的它都能告诉你。

weinre --help

• 运行weinre，默认设置什么也不修改，先测试一下本地的正在作的一个Demo
  weinre

  默认localhost:8080，浏览器打开 http://localhost:8080 能够参考文档介绍说明

• 编辑正在作的demo

  按照上一步的说明，在文档中添加这一句到Demo中
  <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

• 开启Debug，运行Demo

  打开debug工具页面： http://localhost:8080/client/#anonymous
  打开Demo地址：http://localhost:8088 （这个是用 webpack-dev-server 开的一个开发服务）

  Debug页就能够开启调试模式了
  

  PC上使用这个工具没有必要，由于你能够直接用 chrome 的 dev tool 啊。因此仍是继续模拟真机

• Mobile真机调试

  手机上要怎么访问PC上的 http://localhost:8088 呢？公网访问同样的道理，经过IP，本机IP是 192.168.95.1，因而从新设置一下webpack-dev-server 的host。相应的 weinre 也绑定host到 192.168.95.1。不能忘记的是修改页面内的包含 script 。
  <script src="http://192.168.95.1:8080/target/target-script-min.js#anonymous"></script>

  打开debug工具页面： http://192.168.95.1:8080/client/#anonymous
  打开Demo地址：http://192.168.95.1:8088 （这个是用 webpack-dev-server 开的一个开发服务）

  Mobile与PC在同一网络环境下

• 调试在线网站与微信内置浏览器打开的网页

  同真机调试同样的道理，在同一网络环境下，在须要调试的页面内加入 weinre 的 script 监测脚本。借用今天 segmentfault 上的一道关于微信获取地址数据的题目来调试一下是否正常获取数据。参照真机调试中的配置。

  微信内置浏览器访问个人一个测试页面 http://unofficial.cn/demo.php

准备来使用吧

不再用担忧mobile没有dev tool了，weinre 我值得拥有。下一次应该不会忘记还有这个工具了吧？这一次我本身总结了一下，只为下一次再也不重复搜索方法。