Firefox 10上的开发工具与Chrome更相似

Firebug现在已经演变成Firebox上JavaScript开发者的控制台了；近几年，大多数的Web开发都或多或多少地用到了Firebug。伴随着HTML5的流行，越来越多的开发者期待在浏览器的工作台中嵌入更多的功能，而Firefox在这一方面大有作为。除了Google Chrome，Opera和Microsoft IE也都加大了浏览器控制台的开发力度，但是Firebug在这一方面已经占据了明显的优势。

Mozilla最近推出了Firefox浏览器的一个重要版本——Aurora，在Aurora内置的开发工具中至少添加了一个新功能，该功能和Chrome上的功能非常相似：是一个叫做“bread crumbs”的工具条，用来以DOM的方式展示页面各个部分之间的关系，当你点击页面中某个区域的名字时，可以将相应的部分独立于浏览器呈现出来。

几个月以前，Mozilla在Firefox的内置开发工具中添加了一个新功能，帮助开发者将特定的元素高亮或者以特殊的格式显示出来。使用Inspect功能（Ctrl + Shift + I），开发者可以通过在显示页面上移动鼠标查看鼠标所指元素的代码信息。在Inspect模式下，高亮的元素会显示在一个独立的窗口中。当开发者找到需要修改的元素后，可以用鼠标点击该元素，代码窗口就会停留在这个元素的代码上了，这时，开发者就可以在HTML窗口中任意修改这个元素的信息了。当你想要修改下一个元素时，需要点击右上角的白色”X”选项，退出上一个元素的修改工作。

最新的Aurora上改进了这一功能，虽然有些想法是借用了Chrome上的做法。当你按下Ctrl + Shift + I后，新的bread crumbs工具条将显示在页面下方。你鼠标所指的地方仍然会变成高亮，但是会在上方增加一个标识表示相应元素的名称或类型。你可以通过点击bread crumbs列表选择高亮某个元素。通过选择左下角的Inspect按钮，可以重新回到动态选择模式。

新的Aurora上，源码不再放在一个单独的窗口中显示，而是被放到一个可伸缩的窗口中了。当你选择HTML按钮后，将会出现一个单独的窗口显示页面的源码；而当你选择Style按钮后，将会在右边出现一个CSS导航窗口。这两个窗口的大小是可以任意缩放的，从而帮助开发者节省空间。

Mozilla尝试将Web Developer控制台（用来生成报告信息）从活动窗口的底部改到顶部，在当前这个版本中，Mozilla默认将这个控制台放在窗口的顶部。通过选择Position 按钮，开发者可以将控制台移动到窗口的底部，或者直接将它放到一个独立的窗口中显示。虽然开发者可能同时用到这些窗口，但是将所有的窗口全部显示出来多少还是显得有些拥挤。

文章来源：Built-in Dev Tools in Firefox 10 Look More Chrome-ish

 译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的QQ群：193775364