iuap-design/blog

Browsersync 调试手机端样式

whizbz11 opened this issue · 1 comments

whizbz11 commented

安装

在终端里输入：
$ 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调试还不支持、

songhlc commented

手机端调试android chrome://inspect 支持的蛮好的，可以用chrome进行调试（不过貌似第一次需要翻墙下插件）。ios 还是需要mac safari的支持 。之前有一份h5手机端真机调试的文档，什么时候我分享上来