如何使用 Browsersync 同步网页上执行的操作？答案

【问题标题】：How to sync the actions performed on webpage using Browsersync?如何使用 Browsersync 同步网页上执行的操作？
【发布时间】：2016-10-07 14:48:30
【问题描述】：

我是一名自动化测试人员。我在全球范围内安装了 browser-sync 来测试我们拥有的网站。我尝试使用以下代码（在 index.html 文件中）进行试用。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <iframe src="https://www.google.co.in/" onload="this.width=screen.width;this.height=screen.height"></iframe> 
    </body>
</html>

我添加了一个 iframe 来打开我想要打开的 URL，并将其调整为默认的窗口大小。上面的CSS代码调用如下：

        h1
        {
            background: red;
        }

gulf.js 文件代码如下：

var gulp = require('gulp');
var bs = require('browser-sync').create();
// create a browser sync instance.
gulp.task('serve', function()
  {
  bs.init ({
   server: {
     baseDir: "Desktop/BrowserSync/Demo", index: "index.html"
    }
   });
gulp.watch("*.html").on('change', bs.reload);
});

它只是将背景颜色设为红色。

它会在我拥有的所有浏览器和配置上为我打开 Google 页面。当我尝试垂直滚动时，所有打开的浏览器窗口都执行了相同的操作。

但是，当我尝试在 Google 搜索框中插入任何文本或单击 Google 主页上的任何链接时，它不会在其他打开的浏览器窗口上同步/执行这些操作，甚至不会水平滚动。

我对浏览器同步完全陌生。我还尝试使用一些 gulp.js 文件来解决上述问题。但是没有成功，因为在运行它时给了我一个问题，比如找不到浏览器同步功能，并且 package.json 文件缺少这样的东西。

【问题讨论】：

请注意：这里我只是想对网站进行跨浏览器、跨设备测试。我只想在我的网站上执行一些操作，并且我希望相同的操作反映在通过浏览器同步生成的 URL 打开我的网页的所有其他浏览器上。我不打算/不打算观看任何 css 或 html 更改。

标签： browser-sync

【解决方案1】：

访问此链接 - 文档下方的 https://www.browsersync.io/docs/gulp 并将以下代码复制到 src 文件夹外的 gulpfile.js 文件中

 var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// or...

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

创建package.json文件并检查是否有这段代码：-

"devDependencies": {
    "browser-sync": "^2.15.0", //versions of the package
    "gulp": "^3.9.1"
  },
  "dependencies": {
    "gulp-sass": "^2.3.2"
  }

【讨论】：

我已经使用命令“npm install -g browser-sync”和 gulp 全局安装了 Browsersync。但是根据您提供的链接，它说“首先，您需要将 Browsersync 和 Gulp 作为开发依赖项安装”为“$ npm install browser-sync gulp --save-dev”所以我需要卸载它们并重新安装？还有一个问题，是否必须始终安装 gulp 并编写 gulp.js 文件来同步使用 Browsersyn 在网页上执行的操作？
如果它不起作用，请尝试全新安装 browsersync 和 gulp。除了 gulp，您还可以尝试使用 grunt js。这是browsersync.io/docs/grunt。祝你好运。 :)
我已经卸载了全局安装的 browsersync 和 gulp。我交叉检查了它以及下面给出的。 C:\Users\PPawar1\Desktop\BrowserSync\New Demo>browser-sync -version 'browser-sync' 不是内部或外部命令、可运行程序或批处理文件。 C:\Users\PPawar1\Desktop\BrowserSync\New Demo>gulp -version 'gulp' 不是内部或外部命令、可运行程序或批处理文件。
C:\Users\PPawar1\Desktop\BrowserSync\New Demo>npm install browser-sync gulp --sa ve-dev npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2或更高版本以避免 RegExp DoS 问题 npm WARN optional dep failed, continue fsevents@1.0.14 npm WARN deprecated minimatch@0.2.14: 请更新到 minimatch 3.0.2 或更高版本以避免 RegExp DoS 问题 npm WARN deprecated lodash@1.0 .2: lodash@
当我尝试再次安装它时遇到的问题，如您提供的链接中给出的那样

【解决方案2】：

如果您缺少 package.json，您需要在项目的根目录中使用“npm init”。从那里，如果你全局安装了 gulp（'npm install -g gulp' 如果你没有）你会想要使用'npm install gulp browser-sync --save-dev' 这个命令将下载所需的 gulp 和浏览器同步依赖项。 '--save-dev' 部分将它们添加到你的 package.json 中。

另外，我注意到你说这是在你的 'gulf.js' 文件必须命名为 'gulpfile.js' 除非你专门更改 gulp 正在寻找的文件。第一次回答问题，希望对你有帮助！

【讨论】：