前段时间安装了Win7,使用一段时间后感觉不错,也推荐同事们安装了。

在使用自带的IE8正式版的时候发现一个好东西-开发人员工具,功能上跟FireFox下的firebug类似,有些功能甚至比firebug更加强大,美中不足的就是它的性能实在是不敢恭维,若比尔大叔能够在下一版本中改善的话就好了。使用了一下,感觉还是不错的。写下一些使用体会与大家分享,如果您是一位WEB前端开发者,并且想了解一下这个工具,请往下看,一般用户就不用看啦~

提供一下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之后,您的系统之前自带的老版本IE就不能用啦

首先我们来了解一下这个工具。我百度了一下这个工具,原来它的前身是“IEdevtoolbar”,IE的一个插件。现在直接集成在了IE8中,并取了个比较牛B的名字。在功能方面,比起以前的IEdevtoolbar有了很大的增强。

这个工具在“工具”菜单栏下。IE8默认隐藏了菜单栏,可以按下ALT键让其显示,或者直接按F12快捷键呼出这个小工具。

开发人员工具是为前端开发人员开发页面而设计的工具。提供了一系列的功能方便WEB开发,比如HTML、CSS、JavaScript代码调试、取色、屏幕尺子等。

ok 我们已经看到它长什么样子了,接下来,我们就根据它的菜单顺序来一探究竟吧。

文件菜单

【全部撤销】

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

【自定义Internet Explorer视图源】

设置使用什么工具来查看网页源文件。

【退出】

这个就不用说啦

查找菜单

【单击选择元素】

或者直接点击左边白色箭头区域。

这是一个奇偶开关,打开时,用鼠标点击页面上的元素就会选中改元素,并且列出改元素的DOM结构、CSS样式表等信息。

如上图所示,我们选中了一个ID为mastheadhd的DIV标签,从展开的树形结构中我们很容易的就能看到这个元素的父元素子元素等信息,在右边列出了他的样式,其中划横线的样式表示这个样式已经被另一个优先级高的样式所覆盖,已经失效。调试的时候可以将样式前面的勾去掉,表示强行禁用此样式。而且每个样式的属性都可以在鼠标点击后立即修改。从而即时看到修改的结果,非常方便。

【跟踪样式】

视图和【样式】视图的作用是一样的,都是用来看选中元素的样式信息。区别仅仅是:它换了个视图方式而已。

【布局】视图

显示选中元素的盒模型信息

【属性】视图

在属性视图中我们可以查看选中元素的属性信息,并且可以任意增加或者删除一些属性以便快速调试页面。注:在开发人员工具中对页面的更改只是暂时的,并不会更改你的网页内容。

禁用菜单

【脚本】

会禁止使用页面的JavaScript 或VBscript脚本。为什么要禁用呢?为了测试页面的健壮性。这个功能是方便测试在浏览器禁用脚本的情况下页面的工作情况。

【弹出窗口阻止程序】

用来测试那种不让浏览器或者安全软件屏蔽的弹出窗口

【CSS】

测试页面在不加载CSS样式时候的页面情况。一些比较简陋的手机浏览器可能不支持CSS,所以这个功能还是有点用处的。

查看 菜单

【类和ID信息】

打开后可以查看类和ID名称,这个似乎不太好用

【链接路径】

功能跟上一个类似,突出显示链接

【链接报告】
使用链接报告功能,开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。

【选项卡索引】
高亮显示出所有包含tabindex属性的元素。tabindex属性的设置,可以改变网页元素获得焦点的顺序。

【访问键】
高亮显示所有包含“accesske属性”的元素。设置accesskey属性,可以设定元素获得焦点的快捷键。

【源文件】之“带有样式的元素源”
生成一份包含选中元素样式、HTML代码,网页级别信息的源文件。
必须先选中一个元素,此命令才有效。而且生成的源文件也只与选中元素有关。

【源文件】之“DOM(元素)”
快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过FireBug的朋友,可以联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只是这个是生成到一个窗口,而FireBug直接复制到剪贴板而已。

【源文件】之“DOM(页面)”
快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的功能,不知道是不是因为bug的原因,此功能其实就是“查看网页源码”。因为,生成的源码并不仅仅是DOM信息,也包含CSS和脚本信息等。

【源文件】之“原始状态”
极其操蛋的功能,其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。

转载于:https://blog.51cto.com/seanli888/181217

IE8-开发人员工具使用(一)相关推荐

  1. 利用IE8开发人员工具调试JavaScript脚本

    很多朋友梦寐以求的功能呀--JavaScript脚本调试.一直摆脱不掉FireFox,就是因为Firebug实在太好用.虽然 利用VS这样航母级的软件也能进行JavaScript脚本的调试 .但是,很 ...

  2. IE8“开发人员工具”使用详解上(各级菜单详解)

    http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html 你还没有安装IE8? 如果你是前端开发人员, ...

  3. IE8开发人员工具资料

    IE8相对以前的版本还是"改邪归正"了很多,居然提供一个很好用的开发人员工具,着实要夸一夸的,作为使用者我们还是要认真看看这东西怎么用,以便能为己用,网上资料很多再次整理一些. I ...

  4. IE8“开发人员工具”(下)

    浏览器模式 说白了,就是让用户选择当前页面用何种IE版本去渲染. 文本模式 说起"文本模式"这个名词,这又要回到渲染页面的3种模式了:诡异模式(Quirks mode,也有翻译为兼 ...

  5. IE8开发人员工具使用详解下(模式,JS调试,探查器)

    在上一篇文章IE8"开发人员工具"使用详解上(各级菜单详解)中,我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法,相信很多朋友应该已经使用上了.而IE8开发人员工具更强 ...

  6. IE8开发人员工具,让web开发的客户端调试畅通无阻

    之前下载了ie8用了一下,没有太关注ie8的开发人员工具功能,稍稍试了一下,发现ie8的开发人员工具真是一个好东西.它可以大大提高客户端的开发调试的效率. 我从html元素,css,javascrip ...

  7. 实战 IE8 开发人员工具

    今天整理我收藏的漫画的时候发现 风云3 少了两集(486.487),这对于收藏者来说基本是不可忍受的: 从风云一到三,应该一集也不能少的: 决定上网去找找,不过溜达一圈常去的分享论坛,由于时间太长了而 ...

  8. ie8开发人员工具无法使用,按f12任务栏里出现任务,但是窗体不弹出

    楼主解决了么,刚出现你这样的问题,找了N久,终于解决了, 他娘的,偏方啊 任务栏不是出现那个箭头么,点击后没反应是吧 在缩略图上点右键-最大化,然后就出来了, ctrl+p反正是可以出来调试模式 神人 ...

  9. IE6,7,8开发人员工具使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    在上一篇文章IE8"开发人员工具"使用详解上(各级菜单详解) 中,我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法,相信很多朋友应该已经使用上了.而IE8开发人员工具更 ...

  10. IE8 的开发人员工具 出不来了 怎么办?

    IE8 的开发人员工具挺好用,就是有时候出问题, 主要症状是:点开该工具的时候,在工具栏有图标,但是点击没法展现出来, 原因:由于未知原因,开发人员工具的窗口大小被设置成0高度,而且位置被设置到了屏幕 ...

最新文章

  1. PHP之preg_replace()与ereg_replace()正则匹配比较讲解
  2. oracle 日期格式转换 ‘ddMONyyyy’ 'ddMMMyyyy'
  3. 天梯赛 L1-023 输出GPLT (20 分)
  4. java 计算26个字母在一段文本中出现的频率(保留小数点后4位)
  5. 【6.0】组合主键映射
  6. java fork join demo_Fork/Join框架 demo
  7. mysql存储数组类型的数据_mysql中怎么存储数组
  8. HPC:鱼与熊掌可以兼得
  9. 最全的测试计划模板参考
  10. ASP Err.Number 错误描述详解
  11. 【数学】海 盗 埋 宝 pt.2
  12. 电子计算机的发展世代
  13. iOS 集成腾讯云聊天 最新sdk使用方法
  14. HHUOJ 1067 吃一吃
  15. 通俗理解计算机操作系统的作用
  16. android中api简介
  17. 信息安全技术 个人信息安全规范
  18. 安装nginx-1.19详细步骤
  19. jieba:我虽然结巴,但是我会分词啊
  20. 算法-发明KMP算法的唐纳德·克努特是怎么想到失配函数next[j]的?

热门文章

  1. 安全测试-抓包工具BurpSuite
  2. jQuery EasyUI API 中文文档 - 链接按钮(LinkButton)
  3. PMcaff-活动| 产品经理免费培训最后一批通过名单公布啦!
  4. 【pmcaff专栏】吴波:浅谈O2O行业的猎人与农夫
  5. 【转载】ubuntu下/usr/bin和/usr/local/bin的区别
  6. 一个插排引发的设计思想 (一) 观察者模式
  7. fsLayui缓存使用
  8. 调查:Android的领先地位稳固
  9. 使用Maven构建Dubbo服务的可运行jar包
  10. 概念理解#1 第一类公民(First-class Citizen)