过去几年来，浏览器开发工具一直是Web开发者最得力的工具。它能够与Web浏览器和谐相处，允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript，以及获取一些其他的有用信息。

以前开发者使用Firefox的一个名叫Firebug的扩展，来开发和调试他们的网站。但是最近，各个浏览器都开发了一套它们自己的工具，并且每一个都有自己的优势和劣势。如今很难想像没有这些方便的工具，如何来构建一个网站。

激活开发工具通常是按下“F12”键(Mac系统为 Cmd + Option + I )，或通过右键点击页面，选择弹出菜单中的“审查元素”。

SafariDeveloper Tools集成 (默认关闭)Overview

你充分发挥了这些工具的潜力吗?开发工具最大的特点就是很容易使用，但结果就是开发者们常常错过了它们所提供的大部分功能。受到Paul Irish 和 Pavel Feldman 视频谈话的启发，我列出了一个有关开发控制台“秘密”的列表。我不指望它们中的每一个都对你来说是未知的，只希望它们中的某一些能够有助你成为一个更好的Web开发者。

如果你有更多的“秘密”，请自在地在文章末尾留言——一旦我确认了，我会及时更新这篇文章。我也很想知道你哪个开发控制台是你首要的开发工具，也可以直接在下面留言。

控制台选项卡

引用当前元素

Chrome, Firefox, Opera, Safari – 如果在“元素”选项卡中，你有一个元素正被选中的话，你可以通过引用“$0”来你的代码中调用它。比如，为了看到你选中元素的内容，你可以输入 “$0.innerHTML”。在Chrome和Safari中，你可以通过按下“Esc”键，立即从其他选项卡切换到控制台(开发工具打开了的情况下)。在Firebug中，控制台通过点击选项卡左侧的图标，或按下Ctrl + Shift + L 来切换(Mac 下是 Cmd + Shift + L )。

在Opera中，你可以用“$1”往前引用元素。在Chrome和Safari中，你可以用“$1~$4”往前引用元素。

使用console.log同时输出多个值和对象

所有浏览器–我们都知道，console.log()方法用来输出调试信息到控制台时非常有用，尤其是与alert相比。但是当你想要输出一个字符串紧跟着一个对象时，它输出的形式会让人生烦。比如使用console.log('message:' + $('#message'))将仅仅告诉你消息是一个对象(*译注：可能输出结果是“message:[object Object]”)，并且如果这个过程在一个循环体中的话，对象的表示让人困惑。

console.log()实际上可以接收多个参数，所以你可以同时输出字符串和对象：console.log('message:',$('#message'));或者其他你能想到的JavaScript类型组合。

你可以用console.warn()输出警告消息;用console.error()输出错误消息;用console()输出信息消息。你也可以使用console.assert()来检测表达式为true或false。

(感谢Masklinn提供了此项信息)

重用JavaScript命令

所有浏览器–如果你输入过一条命令到JavaScript控制台，并且你又想重新运行它，只要简单地按下方向键“↑”来回滚你调用过的命令就可以了。

保持

Chrome，Firefox–Firebug 控制台上方有一个很明显的“保持”(Persist)按钮，但Chrome中被稍微隐藏掉了——需要右键点击控制台，在弹出的右键菜单中选择“Preserve Log upon Navigation”选项。

*译注：保持的作用是让控制台在刷新页面后仍然保留已输出的控制台信息。

查看对象源

Firefox–Firefox支持toSource()方法，这意味着在Firebug中可以直接调用这个方法来打印一个对象的字符串表示。

改变frame

Firefox–从控制台直接运行JavaScript命令是很有用的，但是如果你页面用了iframe内容的话，就变得麻烦了。幸运的是，用下面的“cd”命令能够进入到指定的iframe环境，得以重新运行你的命令：

cd(window.frames['frameName']);

*译注：比如cd(window.frames[0])，它会进入第一个iframe的执行环境，并显示一条info消息：["Current window:", Window sample];同时，返回上层可以使用：cd(parent)