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

2019.09.16 温州网页设计

109

温州网页设计在构建响应网站我们需要测试它在多个屏幕尺寸,以确保网站布局呈现在这些不同屏幕尺寸正确。 我们可以使用屏幕大小和 设备模拟器在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 ,这种方式。

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.
21
22
23
24
25
模块。 出口=函数 (){
    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 我们已经在配置中设置的任务。

1
咕哝着说

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

温州网页设计

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

进一步的资源

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

  • 满足咕哝:JavaScript构建工具 -代码+

  • 跨设备同步移动测试 ——HTML5岩石


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP