移动端真机调试终极利器-BrowserSync

2016-01-13

在移动开发中，我们经常会碰到不同设备，不同游览器，不同平台的调试问题，这个在开发过程中常常是挡在我们面前的“大难题”，现在介绍browsersync 这个工具并结合常用的gulp来进行调试，今天就介绍一下这个工具的用法：

一、安装

官网有Get started 教程，但是使用起来没用gulp方便，官方也有BrowserSync for Gulp的插件，并有明确文档说明如何与Gulp整合。

1、安装开发依赖

browsersync是依赖于node的，所以我们得先安装node，建议选择LTS版本，比较稳定，安装好之后我们可以看看版本信息：

node-v

接下来安装gulp，因为gulp经常会用到，所以可以考虑在全局安装：

1	npm install --global gulp

如果只想在本项目适用的话：

1	npm install --save-dev gulp

接下来安装browsersync插件：

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

2、编辑gulpfile.js

文件目录如下：

structure

index.html在bin文件夹中，js如下：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./bin"
        }
    });
    gulp.watch("./bin/**/*.*").on('change', browserSync.reload);
});

二、启动

打开终端输入：

1	gulp browser-sync

此时浏览器会自动打开http://localhost:3000的页面，我们会发现这个页面正是指向./bin目录下的index.html，这与我们在gulpfile.js中的设置相符

note

这里默认是读取index.html，但是开发过程中有时不是index.html，然后会出现如下提示：

browser-sync-no

这里不用担心，只要把路径修改为相对应的就可以：

browser-sync-yes

BrowserSync启动后终端界面会有两个端口提示，分别是:3000的项目页面，和:3001的BrowserSync的UI界面，并且每个端口都有供本地（localhost）和外部（局域网IP）访问的URL：

localhost

因为我们把BrowserSync的reload加到了gulp的watch里，所以只要./bin下面的文件发生变化所有访问local URL或External URL的客户端（client）都会自动刷新。接下来我们把手机和电脑要连接在同一个无线局域网里，然后在手机端输入对应的外网ip地址就可以在手机端调试了。

三、调试

我们在PC的浏览器中打开http://localhost:3001，这个端口为3001的URL是BrowserSync的操作界面：

remote

点击出现的红色字：Access remote debugger (opens in a new tab)，就会打开weinre的控制台界面：

debugger

需要注意的是，要先打开自己的项目页面，再打开Remote Debugger，这样才能列出当前已经连接的客户端。否则的话，即使项目页面和BrowserSync是连接状态，Remote Debugger也会出现捕捉不到的情况。因此，可能需要关闭再重新开启Remote Debugger进行调试。