手机端远程调试-Browsersync

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

具体其他配置比如更改端口等可以看官网

http://www.browsersync.cn/