移动端真机调试终极利器-BrowserSync_移动端调试利器-优快云博客

之前有分享过一篇《如何在移动设备上调试网页》，感谢 xyyjk 留言推荐BrowserSync这个工具，自己也花了点时间研究了一下，还是很好上手的。比起之前介绍的方法更加方便（之前的方法已经过时）。BrowserSync可以实时同步更新CSS、JS文件，此外最关键的是全平台支持，即你可以在手机QQ浏览器、微信浏览器里面调试。今天就介绍一下这个工具的用法（以下针对Mac OSX）。

一、安装

其实官网已经有很好的 Get Started来介绍如何安装。我现在是结合Gulp来用的，在Gulp下更方便一点。官方也有BrowserSync for Gulp的插件，并有明确文档说明如何与Gulp整合。

1、安装开发依赖

在终端里输入：

$ npm install browser-sync gulp --save-dev

如果安装报错请加sudo：

$ sudo npm install browser-sync gulp --save-dev

2、编辑gulpfile.js

如果项目下没有gulpfile.js文件请新建。先来看一下项目的目录结构，bin文件夹是最终发布的目录，我们把它当作BrowserSync代理服务器启动的根目录：

gulpfile.js文件代码：

var gulp = require('gulp');
var browserSync = require('browser-sync');
// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            //指定服务器启动根目录
            baseDir: "./bin"
        }
    });
    //监听任何文件变化，实时刷新页面
    gulp.watch("./bin/**/*.*").on('change', browserSync.reload);
});

二、启动

打开终端输入：

$ gulp browser-sync

此时浏览器会自动打开http://localhost:3000的页面，我们会发现这个页面正是指向./bin目录下的index.html，这与我们在gulpfile.js中的设置相符。我们在index.html中有一个蓝色边框的box，并输出浏览器的UA：
./bin/index.html
BrowserSync启动后终端界面会有两个端口提示，分别是:3000的项目页面，和:3001的BrowserSync的UI界面，并且每个端口都有供本地（localhost）和外部（局域网IP）访问的URL：
browsersync 终端
因为我们把BrowserSync的reload加到了gulp的watch里，所以只要./bin下面的文件发生变化所有访问local URL或External URL的客户端（client）都会自动刷新。
接下来我们把手机和电脑要连接在同一个无线局域网里，我们可以直接通过微信扫码访问External的URL，如本例中的http://192.168.0.141:3000。此时手机显示如下：
weixin browser

三、调试

我们在PC的浏览器中打开http://localhost:3001，这个端口为3001的URL是BrowserSync的操作界面：
BrowserSync UI
界面操作简洁易懂。我们着重关注的是Remote Debug这一项，默认它的所有选项都是关闭的。我们开启Remote Debugger (weinre)这一项，然后点击出现的红色字：Access remote debugger (opens in a new tab)，就会打开weinre的控制台界面：
weinre for BrowserSync UI
这个界面上会列出当前连接在BrowserSync上的客户端，我们可以选择一个目标（target）来调试，因为我们的微信浏览器访问的是外部链接，即http://192.168.0.141:3000，所以我们点击图中Targets下的第一个link。点击后link会变为绿色，表示当前已经可以对这个客户端进行调试了。此时我们点到顶端的Elements选项卡上，就会看到微信浏览器里网页的HTML结构。鼠标移动到.box的div上的时候，微信浏览器里的相应的元素就会高亮起来：
微信浏览器高亮
此时能做的事情就可想而知了。