温州网页设计：如何测试网站多个浏览器和设备同步

2019.09.16 温州网页设计

113

温州网页设计在构建响应网站我们需要测试它在多个屏幕尺寸,以确保网站布局呈现在这些不同屏幕尺寸正确。我们可以使用屏幕大小和设备模拟器在Chrome 这是很方便的。然而,没有什么比真正的设备上测试网站,因为它提供了一个环境,尽可能的为我们的用户。

测试在多个设备上也构成一个问题。说我们有三个设备上测试网站,我们可能最终不得不不断刷新每个浏览器在每一个这些设备每次我们刚刚做了一个改变,你可以想象,很麻烦。

的想法同步测试已成为解决这一问题,使工作流程更加简化。有繁重的插件 BrowserSync 执行这个,我们将向您展示如何将其部署在您的项目中,在这篇文章中。

推荐阅读: 视窗模拟与Chrome的设备指标

BrowserSync是开源并积极发展。它是跨平台的。你可以用它在Windows中,OS X和 Linux 。 Ghostlab,另一方面,只有在OS X和Windows。 BrowserSync是免费的帮助如果你没有预算。

闲话少说,我们来看看BrowserSync是如何工作的。

开始,我们温州网页设计将使用咕哝。我们需要确保grunt-cli安装插件, 繁重BrowserSync 。这个插件同步年代的交互发生在网站上包括页面滚动、填充表单字段,点击链接。

所有这些操作都将反映在其他浏览器和设备发生。键入以下命令安装BrowserSync在您的工作目录:

1 2	npm安装繁重,save-dev npm安装 grunt-browser -同步 ——save-dev

一旦安装完毕,负载BrowserSync内 Gruntfile.js ,这种方式。

20.

模块。出口=函数 (){

grunt.initConfig ({

browserSync: {

bsFiles: {

src:(“index . html”,“。/ css / * . css” ]

ghostMode: {

点击:真正的,

形式:真正的,

滚动:真正的

选择:{

服务器:{

baseDir:“。/”

}

});

/ /加载npm的任务

grunt.loadNpmTasks (“grunt-browser-sync” );

/ /定义默认的任务

grunt.registerTask (“默认”, [“browserSync”]);

}

这个配置将监控 style.css 以及索引.html 并自动刷新浏览器,当它检测到一个更改这些文件。我们也启用 ghostMode 在网站上同步交互如滚动,点击。

都准备好了。现在,我们运行咕哝着说初始化 browserSync 我们已经在配置中设置的任务。

咕哝着说

与旧版本,新BrowserSync现在将设置包括静态服务器和使用所提供的一切生活重新加载我们的网站的url。

你可以看到从以下动画GIF, 更新、变化和相互作用是实时同步浏览器中改变吗索引.html 和style.css 。

这里有更多的资源进一步挖进咕哝,“同步测试”。