如何使用browsersync工具实现页面的多浏览器和移动端设备的调试

一、首先附上官方网站供下载，下载和安装教程官网有详解，请自行参考：http://www.browsersync.cn/

注意：1.在命令行工具中安装（windows系统下，mac系统好像不会出现问题），如果安装不成功，出现Error报错，请参考

“nodejs安装任何模块失败问题-error Windows_NT 6.1.7601”解决程：http://blog.csdn.net/u013474104/article/details/52197772

二：步骤：

1.安装成功如图所示：

2.如果调试页面为静态页面，只是单纯的css样式文件或者html页面，在当前需要调试目录下，打开命令行，输入命令：（具体文件名的书写格式可以参考官网教程）

browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

*表示所有文件。不同文件之间用“，”隔开。

3.如果调试页面为动态页面，包括一些php文件在内的动态页面，同样在调试目录下，在命令行中输入命令：

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

主机名可以在命令行中，输入ipconfig/all查找。我调试的时候文件名直接输入"*.html"，就可以查看本地服务器中的项目文件。选择性查找。

4.回车命令，会在命令行中弹出

这是静态页面。

这是动态页面。

就是本地和外部的地址。

5.浏览器中输入本地地址，会在页面右上角提示contented To BrowerSycn,，跳转到调试页面。

6.保证手机和电脑在同一网络下，连接统一WiFi即可。

7.在手机浏览器地址中输入外部地址。手机中就会显示调试页面。此时，电脑和手机的页面回事同步的，可以根据手机上页面的呈现效果来进行样代码优化。

8.可以同时在多个不同的浏览器中打开进行不浏览器兼容性的调试。

9.iphone用户手机端调试建议使用Safari浏览器。

好了，很简单的过程，希望对您有用。