[1]移动端页面调试之“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

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

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

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

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

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

后语

利用这个工具，结合平时调试demo所用的工具组成一个黄金搭档工具：charles＋browserSync＋weinre。

 

你平时都用什么工具调试呢？

 

关于本文

做者：@韩子迟

原文连接：http://www.cnblogs.com/zichi/p/5001767.html