所有这些都很好，但让我们假设一下，你已经花了10分钟对CSS进行了各种编辑，然后呢？你怎样保存这些修改呢？要保存修改，就要点击选择器的文件名（或者你自己到资源面板中找到相应的文件），接下来鼠标右击该文件（该文件将更新以反映那些修改操作），然后就可以点击“Save As”菜单覆盖你已有的文件了。个人经验，我发现选择文本并将其粘贴到我的编辑器中速度更快而且还不容易出错。 最后在CSS编辑方面要注意的一点是：如果你添加了新的选择器（通过敲击“＋”键），那么该选择器不会被保存到文件中，因为Inspector不知道要将这个新选择器保存到哪个CSS文件中。
Metrics（尺寸大小）啧啧，一下子说了这么多内容！花点时间摆弄摆弄这些东西吧。摆弄的差不多了，我们就来看下一项内容：Metrics。如果你还不熟悉CSS的盒子模型（Box Model），那就先去看看这篇非常棒的指南。 Metrics部分显示的是浏览器是如何按照内容的尺寸、填充空间（padding）、边框（border）和边距（margin）来渲染（render）节点的。这个工具用来调试位置/尺寸问题。 Metrics面板有一个非常好用的小技巧，覆盖在所选节点之上的那个半透明的蓝色盒子可以用来显示出填充空间和边距，从而帮助你看明白盒子是如何影响流（flow）的。  蓝色部分表示的是内容，绿色部分是填充空间，橘色部分是边距。 我们暂时先跳过属性和DOM断点这两个部分。我还没发现属性部分有什么用处，DOM断点显示的是鼠标右击节点后选定的各种“Break on …”动作。我们在Elements面板中最后要讨论的就是事件侦听器部分。 如果你为选中的节点添加了任何事件侦听器的话（用JavaSctip或者HTML的属性都可以添加），你就能在这里看到所有你所添加的侦听器。这个部分便于你想调试一个侦听器是否正确的添加到了某个节点上，还能帮你了解当侦听器得到调用后会发生什么。 单击小标题右侧的漏斗图标，可以在查看所选节点的侦听器和整个文档的侦听器之间进行切换。如果你的侦听器添加到了无法在主列表中进行选择的东西（比如window和document）上时，会非常有用。 你的HTML和CSS看起来表现不错，并且你写了不少的JavaScript代码，使用了文件系统API、IndexedDB、LocalStorage、应用缓冲区（App Cache）以及Cookies。资源面板就是用来让你所有这些存储资源进行检视和调试的。里面大部分的东西或多或少都几乎相同，也都相当的不言自明：单击一类资源就能看到一个项目（item）列表，一步步点击深入进去就可以找到你的数据。 里面的叫做“Frames”的第一项需要注意。它包含了你的应用中的所有frame，每个frame都按照图片、脚本和样式表分组列出所有资源。实际上，我深挖Frames列表的唯一的原因，就是去找我所编辑的样式表文件，然后把文件的内容拷贝粘贴到我们的编辑器中进行保存。 调试网络问题时，直接可以用网络面板。图片文件没有更新？网络面板会告诉你它是不是从缓存加载的。XHR（异步请求）没有响应？网络面板可以告诉你它被卡住或者出错。 点击“记录”按钮（黑色圆钮），在重新加载时将维护一个网络会话，如果你想看到代码的变化如何影响网络性能。 如果你在调试性能问题，网络面板很有帮助。在右侧，你可以看到网络请求的“级连瀑布流”。如果页面花费了非常长时间加载，调试的第一步应该是查看瀑布流。蓝色和红色的竖线显示DOMContentLoaded事件的时间，意味着在该时间点之前，用户一直在焦急的等待。你需要尽量减少该时间。 |
