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

开发人员工具就是为前端开发人员开发页面而设计的工具 提供一系列的小工具 让你可以方便的查找 调试页面的BUG 包括HTML代码 CSS代码和JavaScript代码 同时 他也提供了一些虽然比较鸡肋 但是还能咂咂味的小工具 例如取色 屏幕尺子等 2020 2 23 1 IE开发者工具使用说明 2020 2 23 2 如何打开IE开发者工具 1 在IE浏览器直接按 F12 2 在IE浏览器菜单栏 工具 中选择 F12开发人员工具 IE开发者工具使用说明 现在我们根据菜单的顺序一一来介绍它吧 2020 2 23 3 文件 菜单 IE开发者工具使用说明 全部撤销 撤销所有在开发人员工具中所做的操作 并且会重新刷新DOM树 2020 2 23 4 文件 菜单 IE开发者工具使用说明 自定义IE查看源文件 选择查看源文件的方式 可以用默认 记事本 及其它的文本编辑器 2020 2 23 5 查找 菜单 IE开发者工具使用说明 单击选择元素 选中后 用鼠标点击页面元素时 即可选中该元素 并且会列出该元素的DOM结果 CSS样式信息 2020 2 23 6 IE开发者工具使用说明 HTML 选项卡左边区域显示了该元素的DOM信息 父级 子级 兄弟元素 CSS信息 控制台 脚本 探测器 网络 样式 视图显示了该元素的样式信息 标有横线的表示优先级不够高 不再起作用 样式前面的复选框 去除选中时将会删除该元素的此样式 每个样式的属性值都可以直接修改且能立即看到效果 2020 2 23 7 IE开发者工具使用说明 HTML 下 样式 视图和 跟踪样式 视图作用是一样的 只是显示方式不同 2020 2 23 8 IE开发者工具使用说明 HTML 下 布局 视图显示选中元素盒子模型信息 盒子模型 可参考 2020 2 23 9 IE开发者工具使用说明 HTML 下 属性 视图显示选中元素的属性信息 并且可以增加 编辑 删除操作 且能立即看到效果 2020 2 23 10 IE开发者工具使用说明 CSS 选项卡中列出了该页面引用的所有CSS文件 包括直接写在页面的CSS样式 选择不同的样式文件 下面会列出该CSS文件的完整样式信息 2020 2 23 11 IE开发者工具使用说明 控制台 选项卡中上面列出了该页面的 日志信息 包括JavaScript错误 警告等信息 2020 2 23 12 IE开发者工具使用说明 控制台 选项卡下面可以输入JavaScript进行执行 2020 2 23 13 IE开发者工具使用说明 脚本 选项卡中包含控制台 监视 局部变量 调用堆栈 断点等信息下面介绍如果使用脚本调试功能 2020 2 23 14 IE开发者工具使用说明 设置断点 在脚本视图可以通过以下方式设置断点 1 单击行号以插入或删除断点2 右击一行代码并选择 插入断点 3 将光标放在一行代码上 按下F9以插入或删除断点无论调试程序是否启动 都可设置断点 一旦设置断点后 断点图标将出现在代码行号旁 该行的代码将突出显示 断点会使脚本在断点行前立即暂停执行 调试程序将突出显示要执行的下一行 调试期间 任何运行时错误都会导致调试程序在出错位置中断执行 要防止在错误时中断 请取消设置 错误时中断 切换按钮或按下CTRL SHIFT E 当调试程序暂停执行时 浏览器将不响应任何用户输入 2020 2 23 15 IE开发者工具使用说明 管理断点 断点 视图提供了所有断点的列表 在此可找到所有断点的位置 及断点设置处的文件名和行号 要转到源代码中的断点位置 双击此列表中的断点 要在不删除断点的情况下停用断点 请清除断点旁边的复选框 若要删除断点 请右击该断点 然后从快捷菜单选择 删除 即使您通过导航离开当前站点 IE也会在您关闭开发人员工具之前一直保留断点信息 2020 2 23 16 IE开发者工具使用说明 启动 停止调试 点击此按钮可以启动 停止调试功能 2020 2 23 17 IE开发者工具使用说明 功能键说明 继续 继续运行脚本而不暂停 直到遇到另一断点或脚本错误 键盘快捷方式 F5 全部中断 在下一条脚本语句执行之前立即暂停执行 单击按钮或按下CTRL SHIFT B以激活此命令 然后执行希望调试的操作 错误时中断 在出现错误的位置暂停执行 默认情况下此命令处于活动状态 如果您不希望在这些错误点处暂停执行 请单击此按钮停用此命令 然而 在所有情况下 在控制台中每出现一个错误都将显示一条错误消息 切换命令打开 关闭状态的键盘快捷方式 CTRL SHIFT E 逐语句 执行下一行脚本后暂停 即使下一行位于新方法内 键盘快捷方式 F11 逐过程 继续执行至当前方法中的下一行脚本后暂停 这在逐过程方法调用中极其有用 键盘快捷方式 F10 跳出 继续执行至调用当前方法的方法中的下一行脚本 这在跳出循环和方法调用时极其有用 键盘快捷方式 SHIFT F11 2020 2 23 18 IE开发者工具使用说明 监视 在 脚本调试 视图可以选择任意变量 代码段右键点击 添加监视 将会在右边的 监视 视图显示你添加的监视代码 当脚本运行到监视代码时 右边 监视 视图会显示对应代码的详细信息 如 值 类型等 2020 2 23 19 IE开发者工具使用说明 局部变量 局部变量 视图显示了当前执行范围中可用的所有变量的名称 值和类型 2020 2 23 20 IE开发者工具使用说明 调用堆栈 调用堆栈 视图可以直观地显示函数调用堆栈情况 以及现在执行到哪个函数的情况 对于理顺脚本的运行顺序和嵌套很有帮助 2020 2 23 21 IE开发者工具使用说明 探查器 并非国产浏览器中的那些探测网页媒体资源功能 而是用来分析脚本执行效率的工具 2020 2 23 22 IE开发者工具使用说明 网络 可以捕获页面请求及返回的数据 包括代码 图片 脚本 样式等等信息 2020 2 23 23 禁用 菜单 IE开发者工具使用说明 脚本 选中后会禁止页面的脚本执行 JavaScript VbScript 2020 2 23 24 禁用 菜单 IE开发者工具使用说明 弹出窗口阻止程序 没有使用过 据说是 用来测试哪种 怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口 2020 2 23 25 禁用 菜单 IE开发者工具使用说明 CSS 选中后会禁止页面的CSS样式解析 2020 2 23 26 查看 菜单 IE开发者工具使用说明 类和ID信息 选中后会同时显示出Class名称或者ID名称 2020 2 23 27 查看 菜单 IE开发者工具使用说明 连接路径 选中后会显示所有超链接地址 2020 2 23 28 查看 菜单 IE开发者工具使用说明 连接报告 点击后会生成一份此页面的链接报表 包含链接数量 链接地址 是否新窗口打开等信息 具体我也没使用过 2020 2 23 29 查看 菜单 IE开发者工具使用说明 选项卡索引 选中后会显示所有包含tabIndex的元素tabindex属性的设置 可以改变网页元素获得焦点的顺序 2020 2 23 30 查看 菜单 IE开发者工具使用说明 访问键 选中后会显示所有包含accesskey的元素accesskey属性的设置 可以设置元素获得焦点的快捷键 2020 2 23 31 查看 菜单 IE开发者工具使用说明 2020 2 23 32 查看 菜单 IE开发者工具使用说明 源文件 带有样式的元素源 生成一份包含选中元素样式 HTML代码信息的源文件 必须先选中一个元素 此命令才有效 而且生成的源文件也只与选中元素有关 2020 2 23 33 查看 菜单 IE开发者工具使用说明 源文件 DOM元素 生成一份只包含选中元素的DOM结构信息 必须先选中一个元素 此命令才有效 而且生成的源文件也只与选中元素有关 2020 2 23 34 查看 菜单 IE开发者工具使用说明 源文件 DOM页 生成一份源文件 此源文件包含整个页面的DOM信息结构 除了格式貌似和源文件功能一样 2020 2 23 35 查看 菜单 IE开发者工具使用说明 源文件 原始状态 貌似就是查看源文件功能 2020 2 23 36 图像 菜单 IE开发者工具使用说明 禁用图像 选中后会禁用所有的图片元素 包括背景图像 2020 2 23 37 图像 菜单 IE开发者工具使用说明 显示图片尺寸 选中后会显示所有图片的大小 不包含背景图像 单位是像素 2020 2 23 38 图像 菜单 IE开发者工具使用说明 显示图像文件大小 选中后会显示所有的图片的大小 单位字节 不包含背景图像 2020 2 23 39 图像 菜单 IE开发者工具使用说明 显示图像路径 选中后会显示所有的图片的路径 不包含背景图像 2020 2 23 40 图像 菜单 IE开发者工具使用说明 显示图像Alt文本 选中后会显示所有的图片的Alt文本 2020 2 23 41 图像 菜单 IE开发者工具使用说明 显示图像报告 点击后会生成一份此页面的图像报表 包含图片连接 尺寸大小 文件大小等信息 具体我也没使用过 2020 2 23 42 缓存 菜单 IE开发者工具使用说明 2020 2 23 43 IE开发者工具使用说明 2020 2 23 44 工具 菜单 IE开发者工具使用说明 重新调整大小 调整浏览器框口大小 便于测试不同窗口大小的页面兼容性 2020 2 23 45 工具 菜单 IE开发者工具使用说明 更改用户代理字符串 应该就是所谓的 UserAgent 标准格式为 浏览器标识 操作系统标识 加密等级标识 浏览器语言 渲染引擎标识版本信息详细参考 2020 2 23 46 工具 菜单 IE开发者工具使用说明 导航式清除项 官方解释 当您在调试会话中导航到新网页时 使您可以清除或保持 控制台 消息和 网络 选项卡日志 默认情况下 当您离开某个页面时 IE会清除所有控制台消息和网络选项卡捕获日志 2020 2 23 47 工具 菜单 IE开发者工具使用说明 显示 隐藏标尺 个人认为是个比较鸡肋的功能 不解释 2020 2 23 48 工具 菜单 IE开发者工具使用说明 显示 隐藏颜色选择器 就是一个简单的取色器 不解释 2020 2 23 49 工具 菜单 IE开发者工具使用说明 轮回元素 通过使标识元素的大小和位置变得更加轻松 帮助您了解和调试页面布局 您可以设置一种颜色来标识特定元素类型的所有元素 可使用CSS选择器语法在网页上指定元素 例如 要突出显示所有段落 请在选择器字段中使用DIV 然后设置一种颜色 2020 2 23 50 验证 菜单 IE开发者工具使用说明 此菜单使您可以使用Web上的验证服务验证当前网页或计算机上的文件 有一个对话框确认您要采取此操作 否则 请求将取消 2020 2 23 51 IE开发者工具使用说明 2020 2 23 52 浏览器 菜单 IE开发者工具使用说明 此命令使您能测试网页在面向运行其他版本InternetExplorer的用户时会如何操作 例如 如果您选择WindowsInternetExplorer7浏览器模式 您的网页将基于该浏览器呈现 并且不能访问只在更高版本InternetExplorer上提供的文档模式 2020 2 23 53 IE开发者工具使用说明 2020 2 23 54 文档模式 菜单 IE开发者工具使用说明 此命令使您可以测试其他版本的InternetExplorer会如何解析您的页面 对网页所做的更改会影响该页中的所有文档 包括iframe 2020 2 23 55 IE开发者工具使用说明 2020 2 23 56 搜索 功能 IE开发者工具使用说明 这是个一看就知道怎么用的功能 可以在HTML CSS 脚本等选项卡输入条件搜索对应的内容 2020 2 23 57 搜索 功能 IE开发者工具使用说明 其实这个搜索框支持W3C选择器语法进行搜索 如 搜索带有特定CSS类名称的元素 语法 className搜索带有特定CSS类名称的div元素 语法 div className搜索带有特定ID名称的元素 语法 id搜索带有特定ID名称的div元素 语法 div id 俎英华檶