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

在构建响应式网站时，我们需要在多种屏幕尺寸下进行测试，以确保在这些不同的屏幕尺寸上正确呈现网站布局。我们可以在Chrome中使用屏幕尺寸和设备模拟器，这非常方便。但是，没有什么比在真实设备上测试网站更好的了，因为它提供了与我们的用户一样近的环境。

但是，在多个设备上进行测试也带来了问题。假设我们有3种设备可以在该网站上进行测试，那么每次我们进行更改后，您可能会不得不不断刷新这些设备中每一个的浏览器，您可以想象，这很麻烦。

出现了同步测试的想法来解决这种情况并使工作流程更加简化。有一个名为BrowserSync的Grunt插件可以执行此操作，在这篇文章中，我们将向您展示如何在您的项目中部署它。

推荐读物： 使用Chrome的设备指标进行视口仿真

BrowserSync是开源的，并且正在积极开发中。它是跨平台的 。您可以在Windows，OS X和Linux中使用它。另一方面，Ghostlab仅在OS X和Windows中可用。 BrowserSync是免费的 ，如果您的预算很少甚至没有预算，这会有所帮助。

事不宜迟，让我们看看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。

您可以从下面的动画GIF中看到，随着 index.html和style.css 更改，所有更新，更改和交互都在浏览器中实时同步。

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

安装

组态

更多资源

相关推荐