日常记录总结

手机端远程调试-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

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

http://www.browsersync.cn/

上一篇下一篇

猜你喜欢

热点阅读