当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

IE8“开发人员工具”使用详解(上)(附相关下载)

时间:2010-8-24 10:24:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要: IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测,然后给出什么“Chrome运行javascript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少...
D6电脑网 (d6pc.com): IE8“开发人员工具”使用详解(上)(附相关下载)-网页制作

IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测,然后给出什么“Chrome运行javascript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少?我只知道:当windows7发布的时候,IE8浏览器的市场占有率将让前台开发人员无法说:“不用去管IE8,没有几个人在用它”。所以,这篇文章将会非常务实的讲解一下,IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时,我们会延伸一些相关的资料和知识。所以,请抛弃你对IE8的偏见,耐心的看下去吧。

你还没有安装IE8?

如果你是前端开发人员,那么还请你安装一下这玩意吧。因为正式版已经发布了。不同于以前的beta版,这次咱得认真的关注一下它了。去下载并安装一个吧,下面是下载地址——

IE8中文版下载列表

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-bit
Windows Vista 64-bit
Windows Server 2003 64-bit
Windows Server 2008 64-bit

IE8英文版下载列表

Windows XP
Windows XP 64 Bit
Windows Vista
Windows Vista 64 Bit
Windows Server 2003
Windows Server 2003 64 Bit
Windows Server 2008
Windows Server 2008 64 Bit

哦,也许你会担心,你系统内的IE6或者IE7完蛋了。恩,的确,这有可能。但是,你可以试试下面的工具。它可以让你多版本的IE共存——

IE多版本共存的解决方案——IETester
微软网页开发调试利器SuperPreview(附下载)

认识“开发人员工具”

虽然这玩意改了时髦的名字,但是却也不是什么新玩意,它的前身是“IEdevtoolbar”。但是,以前只是IE的一个插件而已。而在IE8中,浏览器已经自动集成了这玩意,不仅改了个有点土鳖的名字,而且功能也加强了很多。

开发人员工具在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来。


IE8开发人员工具使用详解

在我们介绍它之前,我们先来说说这玩意到底能做什么?如果你只是用浏览器来浏览网站,而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。

总体来说,开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具,让你可以方便的查找页面的bug,包括html代码css代码和javascript代码。同时,他也提供了一些虽然比较鸡肋,但是还能咂咂味的小工具,例如取色、屏幕尺子等。

ok,我们已经看到它了,并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——

【文件】菜单


IE8开发人员工具【文件】菜单

【全部撤销】

以前在开发人员工具中进行的操作全部取消,并且刷新页面和DOM结构。

【自定义Internet Explorer试图源】

【试图源】真是操蛋的名词。通俗一点的说法就是:“用什么编辑器查看网页源文件”。例如:我用的就是EditPlus。

【退出】

为了不侮辱阁下的智商,这个我就不多说了。嗯,F12是个奇偶快捷键,这个顺便提一下吧。

【查找】菜单

【单击选择元素】

快捷键Ctrl+B,和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时,用鼠标点击页面上的元素时,就会选中改元素,并且列出改元素的DOM结构、css样式等信息。

例如上面的图。左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。

右面的区域显示了改元素样式信息。其中被线划掉的样式,表示该样式因为优先级不够高,已经不再起作用了。调试的时候,前面的勾可以钩掉的,钩掉的时候表示强行删除此样式。而且,每个样式的属性,用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果,非常方便。

使用过FireFox的FireBug的朋友,对此一定不会陌生。区别仅仅是:FireBug是把优先级比较低的样式排列在下方,仅此而已。

【跟踪样式】视图和【样式】视图的作用是一样的,都是用来看选中元素的样式信息。区别仅仅是:它换了个视图方式而已。具体习惯哪种视图,就看你自己的喜好了。

【显示颜色选取器】

一个简单的拾色工具。点击鼠标就可以选中颜色。不过,我向你推荐另外一个工具——《我的工作工具箱——抓色工具(ColorPic)》,相比之下,开发人员工具中的这个就太简单了。

【验证】菜单

必将引起江湖腥风血雨(谢谢小七同学提醒我这个突然忘记了的成语,唉~可能最新看的武侠小说比较少的缘故吧。但是最近好像对“娇喘连连”这类成语比较熟)的菜单。不久的将来必将产生无数的孔乙己。

【HTML】

验证页面的HTML代码。会将本页面发送到w3c的html验证工具,并得到验证报表。

【CSS】

验证页面的CSS代码。会将本页面发送到w3c的css验证工具,并得到验证报表。

【源】

验证页面的源文件代码。会将本页面发送到feedvalidator.org验证工具,并得到验证报表。

【链接】

验证页面的链接。会将本页面发送到w3c的验证工具,并得到验证报表。

【本地HTML】

打开w3c的html验证工具,对本地的页面进行验证。

【本地CSS】

打开w3c的CSS验证工具,对本地的页面进行验证。

【辅助功能】之“WCAG清单”

验证页面的WCAG(Web Content Accessibility Report-页面的可访问性)。会将本页面发送到contentquality.com验证工具,并得到验证报表。

【辅助功能】之“第508条清单”

验证页面的508 Standards。会将本页面发送到contentquality.com验证工具,并得到验证报表。

【多个验证】

同时验证对页面进行多个规范的验证。


IE8开发人员工具的集合验证对话框

对于页面的验证,我想说两句:其实页面是不是一样要通过验证才能上线呢?我个人感觉完全没有必要。如果你是学生,躺在象牙塔里面。你可以随便怎么折腾你的页面,因为你就是客户,你就是有时间。但是商业项目,完全没有必要为了一个“PASS”而浪费宝贵的项目资源。因为没有哪个客户会在乎“你看,我做的这个页面是经过w3c多方面验证的。”如果真的有客户在乎了,那么我只能说,我很崇拜你的“忽悠”能力。

敬请期待下一集

本篇文章已经简单的把开发人员工具的各个菜单讲解了一遍。相信,大家已经可以简单的使用起这个强大的工具了。

但是更为强大的功能,我们还完全没有讲到。所有,请期待我们下一篇文章吧。下一篇文章,将会详细的讲解javascript调试、浏览器模式、文本模式等功能的使用。

来源:http://www.cnblogs.com/JustinYoung




D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2019 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0