网络选项卡

网络(Network)选项卡显示你页面加载的所有文件资源。大多数情况，你打开它之后，要刷新一下页面才能显示出你想看的信息。在Firebug中，选项卡的名称是“Net”。对于IE，直到版本9以后才有它。

禁用浏览器缓存

所有浏览器–每个浏览器都可以禁用缓存，但禁用的方式不一致。

在Chrome中，点击开发工具右下角的齿轮图标进行设置。在Firebug中，设置位于网络选项卡旁边的箭头下拉菜单中。在IE中，设置位于菜单栏的存菜单项。

在Opera中，要清除缓存的话，点击网络选项卡，选择网络选项中的第二个选项卡，选择其中的第一个选项。在Safari中，在菜单栏中的“开发”菜单中禁用缓存。

Windows中，在浏览器中可以按下Ctrl + Shift + Delete键调用消除缓存对话框。

*译注：Opera中我根本没找到，只有设置/历史选项卡可供设置。

延迟

所有浏览器–网络选项卡允许你查看服务器响应一个请求花了多长时间。每个资源对应的浅色填充部分表示请求是何时发送，并且何时返回的。深色填充部分表示资源是何时下载的。在Chrome中，你可以用悬停在每条时间线上以获得消耗时间的具体信息。

在Opera中延迟表示的原则是一样的，除了它用的是灰色的线条，而Chrome是浅色填充。

在IE中，延迟被标记成黄色，并且悬停到时间线上也会取得更多信息。

在Firebug中，延迟被标记为紫色，并且用的术语是“Waiting”。悬停到时间线上同样能获得各方面时间消耗的详细信息。

DOMContentLoaded 和load事件触发

Chrome，Safari – Chrome和Safari中网络选项还展示了两项额外的信息，DOMContentLoaded事件触发的时间用蓝线表示，load事件触发的时间用红线表示。

DOMContentLoaded代表的那条线表示当浏览器已经完成解析文档(但其他资源比如图片和样式表可以还没下载完成)，而load事件代表的线表示所有资源都已经加载完成了。

如果这两个事件同时发生，这条线会显示为紫色。

其他

崩溃

所有浏览器–有时我发现开发者工具会崩溃，或鼠标点击时会失去响应。我也经常发现使用键盘快捷键关闭再重新打开开发工具可以修复这个问题，而不需要去关闭整个浏览器再重新打开。

我希望这些特性和秘密对你有所帮助。我故意没有在这个列表中包含性能分析和远程调试的内容，那将是我后续文章要讲到的了。欢迎您在评论中反馈、挑错，或留下你的技巧。