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

标签:功能开发人员工具IE9IE技巧developertools