手机端远程调试-Browsersync
2017-11-27 本文已影响76人
YINdevelop
1.需求由来
1.当开发一个手机端页面时候，pc上可以直接用谷歌等浏览器进行调试，但是浏览器只是模拟的，和真实的有一定差别。这时如果可以在手机端也可以远程调试就好了。
2.还有，如果产品想先看看我开发的页面，但是现在我还不想发布到服务器，怎么办。如果有一个地址，产品直接打开就可以看见页面那该多好。
2.利用Browsersync进行远程调试
1.安装
全局安装：npm install -g browser-sync，这样可以在所有项目(任何目录)中使用。
或者
局部安装：npm install --save-dev browser-sync一般使用此命令和gulpjs或gruntjs搭配使用
2.启动
监听某个文件的变动：browser-sync start --server --files "文件路径"
注： --files 路径指的是运行该命令的路径
若要监听多个文件变动，可以按如下方式
browser-sync start --server --files "目录/*.css, *目录/.html"
如果文件层级较深，则使用（表示任意目录）匹配
browser-sync start --server --files "**"
此时命令会默认打开本地端口
image
在自己的电脑访问可以使用
http://localhost:3000+文件路径
或者
http://10.0.84.116:3000+文件路径
如要在手机端使用或者让别人预览，可以使用
http://10.0.84.116:3000+文件路径
实际：
10.0.84.116就是自己电脑的ip地址，相当于用自己的ip地址加上本机开启的3000端口用于共享。
注：默认开启共享后，不同设备访问该共享地址，假如在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中。如果不需要此功能，在开启时使用下面命令（即禁用幽灵模式）
browser-sync start --server --files "**" --no-ghost-mode
可以使用
http://localhost:3001或者http://10.0.84.116:3001来访问browser的参数界面，在里面可以看见历史记录，链接的设备等信息。
测试截图如下
image
具体其他配置比如更改端口等可以看官网
