第二章 IE开发者人员工具使用说明.ppt

* * “探查器”并非国产浏览器中的那些探测网页媒体资源功能，而是用来分析脚本执行效率的工具 * * “网络”可以捕获页面请求及返回的数据，包括代码、图片、脚本、样式等等信息 * * “禁用”菜单 脚本： 选中后会禁止页面的脚本执行（JavaScript、VbScript …） * * “禁用”菜单 弹出窗口阻止程序： 没有使用过，据说是：用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。” * * “禁用”菜单 CSS： 选中后会禁止页面的 CSS 样式解析 * * “查看”菜单 类和ID信息： 选中后会同时显示出 Class 名称或者 ID 名称 * * “查看”菜单 连接路径： 选中后会显示所有超链接地址 * * “查看”菜单 连接报告： 点击后会生成一份此页面的链接报表，包含链接数量、链接地址、是否新窗口打开等信息，具体我也没使用过 * * “查看”菜单 选项卡索引： 选中后会显示所有包含 tabIndex 的元素 tabindex属性的设置，可以改变网页元素获得焦点的顺序 * * “查看”菜单 访问键： 选中后会显示所有包含 accesskey的元素 accesskey属性的设置，可以设置元素获得焦点的快捷键 * * “查看”菜单 * * “查看”菜单 源文件： 带有样式的元素源：生成一份包含选中元素样式、HTML代码信息的源文件，必须先选中一个元素，此命令才有效，而且生成的源文件也只与选中元素有关 * * “查看”菜单 源文件： DOM元素：生成一份只包含选中元素的DOM结构信息，必须先选中一个元素，此命令才有效，而且生成的源文件也只与选中元素有关 * * “查看”菜单 源文件： DOM页：生成一份源文件，此源文件包含整个页面的DOM信息结构，除了格式貌似和源文件功能一样 * * “查看”菜单 源文件： 原始状态：貌似就是查看源文件功能 * * “图像”菜单 禁用图像： 选中后会禁用所有的图片元素，包括背景图像 * * “图像”菜单 显示图片尺寸： 选中后会显示所有图片的大小，不包含背景图像，单位是像素 * * “图像”菜单 显示图像文件大小： 选中后会显示所有的图片的大小，单位字节，不包含背景图像 * * “图像”菜单 显示图像路径： 选中后会显示所有的图片的路径，不包含背景图像 * * “图像”菜单 显示图像Alt文本： 选中后会显示所有的图片的Alt文本 * * * * * * * * * * * * 开发人员工具就是为前端开发人员开发页面而设计的工具。 提供一系列的小工具，让你可以方便的查找、调试页面的BUG，包括HTML代码、CSS代码和JavaScript代码。 同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。 * * * * 如何打开 IE开发者工具？ 1：在IE浏览器直接按 “F12”； 2：在IE浏览器菜单栏“工具”中选择“F12开发人员工具”。 现在我们根据菜单的顺序一一来介绍它吧。 * * “文件”菜单 全部撤销： 撤销所有在开发人员工具中所做的操作，并且会重新刷新DOM树 * * “文件”菜单 自定义IE查看源文件： 选择查看源文件的方式，可以用默认，记事本，及其它的文本编辑器 * * “查找”菜单 单击选择元素： 选中后，用鼠标点击页面元素时，即可选中该元素，并且会列出该元素的DOM结果、CSS样式信息 * * “HTML”选项卡左边区域显示了该元素的DOM信息（父级、子级、兄弟元素）、CSS信息、控制台、脚本、探测器、网络 “样式”视图显示了该元素的样式信息，标有横线的表示优先级不够高，不再起作用，样式前面的复选框，去除选中时将会删除该元素的此样式，每个样式的属性值都可以直接修改且能立即看到效果 * * “HTML”下“样式”视图和“跟踪样式”视图作用是一样的，只是显示方式不同 * * “HTML”下“布局”视图显示选中元素盒子模型信息 “盒子模型”可参考 /view/2758739.htm * * “HTML”下“属性”视图显示选中元素的属性信息，并且可以增加、编辑、删除操作，且能立即看到效果 * * “CSS”选项卡中列出了该页面引用的所有CSS文件，包括直接写在页面的CSS样式，选择不同的样式文件，下面会列出该CSS文件的完整样式信息 * * “控制台”选项卡中上面列出了该页面的“日志信息”包括 JavaScript 错误、警告等信息 * * “控制台”选项卡下面可以输入 JavaScript 进行执行 * * “脚本”选项卡中包含控制台、监视、局部变量、调用堆栈、断点等信息 下面介绍如果使用 脚本调试功能 * * 设置断点： 在脚本视图可以通过以下方式