手机端页面测试神器--Browsersync

需求点

有时候我们在做手机端页面的时候，电脑端制作完成需要手机端看效果。这个时候可以使用我们的神器—Browsersync

安装

前提条件是安装node环境。

然后运行（全局安装）

npm install -g browser-sync

（本地安装）

npm install browser-sync --save-dev

警告 - 不要使用sudo！ 如果你在 Mac OSX 下安装Browsersync并遇到问题时 - 无论是在(Global)全局还是在(Local)本地，它几乎总是因为你的NPM权限所引起的问题。查看相关说明文档了解如何一劳永逸来解决这个问题 - 只需2分钟:)

https://docs.npmjs.com/getting-started/fixing-npm-permissions

然后就可以使用了

启动 BrowserSync

一般情况下进入项目所在的文件然后运行

browser-sync start --server --file
.

然后就会出现一下

$ browser-sync start --server --file.
[Browsersync] Access URLs:------------------------------------Local: http://localhost:3000External: http://***.*.*.***:3000------------------------------------UI: http://localhost:3001UI External: http://***.*.*.***:3001------------------------------------
[Browsersync] Serving files from: ./

然后手机在局域网下扫描 http://***.*.*.***:3000 二维码就可以查看相应的页面

而且手机做操作，电脑端也会相应的改变。

手机端页面测试神器--Browsersync相关推荐

手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
09.01手机端常规测试
1. 手机端常规测试 1.1. What 1.1.1. 介绍手机测试的概念架构对于手机端测试,按照平台来分,分为Android和IOS两大主流系统, 对于ios和Android,二者有区别, ...
html+手机自适应源码,手机端页面自适应解决方案—rem布局（进阶版，附源码示例）...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
女性健康养生资讯网类织梦模板(带手机端)【测试可搭建】
模板介绍 ★模板介绍★ 女性健康养生资讯网类织梦模板(带手机端),测试完整无错,兼容主流浏览器. 模板包含安装说明,并包含测试数据. 本模板基于DEDECms 5.7 UTF-8设计,需要GBK版本的 ...
java手机界面太小_手机端页面在项目中遇到的一些问题及解决办法
原标题:手机端页面在项目中遇到的一些问题及解决办法来源:键盘上的眼泪 segmentfault.com/a/1190000015178877 1.解决页面使用overflow: scroll在iOS ...
Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 W3C标准盒子模型和IE盒子模型的区别 Bootstrap4--新闻管理手机端页面菜 ...
[html] 如何禁止手机端页面缩放？
[html] 如何禁止手机端页面缩放? <meta name="viewport" content="user-scalable=no"> 个人简介 ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
html5手机端页面缩放问题的解决
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

手机端页面测试神器--Browsersync

需求点

安装

启动 BrowserSync

手机端页面测试神器--Browsersync相关推荐

最新文章

热门文章