前端屏幕同步调试神器browserSync

harryhappy 发布于2019-08-26 10:20 / 1161人阅读

摘要：应用场景当我们需要在安卓手机苹果手机一体机等等多种不同设备调试同一个页面时，每个滑动点击操作都要在每个设备上来一遍，这样重复性的工作我们可以用自动实现准备工具安装一般安装的同时已经安装安装在命令行输入一般安装为全局工具注意在安装可能

应用场景

当我们需要在PC、安卓手机、苹果手机、ipad、一体机等等多种不同设备调试同一个页面时，每个滑动点击操作都要在每个设备上来一遍，这样重复性的工作我们可以用browser-sync自动实现

准备工具

1.nodejs
2.安装npm (一般安装node的同时已经安装)

安装browser-sync

在命令行输入 npm i browser-sync -g

一般安装为全局工具

注意
在windows安装可能会报以下错误

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modulesrowser-sync
ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

解决办法是安装Visual Studio

然后重新安装

使用

browser-sync start --server ./ --files *
--server 是监听的文件目录
--files 是监听的文件

访问

启动后命令行如下

访问3000端口的地址是你的站点，3001是browser-sync的后台管理

代理

我们经常需要调试已经部署在服务器的网站，这个时候可以用browser-sync的代理功能
browser-sync start --proxy http://news.baidu.com/
--proxy 后面为代理地址

脚本嵌入

还可以通过脚本嵌入的方式使用，执行
browser-sync start
会看到如下图:

复制代码到页面

".replace("HOST", location.hostname));
//]]>

也可以愉快的调试^_^

以上是经常会用到的命令，更多命令请查看官网

专线服务私有云前端调试 BrowserSync 神器神器VPS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106012.html

BrowserSync -- 你值得拥有的多浏览器测试工具

摘要：是一个同步多浏览器页面测试工具。有了它，你不用在多个浏览器间来回切换，不断刷新来看效果了。更神奇的是你在一个浏览器中滚动页面点击按钮等用户行为也会同步到每个浏览器中。官方的视频演示。 BrowserSync 是一个同步多浏览器页面测试工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...

ZweiZhao 2019-05-29 16:20 评论0 收藏0
Day19 - 摄像、拍照，滤镜中文指南

摘要：摄像拍照，滤镜中文指南本文出自春哥个人博客作者黎跃春追时间的人简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。这个新的对象表示指定的对象或对象。 Day19 - 摄像、拍照，滤镜中文指南本文出自：春哥个人博客作者：©黎跃春-追时间的人简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文...

chaos_G 2019-08-21 11:49 评论0 收藏0
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

摘要：打开您的命令行工具，进入到目录下，运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址，这一切都会在命令行工具里显示。自己写标签：实时刷新、免F5、 gulp + browser-sync 开门见山，首先讲明一下本文的定位吧：写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸...

villainhr 2019-08-21 10:47 评论0 收藏0
3月份前端资源分享

摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

nanchen2251 2019-08-21 15:21 评论0 收藏0
github上的那些神器

摘要：在任意目录开启静态文件服务器优雅的看源码命令行从未如此迷人天下武功，唯快不破谁说不能用命令像用一样用浏览器将内网地址转化成公网地址省时省力的浏览器同步测试工具地址集负载均衡热更新监控等功能于一身的应用程序的生产流程管理器地址 1 serve: 在任意目录开启静态文件服务器 https://github.com/zeit/serve showImg(https://segmentfaul...

Pandaaa 2019-08-20 17:16 评论0 收藏0