常用浏览器开发工具简介

作为网页开发者，大家对浏览器的bug头痛不已，浏览器的开发者们也认识到了这一点。幸而大家常用的浏览器也有了各自的开发者调试工具。以下就笔者自己常用的调试工具一一作介绍。 1.IE developer tool 作为IE的创始者，微软早在07年就发布了自家的这款调试工具。对于那些为IE下的bug而苦恼的开发者来说，这无疑是把利剑。从微软的官方网站下载以后，打开IE浏览器，IE developer tool就在工具菜单下，一个蓝色的箭头。或者你也可以按下F12键快速启动，整个界面十分简洁。在代码视窗里，鼠标点击元素名称或者属性，可以对其直接更改。右侧的布局(layout)窗口中，可以清楚的看到元素的盒模型(box-model)结构，如果页面的预览效果跟其他浏览器不同，你或许从这里就能找到症结所在。IE developer tool下载

IE开发者工具条

2.IETester

ietester

IETester作为独立的第三方调试工具，它的出现要比微软自家的IE developer tool还早,我在猜想，或许是微软看到了IETester，才萌生自己开发的念头吧。不过，IETester使用起来一点也不比IE自带的逊色,其特点就是能依次打开IE的不同版本，从IE5.5一直到IE9(IE9需要vista以上的系统才支持)。而且它本身也有调试工具debugbar，如果你有安装，那么在你的IE浏览器的工具栏中也能看到它，这样配合IE也是不错的选择。 3.Firebug

firebug

谷歌一下，发现搜索firebug的结果达到200百万之多，这也足够证明这只人见人爱的小昆虫有多fire！莫非它的开发者很有先见，才给起了这么“火”的名字？在认识chrome之前，我一直被它深深吸引着，虽然我不是firefox的忠实粉丝。firebug的启动热键也是F12，比较方便。 4.Opera Dragonfly

Opera Dragonfly

从名字我们也能看出，它应该是个小巧玲珑的工具，暂时就叫它小蜻蜓吧！作为浏览器调试工具的新秀，Opera对它的宣传貌似有些低调了，只有在Opera的网站才看到对它的赞赏。不过最近，在w3ctech的公告上看到了一则关于小蜻蜓的调查，看来，小蜻蜓的开发者还是用了心的。与其他工具相比，小蜻蜓的特色是具有远程调试功能。此外，她还带有颜色选取器和屏幕放大镜两大功能，对于网页设计者来说，也是不错的好东东。 5.Chrome developer tools & Safari web inspector

Chrome 开发者工具条

我之所以把它们俩放在一块，是因为它们的界面很像，都内置在浏览器中，而且它们和小蜻蜓的快捷键都是Ctrl+Shift+I，不知道这是否仅仅只是一个巧合。我的win版Safari上的调试工具看起来就像是chrome调试工具的汉化版，所以偶尔会两者换着用。它们的共同特点是对页面上的每种元素(这里指的是页面代码、图像、样式表、脚本、动画等等)都有详细的分类，以及加载时间的分析，这样对于页面优化也是十分有用的。 6.Internet Explorer Collection 不愧为collection，从IE1.0到IE8.0一个不缺。以前安装过一次，一方面想见见传说中的IE早期版本，出于自己的好奇心，同时也不用去安装什么虚拟机了。结果倒好，把我系统自带的IE浏览器给弄坏了，结果一气之下就将其卸载了。 总结：以上这些调试工具，仅仅是工具而已，在页面布局前，先有个大概思路，coding起来就会盛世很多。另一方面，如果你有足够的coding经验，就不需要这些工具了。 via：baihe107

标签:浏览器浏览器相关开发工具