IE8“开发人员工具”(上)
2014-06-12 11:51
148 查看
认识“开发人员工具”
开发人员工具在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来。提供一系列的小工具,让你可以方便的查找页面的bug,包括html代码、css代码和JavaScript代码。
【文件】菜单
【全部撤销】
以前在开发人员工具中进行的操作全部取消,并且刷新页面和DOM结构。【自定义Internet Explorer试图源】
【试图源】通俗的说法就是:“用什么编辑器查看网页源文件”。【退出】
嗯,F12是个奇偶快捷键。【查找】菜单
【单击选择元素】
快捷键Ctrl+B,和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时,用鼠标点击页面上的元素时,就会选中改元素,并且列出改元素的DOM结构、CSS样式等信息。
左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。
右面的区域显示了改元素样式信息。其中被线划掉的样式,表示该样式因为优先级不够高,已经不再起作用了。调试的时候,前面的勾可以钩掉的,钩掉的时候表示强行删除此样式。而且,每个样式的属性,用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果,非常方便。
【跟踪样式】视图和【样式】视图的作用是一样的,都是用来看选中元素的样式信息。区别仅仅是:它换了个视图方式而已。具体习惯哪种视图,就看你自己的喜好了。
【布局】视图可以显示选中元素的盒装模型信息。
【属性】视图可以查看选中元素的属性信息。非常令人高兴的是:你可以立即增加或者删除一些属性,用来快速的调试页面。
哦,对了。需要注意的是:无论你是在开发人员工具中修改选中元素的样式还是属性,他们都是暂时的调试而已,并不会正在修改你的网页源代码。
【禁用】菜单
【脚本】
会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢?为了测试页面的健壮性。有些对页面设计要求比较高的客户会问:“如果客户禁用了脚本,这个页面还能不能使用呢?”恩,对,这个功能就是用来测试这些操蛋客户的变态需求的。【弹出窗口阻止程序】
弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。”【CSS】
“CSS裸奔节”来了!用这里来测试一下你的页面在CSS裸奔时的姿态吧。这个也是检验页面健壮性和可访问性的重要测试。虽然,现在在中国会访问网页的盲人还不是很多。【查看】菜单
【类和ID信息】
快捷键是Ctrl+I,奇偶开关。打开以后,你就会看到页面上布满了密密麻麻的红色色块。同时会显示出class名称或者ID名称。是的,这个就是查看类和ID信息的效果了。【链接路径】
和上面一样。【链接报告】
使用链接报告功能,开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。【选项卡索引】
高亮显示出所有包含tabindex属性的元素。tabindex属性的设置,可以改变网页元素获得焦点的顺序。【访问键】
高亮显示所有包含“accesskey属性”的元素。设置accesskey属性,可以设定元素获得焦点的快捷键。【源文件】之“带有样式的元素源”
生成一份包含选中元素样式、HTML代码,网页级别信息的源文件。必须先选中一个元素,此命令才有效。而且生成的源文件也只与选中元素有关。
【源文件】之“DOM(元素)”
快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过FireBug的朋友,可以联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只是这个是生成到一个窗口,而FireBug直接复制到剪贴板而已。【源文件】之“DOM(页面)”
快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的功能,不知道是不是因为bug的原因,此功能其实就是“查看网页源码”。因为,生成的源码并不仅仅是DOM信息,也包含CSS和脚本信息等。【源文件】之“原始状态”
极其操蛋的功能,其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。【轮廓】菜单
【轮廓】菜单,很明显就是把满足条件的元素勾画出来显示的命令。
其中包括【表单元格】、【表】、【DIV元素】、【图像】、【任何元素】、【定位对象】、【清除轮廓】等功能。
【图像】菜单
很明显,这个命令就是控制页面上各种图片的。
其中包括【禁用图像】、【显示图像尺寸】、【显示图像文件大小】、【显示图像路径】、【显示Alt文本】、【查看图像报告】等功能。
【缓存】菜单
管理缓存和Cookie的菜单组。对于开发人员来说这个将会是非常令人欢喜的功能。
【工具】菜单
开发人员工具附送的一些很有用的小工具,虽然相比其他专门的相关工具有点弱。但是应急还是足够的。
【验证】菜单
用于将本页面发送到w3c的html验证工具,并得到验证报表。
相关文章推荐
- IE8开发人员工具,让web开发的客户端调试畅通无阻
- 强大,IE8的开发人员工具
- IE8开发人员工具教程(二)
- 【华磊随笔】善于使用工具(1)-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理
- IE8的开发人员工具最小化的解决办法
- IE8开发人员工具教程
- 利用IE8开发人员工具学习优秀网页设计
- IE8按F12不显示开发人员工具窗口
- IE8“开发人员工具”使用详解上(各级菜单详解)
- 实战 IE8 开发人员工具
- ie8 开发人员工具 问题
- IE8“开发人员工具”使用详解上(各级菜单详解)
- IE8“开发人员工具”使用详解上
- IE8“开发人员工具”使用详解上(各级菜单详解)
- IE8"开发人员工具"使用详解 下
- IE8-开发人员工具使用(一)
- IE8-开发人员工具使用(二)
- IE8“开发人员工具”使用详解(附相关下载)
- IE8 中自带的"开发人员工具"打不开
- IE8开发人员工具最小化在任务栏无法使用的解决方法