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

在移动端网页开发中，总是因为不方便调试，导致各种问题不容易被发现。但是现在有了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"

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

1

2

3

4

// --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"

如果您对本文有什么疑问，欢迎提出个人见解，若您觉得本文对你有用，不妨帮忙点个赞，或者在评论里给我一句赞美，小小成就都是今后继续为大家编写优质文章的动力， 欢迎您持续关注我的博客:)