Browsersync 调试手机端样式

@whizbz11 2016-06-26 23:02:30发表于 iuap-design/blog

安装

在终端里输入:
$ npm install browser-sync gulp --save-dev
全局安装
$ npm install -g browser-sync

启动

实时刷新

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

// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"

以上实现了对css的试试刷新

动态网站

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

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

调试

  • 启动之后手机端访问http://localhost:3000页面

  • pc端访问http://localhost:3001页面

    界面操作简洁易懂。我们着重关注的是Remote Debug这一项,默认它的所有选项都是关闭的。我们开启Remote Debugger (weinre)这一项,然后点击出现的红色字:Access remote debugger (opens in a new tab),就会打开weinre的控制台界面。这个界面上会列出当前连接在BrowserSync上的客户端,我们可以选择一个目标(target)来调试

此调试有些局限,对于js调试还不支持、