欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

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

首先程序员开发工具提供了IE 7, 8, 9的兼容模式,可以很方便的测试在不同版本IE下的显示效果。
IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 


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

1. HTML查看器

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

IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 


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

IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 

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

IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 

有用的设计工具

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

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

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

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

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

IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 45.1 KB
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 46.4 KB
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 13.6 KB
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 22.8 KB
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 56.5 KB
  • IE9 媲美Firebug的强大的程序员开发工具
            
    
    博客分类: Web开发 FirebugCSS网络应用IE浏览器 
  • 大小: 38 KB