在入职不久接触了移动端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