之前有分享过一篇《如何在移动设备上调试网页》,感谢 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:
BrowserSync启动后终端界面会有两个端口提示,分别是:3000的项目页面,和:3001的BrowserSync的UI界面,并且每个端口都有供本地(localhost)和外部(局域网IP)访问的URL:
因为我们把BrowserSync的reload加到了gulp的watch里,所以只要./bin下面的文件发生变化所有访问local URL或External URL的客户端(client)都会自动刷新。
接下来我们把手机和电脑要连接在同一个无线局域网里,我们可以直接通过微信扫码访问External的URL,如本例中的http://192.168.0.141:3000。此时手机显示如下:
三、调试
我们在PC的浏览器中打开http://localhost:3001,这个端口为3001的URL是BrowserSync的操作界面:
界面操作简洁易懂。我们着重关注的是Remote Debug这一项,默认它的所有选项都是关闭的。我们开启Remote Debugger (weinre)
这一项,然后点击出现的红色字:Access remote debugger (opens in a new tab),就会打开weinre的控制台界面:
这个界面上会列出当前连接在BrowserSync上的客户端,我们可以选择一个目标(target)来调试,因为我们的微信浏览器访问的是外部链接,即http://192.168.0.141:3000,所以我们点击图中Targets下的第一个link。点击后link会变为绿色,表示当前已经可以对这个客户端进行调试了。此时我们点到顶端的Elements选项卡上,就会看到微信浏览器里网页的HTML结构。鼠标移动到.box的div上的时候,微信浏览器里的相应的元素就会高亮起来:
此时能做的事情就可想而知了。
需要注意的是,要先打开自己的项目页面,再打开Remote Debugger,这样才能列出当前已经连接的客户端。否则的话,即使项目页面和BrowserSync是连接状态,Remote Debugger也会出现捕捉不到的情况。因此,可能需要关闭再重新开启Remote Debugger进行调试。