文章来源：https://blog.csdn.net/angularwq/article/details/79401098

移动端页面调试神器-browser-sync

1、静态页面调试

browser-sync 依赖node.js。

命令行上敲入下面的命令，全局安装上browser-sync：

  npm install -g browser-sync

安装完成之后，我们就可以开始启动调试了。

在调试之前， 我们需要把确保测试用的手机和本地开发的机器同处在一个局域网中 。

启动调试我们分两中情况进行处理：

A、本地没有搭建服务器环境的

针对单纯的静态页面，我们需要使用到browser-sync 的 --server 命令。

假设我的静态页面都在C:/wamp/www/openadmin/style/html/目录下，

通过控制台进入到C:/wamp/www/openadmin(即把改目录当初server的root目录)，敲入下面的命令：

browser-sync start --server --files "style/html/*.html"

即可看到本地服务器的启动。

地址栏输入 http://localhost:3000/style/html/module.html即可看到该页面。

二:

如果在项目根目录，则:

 browser-sync start --server --files "index.html"

备注：两种的区别在于文件的路径，对应修改文件路径即可！

B、本地已经搭建了服务器环境的

我在本地搭好服务器，设置了vhost local.openadmin.com 指向 C:/wamp/www/openadmin/目录

这时我只需在控制台敲入下面的命令：

browser-sync start --proxy local.openadmin.com --files "style/**"

即可启动服务。

地址栏输入 http://localhost:3000/style/html/module.html即可看到该页面。

尝试过程中遇到的问题

问题：无法监听引入css或js的变化。
解决：监听该项目下的所有文件

//例如在项目根目录
browser-sync start --server --files "./**"