再看一下 Remote Debug,在这里你可以启用一些调试的功能, Remote Debugger ,就是 weinre .. 它可以让我们在本机上使用 Chrome 的开发者工具远程调试在其它设备上运行用的应用 .. 比如在你的 iPad 上打开的网页,你可以直接使用这个调试工具去调试 ..
先启用这个工具 .. 再点一下在新标签打开 .. 在 Targets 这里,点击你想要调试的目标 .. 点击我在 iPad 打开的这个目标 .. 链接会变成绿色 .. 现在,在其它选项卡上的东西,就相当于是在调试 iPad 上打开的项目 .. 比如打开 Elements 选项卡 ..
点开要调试的元素 ... 你会看到在 iPad 上会实时显示被选中的元素 ...
这里再选中一个元素 .. 再修改一下元素里的值,完成以后回车执行一下 .. 同样会在 iPad 上看到元素的值的变化 ..
再回到 Browsersync 的界面 .. CSS Outlining ,打开这个选项以后,会在页面上所有的元素的周围显示一个边框 .. 可以方便去调试 CSS .. 注意元素周围的这个边框的颜色是不一样的 ..
再看一下 CSS Depth Outlining .. 它会在所有元素上应用一个阴影的效果,你应该可以通过这个效果判断元素的层级关系 ..
最后这个 Overlay CSS Grid 挺有用 .. 会在页面上覆盖显示一些网格,你可以使用这些小格子作为参考,去对齐元素 .. 这里还有 一些选项,比如改变格子的尺寸 ... 颜色 ... 网格应用的选择器 .. 默认是 body 这个标签,你可以设置成页面上的其它的某些元素,这样就只会在这些元素上覆盖这些小格子 ..