【翻译】25个浏览器开发工具的秘密（更新中）

文：25 Secrets of the Browser Developer Tools
作者：Andi Smith

---

过去几年来，浏览器开发工具对web前段开发工程师的帮助比任何其他工具都多。开发工具与浏览器协调一致，让开发工程师可以实时的在同一个窗口修改DOM元素，CSS样式，JavaScript代码或者获取其他有价值的信息。
以往的开发人员使用FireFox的Firebug扩展来开发和调试他们的网站。但是，最近每一个浏览器都开发了一套自己的工具，而且都有自己的优点与缺点。现如今很难想象在没有这些方便的工具的情况下开发一个网页。通过按下F12 (Mac系统则是cmd + option + I），或者右键点击页面选择弹出框中的“检查”。

Browser Development Toolset Type Documentation Chrome Developer Tools Integrated Documentation Firefox Firebug Add-on Documentation Internet Explorer Developer Toolbar Integrated Documentation Opera Dragonfly Integrated Documentation Safari Developer Tools Integrated (Default off) Overview

But are you using the developer tools to their full potential? The biggest positive about the developer tools is that they are incredibly easy to use, but as a result developers often miss out on a large proportion of the functionality provided. Inspired by a video talk by Paul Irish and Pavel Feldman, I’ve compiled a list of “secrets” of the developer console. I’m not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer.
但是你发挥了浏览器开发工具的全部潜力么？开发工具最大的特点是很容易使用，因此，开发者经常忽视了它提供的大部分功能。