IE11-F12 开发人员工具使用手册.pdf

使用 F12 开发人员工具 使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还 是查找内存泄漏，你都能在此处找到帮助工具。 正在工作的 F12 工具 在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松 地进行开发和调试。 在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用 “工具”菜单。 有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的 图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。 DOM 资源管理器工具 (CTRL + 1) DOM 资源管理器工具 显示了在浏览器中渲染网页时网页的结构，并使在活动页中编辑 HTML 和样式 的操作成为可能。不必编辑或重新加载源，即可执行此操作，以便你可以快速解决显示问题或试用新 思路。 以下新功能 包含在 DOM 资源管理器工具 中： • 编辑 HTML 属性和 CSS 属性时，会提供 IntelliSense 自动完成建议。 • 拖动 DOM 节点以将其重新排列。 它简化的开发和调试任务： • 确定不以正确位置或正确大小显示元素的原因。 • 指出哪些 CSS 演示和媒体查询被应用于元素。 • 测试元素的一系列不同颜色，以查看哪种颜色最佳。 了解有关 DOM 资源管理器工具的详细信息 。 “控制台”工具 (CTRL + 2) “控制台”工具提供了与运行代码交互、使用控制台的命令行发送信息和使用 控制台调试 API 获取 信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。 以下新功能 包含在 “控制台”工具中： • 使用“控制台”按钮或 CTRL + ` 在任何其他工具的底部打开控制台。 • 用于计时、计数、编组等的新 控制台调试 API 方法。 • 命令行上的 IntelliSense 自动完成建议可加快输入速度、减少拼写错误并帮助你发现 JavaScript API 的各个方面。 它简化的开发和调试任务： • 查看系统错误消息、异常警告和调试输出。 • 使用新的计时方法将计时代码执行下拉至该语句。 • 在不重新加载的情况下，更改运行代码中的变量值。 了解有关“控制台”工具的详细信息 。 “调试程序”工具 (CTRL + 3) 你可以使用 “调试程序”工具检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代 码，逐行操作代码，然后查看每个步骤中变量和对象的状态。 以下新功能 包含在 “调试程序”工具中： • 无刷新调试。设置断点，无需在运行时重新加载和丢失状态。 • 用于更轻松管理多个脚本的选项卡式文档界面。 • 突出显示断点和搜索匹配的滚动条。 它简化的开发和调试任务： • 使用调用栈查看导致函数调用的原因。 • 使压缩或精简的代码更易于读取。 • 监视 Web Worker 创建和执行。 了解有关“调试程序”工具的详细信息 。 “网络”工具 (CTRL + 4) “网络”工具向你提供了涉及加载和网页操作的任何网络请求的详细信息。 以下新功能 包含在 “网络”工具中： • 改进的请求计时信息。 • 改进的压缩信息捕获。 它简化的开发和调试任务： • 查看页面跨资源消耗的带宽量。 • 通过查看请求和响应标头及正文调试 AJAX 请求。 • 标识减慢网页加载速度的网络请求。 了解有关“网络”工具的详细信息 。 “UI 响应能力”工具 (CTRL + 5) “UI 响应能力”工具 可帮助你在页面速度减慢时了解出了什么问题。使用它分析速度缓慢的特定点 可显示导致这些问题的操作。 UI 响应能力工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下： • 标识导致 UI 缓慢的 CPU 活动的不同源。 • 洞察网页的帧率。 • 在时间线上设置标签以隔离用户方案。 它简化的开发和调试任务： • 测试代码优化。 • 加快你的网页速度。 了解有关“UI 响应能力”工具的详细信息 。 “探查器”工具 (CTRL + 6) “探查器”工具是 JavaScript 速度的单纯计量工具，向你显示了在分析会话过程中