如何跨多个浏览器和设备同步测试网站

在构建响应式网站时，我们需要在不同大小的屏幕下对其进行测试，来确保页面布局在这些屏幕上正确渲染。当然我们可以很方便的使用 screen-size 和 Chrome 中的设备模拟器，但是如果能在真实设备上进行测试那就更好了，因为这样能够提供与用户最接近的环境。

不过在多个设备上进行测试也会带来问题。假设用三台设备来测试网站，每次在进行修改时会一直不断刷新每一个浏览器，这太麻烦了。

所以同步测试的想法应运而生，可以解决这种情况并使工作流程更加精简。有一个名为 BrowserSync 的 Grunt 插件可以胜任这种操作。

BrowserSync 是开源且一直在积极开发维护的。它是跨平台的，可以在 Windows、OS X 和 Linux 中使用。而 Ghostlab 仅适用于 OS X 和 Windows。最后 BrowserSync 是免费的。

安装

首先，需要使用 Grunt。确保你已经安装了 grunt-cli 以及插件 Grunt BrowserSync 。这个插件用来同步网站上发生的交互，包括页面滚动、填充表单字段和点击链接等。

所有这些操作都会在实时的反映在其他浏览器和设备中。输入以下命令以在你的工作目录中安装 BrowserSync：

npm install grunt --save-dev
npm install grunt-browser-sync --save-dev

配置

安装后，通过下面这种方式在 Gruntfile.js 中加载 BrowserSync。

module.exports = function (grunt) {
    grunt.initConfig({
        browserSync: {
            bsFiles: {
                src : [ 'index.html', './css/*.css' ]
            },
            ghostMode: {
                clicks: true,
                forms: true,
                scroll: true
            },
            options: {
                server: {
                    baseDir: "./"
                }
            }
        }
    });
 
    // load npm tasks
    grunt.loadNpmTasks( 'grunt-browser-sync' );
 
    // define default task
    grunt.registerTask( 'default', ['browserSync'] );
}

这个配置用来监视 style.css 和 index.html，并在检测到这些文件发生修改时自动刷新浏览器。另外还启用了 ghostMode 用来同步网站上的交互，例如滚动和点击。

一切就绪之后运行 grunt 来启动我们在配置中设置的 browserSync 任务。

grunt

与旧版本不同，新版的 BrowserSync 现在能够设置所有使用的内容，包括静态服务器，并通过提供它所在的 URL 来重新加载我们的站点。

你可以从以下动图中可以看到，所有 更新、更改和交互在浏览器中实时同步，因为更改了 index.html 和 style.css。

安装

配置

更多资源