浏览器的开发者工具详细介绍和使用方法

打开开发工具

①右键单击网页上的任何项，然后选择 “检查”。

②按Ctrl+Shift+I（Windows、Linux）或 Command+Option+I （macOS）。

③按 F12。

④“更多”图标 (...) >更多工具 > 开发人员工具。

⑤按 Shift+F10 下以打开右键单击菜单。 若要选择 “检查”命令，请按下，然后Enter按Up Arrow。

主工具栏包含以下功能：

• 图标工具：

  • 检查工具 () 切换按钮。
  • 设备仿真 () 按钮。

• 工具选项卡：

  • 欢迎 工具。
  • 元素 工具。 永久。
  • 控制台 工具。 永久。
  • 源 工具。 永久。
  • 网络 工具。
  • 性能 工具。
  • 内存 工具。
  • 应用程序 工具。
  • 安全 工具。
  • Lighthouse 工具。
  • CSS 概述 工具。

• 图标：

  • 更多选项卡 () 按钮。
  • “更多工具 () 按钮。
  • JavaScript 错误计数器 () 按钮。
  • 问题计数器 () 按钮。
  • 设置 () 按钮。
  • 发送反馈 () 按钮。
  • 自定义和控制 DevTools () 菜单按钮。

检查工具

单击“ 检查”工具 () 按钮，可以选择当前网页上的元素。 当 检查 工具处于活动状态时，可以将鼠标移动到网页的不同部分，以获取有关页面元素的详细信息，以及显示页面元素的布局尺寸、填充和边距的多色覆盖。

设备仿真

单击 设备仿真 () 按钮以模拟设备模式显示当前网站。 设备仿真工具允许你在调整浏览器大小时运行和测试产品的反应。 它还为你提供移动设备上的布局和行为估计。 模拟移动设备 (设备仿真) https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/device-mode/。

元素工具

允许检查、编辑和调试 HTML 和 CSS。 可以在浏览器中实时显示更改时在工具中进行编辑。

元素工具始终存在于主工具栏上。

控制台工具

在 控制台 工具中，可以：

• 从网络请求或 JavaScript 日志语句查看和筛选记录的消息。
• 输入要实时评估的 JavaScript 语句。 表达式在当前上下文中进行计算，例如当 源 工具中的 JavaScript 调试器在断点处暂停时。

主工具栏和抽屉工具栏上始终存在 控制台 工具。

请参阅  控制台。

源工具

“源”工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。

源工具始终存在于主工具栏上。

网络工具

使用 网络 工具可以监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应，以满足你的需求并模拟不同的网络条件。

请参阅  “检查网络活动”。

性能工具

请参阅  开始分析运行时性能。

内存工具

请参阅  “修复内存问题”。

应用程序工具

请参阅  视图、编辑和删除 Cookie。

安全工具

请参阅  使用安全工具了解安全问题。

Lighthouse 工具

请参阅  Lighthouse 工具。

CSS 概述工具

确定潜在的 CSS 改进。

请参阅  CSS 概述工具。

“更多选项卡”按钮

若要显示因窗口太窄而打开但隐藏的工具，请单击“ 更多”选项卡 () 按钮。

“更多工具”按钮

若要将工具添加到工具栏，请单击“ 更多工具 () 按钮。

JavaScript 错误计数器

JavaScript 错误计数器 () 按钮显示以下内容：

• 包含一个 X红色圆圈，后跟在当前网页上自动检测到的 JavaScript 错误数。

• 包含感叹号的黄色三角形，后跟在当前网页上自动检测到的 JavaScript 警告数。

JavaScript 计数器按钮的工具提示是打开控制台以查看 # 错误， # 警告。

单击 JavaScript 错误计数器打开  控制台 并了解错误。

问题计数器

问题 计数器 () 按钮显示当前网页上自动找到的 HTML 或 CSS 问题数。

“问题”计数器的工具提示是 “打开的问题”以查看 # 问题。 按钮的图标是蓝色语音气泡图标，后跟 HTML 或 CSS 问题的数量。

单击 “问题”计数器 打开  “问题 ”工具。

“设置”按钮

若要打开“DevTools 设置” 网页，请单击 “设置 () 按钮。 “设置” 页包含以下子页：

• 首选项
• 工作
• 试验
• 库代码
• 设备
• 限制
• 位置
• 快捷方式
• 符号服务器

请参阅_自定义 DevTools 中的_ 设置。