web开发神器——browsersync(3)：控制界面使用

前两次博客介绍了browsersync的简单使用和与gulp的集成，我们开发时关注的可能也就这些了。但其实它还有一个很厉害的功能————控制台。其实就相当于一个后台管理页面，在这里你可以对browsersync的设置进行更改，可以查看历史记录，可以调节输出网速等等。

（前方多图，流量党请注意）

话不多说，开始实战。进入项目目录下，命令行输入browser-sync start --server --files "**/*.*"。

如上图，红色圈出的就是控制台的地址，在浏览器中输入任一地址即可访问。如下图：

主功能概述

左侧功能区：

Overview            概览
Sync Options        同步设置
History             历史记录
Plugins             插件
Remote Debug        远程调试
Network Throttle    网络限流
Help/About          帮助/关于

上方功能区：

RELOAD ALL          所有设备重新加载
NEW TAB             新建一个访问页
SCROLL TOP          滚动到上方
RESET ALL           全部重置

Overview(预览)

Local 显示静态服务器地址

External 显示控制台页面地址

Serving files from 静态服务器的起始目录

Current Connections 当前连接的设备

Sync Options(同步选项)

在这个界面你可以控制是否同步相关事件在所有连接的设备中。

History(历史)

历史记录界面显示你曾经打开过的路由地址

Plugin(插件)

插件界面显示了你已经安装了的一些browsersync的插件

Remote Debug(远程调试)

远程调试界面

Remote Debugger (weinre)

基于weinre的远程调试，weinre是一个web端的远程调试工具，像FireBug一样。众所周知，移动端调试不像PC端一样，每个浏览器都有自己的开发者工具（调试工具）。移动端的调试我们只能借助于外部工具，比如weinre，单独使用weinre时，我们需要下载并安装它，同时在我们需要调试的页面中引入一段js。就我来说，我觉得第一比较麻烦，第二对代码的侵入性比较强，之前不太喜欢用。但现在有个browsersync就不一样了，打开调试开关（为了方便，上面截图中已打开），之后在你每次请求去加载静态服务器中资源的时候，它会默认把weinre相关的js插入到界面中。点击Access remote debugger (opens in a new tab)之后会显示如下图：

这便是大家熟悉的weinre的控制界面，点击页面中的target：

Elements可看原代码

Resources可看相关存储资源(Databases, Local Storage, Session Storage)

Network查看相关网络请求

Timeline查看程序耗时

Concole查看控制台日志

移动端(Hybird)均可此进行调试（电脑，手机需在同一网段下），但有时因网络或手机原因显示不出target（注意）

CSS Outlining

显示调试页面中所有元素的边框

CSS Depth Outlining

显示调试页面中所有元素的阴影

Overlay CSS Grid

添加一个格式的网格到调试页面中

Network Throttle(网络限流)

网络限流界面，你可以模拟多种网速，观察不同网速下你的网站运行情况

Help/About(帮助/关于)

结语

browsersync作为一个工具，它不仅单独运行方便，而且可以和主流的构建工具很好的集成。同时他还有用户界面，所有的操作尽在掌握之中。它解决前端开发中有关调试的大部分问题，绝对称得上是一款良心之作。

Will's blog