手机端页面测试神器--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:3000
    External: http://***.*.*.***:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://***.*.*.***:3001
 ------------------------------------
[Browsersync] Serving files from: ./

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

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