IE9 媲美Firebug的强大的程序员开发工具

Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，比较突出的是Firebug。不过Microsoft推出的IE9中，也有一个很闪亮的程序员开发工具，它的强大程度简直可以和firebug媲美，为使用IE的Web开发人员提供了同样便捷的调试工具。

在安装IE9之后，先用IE9浏览器打开需要测试的页面，使用快捷键F12唤出程序员开发工具，它会将当前页面分成上下两个框架，也可以独立显示在一个窗口里。

首先程序员开发工具提供了IE 7, 8, 9的兼容模式，可以很方便的测试在不同版本IE下的显示效果。



在界面上，程序员开发工具兼顾的FireBug的布局，也有6个主要的Tab按钮：HTML, CSS, 控制台，脚本，网络。下面逐一做一介绍。

1. HTML查看器

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。配合其自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果。




IE9程序员开发工具对CSS开发十分友好，被重写的属性在CSS Style中会以删除线标示，一目了然。有时候我们需要从别人的页面里借鉴灵感，你可以从菜单里选择查看--》类和id信息，浏览的页面上就会显示出所有的CSS类和id，可以很轻松地看到是哪一个CSS类做出如此的效果。



和firebug类似，在html面板中，选中一个div，在浏览器页面中，都会以蓝色框来高亮显示，你也可以直接在开发工具中对CSS属性和html做出修改。



有用的设计工具

在菜单“工具”下，为开发人员提供了许多有用的工具，比如色彩选择器，可以方便的从屏幕上截取色彩，从别人的站点上偷师学艺。比如重新调整大小，可以让你测试页面在不同屏幕size下的结果。

更有用的是CSS标尺。我们可以利用CSS标尺查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

网络状况监视器
也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。ie9的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

评论

7 楼 realyasswl 2014-07-15  

ie sucks

6 楼 烬难烬 2012-08-16  

这就没了？？？我去．．．．

5 楼 glamey 2011-04-07  

IE9说实在的，我挺喜欢他的功能，但是不喜欢他的菜单栏。头部的标题栏目布局太差了。应该模仿下chrome或者FF

4 楼 pml346680914 2011-03-26  

学了,,,感觉ie9这个调试工具确实做的可以。

3 楼 orcl_zhang 2010-09-18  

引用

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。

引用

IE9程序员开发工具对CSS开发十分友好，被重写的属性在CSS Style中会以删除线标示，一目了然。有时候我们需要从别人的页面里借鉴灵感，你可以从菜单里选择查看--》类和id信息，浏览的页面上就会显示出所有的CSS类和id，可以很轻松地看到是哪一个CSS类做出如此的效果

引用

更有用的是CSS标尺。我们可以利用CSS标尺查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

verygood。。
我在为firefox担忧啊。。

2 楼 night_stalker 2010-09-17  

IE9 的优点：可以调试一个换行符被删掉的页面（所有东西都在一行的诡异东西 ……）
IE9 能正确标出一行中出错的位置，而 firebug 和 chrome 都只能说这行错了 ……

1 楼 geminiyellow 2010-09-17