IE9开发人员工具 Developer Tools 的新功能

欢迎您访问我爱IT技术网，今天小编为你分享的是IE技巧方面的电脑教程：【IE9开发人员工具 Developer Tools 的新功能】，平时在使用IE浏览器上网的时候，总会遇上这或那的问题，那本文就针对这些日常的问题收集并整理成IE技巧分享给大家！

IE9开发人员工具 Developer Tools 的新功能

昨天把工作用的笔电整理了一翻，也同时安装了IE9 Beta浏览器，还蛮简洁有力的说～不过开很多网页会跑掉！包括点部落的编辑器，在此也顺带分享一个小技巧，如果使用IE9发现网站有变形的错误可以点击浏览器网址列旁的相容性功能 ，便可以IE8的方式来浏览网站。

说到IE的开发者工具(Developer Tools)可说是对网站设计者而言相当具便利性的一项工具，以往IE8的时候就相当的好用了，可以透过其中的来查看网站上的框架或点击查看网站的相关Html & Css等内码，甚至处理大型的javascript文件，浅显易懂的画面帮你分析出复杂的css，一目了然。<>

然而这样的设计对小萤幕或笔电的使用者来说有一定程度的不便利，画面太小而无法自由的点击，再者，也无法在同一画面上观看，必须要切换来看，这次IE9相当贴心的改善了这个小缺点，将其合併在浏览器下方，方便同步检视。

你可以透过浏览器右上角的tools(Alt + X)来开启Developer Tools，或是用热键 F12 直接开启 :

是不是挺方便的呢？其实这个概念在另一个工具 Httpwatch 早就有了，以往都是IE8搭配着Httpwatch使用，现在IE9直接吸收他的功能于新的

Developer Tools上，这是一大进步。

Network Tab

这是新的功能键　 你可以在Developer Tools上方的工具列中找到它，它的功能与httpwatch

的功能相彷，主要是查看网站流量，使用的method，所在URL...等多项便利查看。

首先先按 之后重新整理你要查看的网页，他就会将网页资料都截取下来，得到以下网页资料　：

这是初步的资讯，接着按上方工具中的　 按钮查看详细资料　：

这裡可以得知更多你想要的资讯，在此介绍一下小弟蛮喜欢的一个功能是Response Body这个按钮：

它可以帮助你得知图片的详细资讯（大小长宽等），还可以下载或查看完整URL，对于不是图的元件也会提供相关的内容供查看，个人觉得相当好用。

如果单看不过瘾，就下载起来以便日后查看哦，可以选择两种保存方式。

其实Developer Tools很好上手的，而且用过之后肯定爱不释手，在此不多作介绍，有兴趣的快去开来玩玩吧！

当然还有其他很多这类web debugger的工具如Fidder,Httpwatch..等，总之呢，找到顺手的工具，开发更便利。

via:Shinyo

关于IE9开发人员工具 Developer Tools 的新功能的用户使用互动如下：

　　相关问题：关于360极速浏览器开发者工具的问题

　　答： 加一个这个meta标签就可以了 因为360浏览器是双核的,但是它默认是用IE内核去解析网站,只有加上这个meta标签,才会用谷歌内核去解析 >>详细

　　相关问题：office工具包括哪些，各个工具的用途是什么？

　　答：Microsoft office 概述 Microsoft Office 是一套由微软公司开发的办公软件，它为Microsoft Windows和Apple Macintosh操作系统而开发。与办公室应用程序一样，它包括联合的服务器和基于互联网的服务。最近版本的 Office 被称为“Office system”而... >>详细

　　相关问题：IE6 开发人员工具 怎么打开 快捷键是多少？

　　答：IE6IE6由于没有集成开发工具 ，需要下载以下的辅助软件后才可进行： Companion.js 这个可以调试js JavaScript inspector 调试js IE Develop toolbar 可以看到页面的css 和dom对象 http(s)/ajax viewer dom inspector IE WebDeveloper 下载地址：... >>详细