IE8“开发人员工具”(上)

认识“开发人员工具”



开发人员工具在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“开发人员工具”(上),布布扣,bubuko.com

时间: 2024-12-26 04:36:04

IE8“开发人员工具”(上)的相关文章

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

来源: http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html IE8“开发人员工具”使用详解上(各级菜单详解) IE8正式版已经发布了.本篇文章不会非常扯蛋地去进行什么评测,然后给出什么“Chrome运行JavaScript能力是IE8的15倍”.什么“IE8页面渲染速度是Safari的2.456倍”.什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论.我管谁比谁强多少

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

浏览器模式 说白了,就是让用户选择当前页面用何种IE版本去渲染. 文本模式 说起"文本模式"这个名词,这又要回到渲染页面的3种模式了:诡异模式(Quirks mode,也有翻译为兼容模式.怪异模式的),标准模式(Standards mode),和几乎标准模式(Almost standards mode).这是一个非常重要.但是很多人却比较模糊的概念.一两句话不太能说清楚,这样说吧--"页面的不同渲染模式,将直接影响页面的最终呈现效果",也就是说,一个页面如果在这种模

IE的F12开发人员工具不显示问题

按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现了.(或者是右键-移动,然后手动调整窗口大小) 但是这时候是单独一个窗口,没有和IE页面结合在一起.点击右上角的固定按钮(快捷键CTRL+P),就和IE结合在一起了,位于页面的下方. 或者是打开工具后,直接按快捷键ctrl+p,就出来了.(当然了,必须先打开开发工具,否则ctrl+p是IE8的打印)

IE的F12开发人员工具不显示

IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现了.(或者是右键-移动,然后手动调整窗口大小) 但是这时候是单独一个窗口,没有和IE页面结合在一起.点击右上角的固定按钮(快捷键CTRL+P),就和IE结合在一起了,位于页面的下方. 或者是打开工具后,直接按快捷键ctrl+p,就出来了.(当然了,必须先打开开发

IE开发人员工具教程

写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载等信息. 在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文(在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦) Chrome 控制台不完全指南   http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html Chro

常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可以支持Firefox,我依然首推Firebug作为JS调试首选,虽然有些不足之处,但基本可以满足大家90%调试场景需求. A. 功能讲解 见上图,图中已标注出功能的五个关键点,下面顺序说明,先将Firebug切换到标注1中的JS调试功能Tab“脚本”上:打开标注2中的当前页面加载的所有静态JS链接资

IE开发人员工具显示异常,IE加载百度地图,BMap“未定义”

现象:IE开发人员工具,打开界面("网络选项卡")一片空白. 解决:点击Internet选项-高级-重置,重启电脑(有提示). 现象:IE加载百度地图,BMap"未定义", 解决:上面的重置后,重启浏览器,意外地百度地图可以用了.( 现象: http://api.map.baidu.com/api?  响应出现问题,没有继续加载http://api.map.baidu.com/getscript?v=2.0&ak= ) 这里还可以参考这篇博文(这个原来也设置

主流浏览器开发人员工具(F12)在安全测试中的优与劣

<!--本文所指主流浏览器为Chrome.Firefox.IE--> <!-- 0x01 场景假设 0x02 Chrome 0x03 Firefox 0x04 IE 0x05 结论 --> 0x01 场景假设 三款浏览器开发人员工具的使用及页面调试等技能,本文不做描述,只说在安全测试中遇到情况. 考虑如下场景:现在要对一个Web应用做安全测试,客户端/服务端使用HTTPS双向认证,客户端使用U盾一类的工具. 根据上述场景:缺少证书的任意一环,通信无法发生:客户端私钥写在硬件中,无法

BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 使用Napa开发SharePoint应用程序

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 使用Napa开发SharePoint应用程序 如果你做过SharePoint开发,你会知道构建开发环境要花费时间.在SharePoint 2010中,你不得不安装在本地一些软件应用程序,如SharePoint,SQL Server,VS等,并且配置你的环境能使用它们.然后要在本地安装的SharePoint实例上调试.SharePoint 2013快速开发则稍微进