移动端页面(css)调试之“weinre大法”

移动端页面调试通常分两步。第一步咱们须要把本地（pc端）写的页面效果展示在移动端，一个很方便的办法是用 fiddler 做为代理，具体能够参考 如何用 fiddler 代理调试本地手机页面，这样咱们就能在本身的手机上看到真机效果，有时还能够用 alert 调试一些 js；固然，有时仅仅展示样式还不够，咱们但愿能像 chrome 面板或者 firebug 同样查看元素的 css 样式，甚至能够在控制台看到 js 的 console 输出，UC浏览器开发者版能够方便地作到这点，具体能够参考 如何使用 UC浏览器开发者版 进行移动端调试。

接下来咱们来隆重介绍下兼容全部浏览器的 "weinre大法" （html & css 调试利器，没法调试 js）

一、weinre 是什么鬼

---

Weinre 是 Web Inspector Remote 的缩写（远程 web 检查器），它的做用就是至关于 chrome 的审查元素面板（Elements）同样，界面和用法也基本同样，无非不一样的是：weinre 适合在移动端页面调试，好比手机访问页面的时候，咱们能够使用 chrome 浏览器查看页面的 html 元素和 css 代码，咱们能够对此进行更改，而后在手机端不须要刷新，当即能够看到效果。看到这里您或许已经明白了，没错，weinre 是调试 html 和 css 的利器，对于 js 的调试却心有余而力不足了。

二、Node.js & weinre 安装

---

固然首先得安装 weinre。之前安装要依靠 java 环境（jdk），很麻烦，如今有了 Node.js 一会儿方便许多。咱们先安装 Node.js（参考 Node.js入门），安装完后进入 Node.js 的安装目录，进行 weinre 的安装。

weinre 安装完后，须要在本地开启一个监听服务器。咱们先获取本身的 ip（ipconfig），好比个人 ip 为 192.168.1.101（这里要注意一点，若是 pc 端连的是局域网的话用局域网，若是不是则优先使用 pc 端非局域网 ip）。咱们在命令行敲下以下命令便可开启服务：

weinre -boundHost 192.168.1.101

三、访问 weinre

---

服务已经开启，咱们赶忙在浏览器上访问服务地址吧！

在打开的页面中咱们找到 Target Script 模块，将下图中这段 js 引入到须要调试的 html 文件中。

好比我在本地写了以下代码，将 js 引入后：

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<div></div>
<script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script>

咱们在移动端先任意找个浏览器打开该页面（fidder 代理），而后在 pc 端点击刚才打开页面最上面的连接（下图所示）

页面便会跳转至调试页面，这时就能够愉快地调试 css 了！

---

read more：各类 真机远程调试 方法 汇总