HTML5技术

PC和移动端浏览器同步测试工具Browsersync使用介绍 - Jesse131

字号+ 作者:H5之家 来源:博客园 2016-01-15 08:13 我要评论( )

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现。但是现在有了Browsersync,一切都解决了。 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网。 五分钟快速入门 1.使用Browsersync前需要安装node.js。详细的安装过程可参见w

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现。但是现在有了Browsersync,一切都解决了。

不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网。

五分钟快速入门

1.使用Browsersync前需要安装node.js。详细的安装过程可参见windows 下安装nodejs

2.安装Browsersync。打开一个终端窗口,运行以下命令:npm install -g browser-sync

3.启动 BrowserSync。

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。

首先由终端窗口进入该.css文件的项目目录,再输入以下命令行:browser-sync start --server --files "css/*.css"

如果您需要监听多个类型的文件,您只需要用逗号隔开。

// --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/*.css, *.html" // 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 browser-sync start --server --files "**/*.css, **/*.html"

此时只需要将手机连接到与PC相同的网络中,用手机浏览器扫描打开网页,即可实现同步调试。

如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    2017-05-02 12:04

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    2017-04-16 11:00

  • 浏览器渲染原理及流程 - 李某龙

    浏览器渲染原理及流程 - 李某龙

    2017-04-13 12:01

网友点评
b