浏览器开发工具的秘密

快捷方式：

开发工具会不断完善，在开发版可以体验。chromecanary是chrome实验版，canary和chrome可以同时安装。你可以通过chrome://flags进一步加强你的chrome开发工具，启用“enabledevelopertoolsexperiments（启用开发工具实验）”。不要忘了点击页面底部的“现在重启”按钮。

firefoxaurora提供firefox最新特性预览。不幸的是，aurora不能和firefox同时打开。

webkitnightly是safari测试版，因此有些不稳定。webkitnightly可以和safari同时运行。

operanext是opera最新改良版，会提供一些新的功能和特性。

现在浏览器的发布周期为12周，浏览器自动更新，变化是增量的。

有时候不想让我们的工具在屏幕底部，大部分的开发工具提供了配置选项。

chrome开发工具，左下角图标允许改变停靠设置。快速点击它，会在底部和右侧切换。长按可以选择停靠选项（独立窗口打开），你也可以点击并拖拽移动开发工具。

firefox和safari开发工具，停靠选项在右上角临近关闭按钮的位置，可以新窗口打开。

要改变停靠位置，可点击左上角小虫子，选择firebug界面位置（上/下/左/右）。firebug右上角可以快速选择：最小化，新窗口，关闭。

当调试移动站点的时候，停靠在右侧可充分利用空间，并且可以快速调整浏览器视口和开发工具的宽度，调试不同网页宽度。

在chrome开发工具左下角，点击按钮可切换下侧或右侧停靠位置。

在chrome开发工具右下角，点击并选择“general”标签，你可以改变工具的外观，停靠右侧时可以垂直显示面板。

chrome的快捷键列在设置菜单里，点击右下“齿轮”图标，可以看到“shortcuts”标签。

ie的快捷键是在线的.aspx)。

opera的快捷键也在设置按钮里。

不必用alert时，console.log()是个极其有用的输出调试工具；

console.log()是printf风格，因此你可以这么做：console.log("%sis%dyearsold.","bob",42)。

可以用console.info()输出提示信息；console.debug()输出调试信息；console.warn()输出警示信息；console.error()输出错误信息。

你还可以用%c模式，把第二个变量作为样式格式参数。例如：

1