什么是浏览器开发者工具？

开发者工具位于浏览器内的子窗口中，其外观大致如下所示，具体取决于您使用的浏览器

如何将其调出？三种方法

• 键盘
  • Windows：Ctrl + Shift + I 或 F12
  • macOS：⌘ + ⌥ + I
• 菜单栏
  • Firefox：菜单 ➤ 更多工具 ➤ Web 开发者工具
  • Chrome：更多工具 ➤ 开发者工具
  • Safari：开发 ➤ 显示 Web 检查器。如果看不到“开发”菜单，请转到Safari ➤ 偏好设置 ➤ 高级，然后选中“在菜单栏中显示开发菜单”复选框。
  • Opera：开发者 ➤ 开发者工具
• 上下文菜单：按住/右键单击网页上的项目（在 Mac 上按住 Ctrl 键单击），然后从出现的上下文菜单中选择“检查元素”。（额外奖励：此方法会直接突出显示您右键单击的元素的代码。）

开发者工具通常默认打开到检查器，其外观类似于以下屏幕截图。此工具显示页面上 HTML 在运行时的外观，以及应用于页面上每个元素的 CSS。它还允许您即时修改 HTML 和 CSS，并查看浏览器视口中对更改的实时结果。

如果您没有看到检查器，

• 点击/点击“检查器”选项卡。
• 在 Chrome、Microsoft Edge 或 Opera 中，点击/点击“元素”。
• 在 Safari 中，控件没有那么清晰地显示，但如果您没有选择其他内容显示在窗口中，则应看到 HTML。按“样式”按钮查看 CSS。

首先，右键单击（按住 Ctrl 键单击）DOM 检查器中的 HTML 元素，然后查看上下文菜单。可用的菜单选项在不同的浏览器之间有所不同，但重要的选项大多相同

• 删除节点（有时为删除元素）。删除当前元素。
• 以 HTML 形式编辑（有时为添加属性/编辑文本）。允许您更改 HTML 并实时查看结果。对调试和测试非常有用。
• :hover/:active/:focus。强制元素状态切换，以便您可以查看其样式的外观。
• 复制/复制为 HTML。复制当前选定的 HTML。
• 某些浏览器还提供复制 CSS 路径和复制 XPath，以便您可以复制选择当前 HTML 元素的 CSS 选择器或 XPath 表达式。

现在尝试编辑一些 DOM。双击某个元素，或右键单击它并从上下文菜单中选择“以 HTML 形式编辑”。您可以进行任何更改，但无法保存更改。

默认情况下，CSS 编辑器会显示应用于当前选定元素的 CSS 规则

这些功能特别方便

• 应用于当前元素的规则按从最特定到最不特定的顺序显示。
• 单击每个声明旁边的复选框以查看删除该声明会发生什么。
• 单击每个简写属性旁边的箭头以显示该属性的完整等效项。
• 单击属性名称或值以调出一个文本框，您可以在其中键入新值以获得样式更改的实时预览。
• 每个规则旁边是定义该规则的文件名和行号。单击该规则会导致开发者工具跳转到其自己的视图中显示它，通常可以在其中编辑和保存它。
• 您还可以单击任何规则的结束大括号以在下一行调出一个文本框，您可以在其中为页面编写全新的声明。

您会注意到 CSS 查看器顶部有许多可点击的选项卡

• 计算：这显示了当前选定元素的计算样式（浏览器应用的最终规范化值）。
• 布局：在 Firefox 中，此区域包含两个部分
  • 盒子模型：以可视方式表示当前元素的盒子模型，以便您可以一目了然地了解应用了哪些填充、边框和边距，以及其内容的大小。
  • 网格：如果您正在检查的页面使用 CSS 网格，则此部分允许您查看网格详细信息。
• 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。

了解有关不同浏览器中检查器的更多信息

• Firefox 页面检查器
• Chrome DOM 检查器（Opera 的检查器的工作方式与此相同）
• Safari DOM 检查器和样式浏览器

JavaScript 调试器允许您监视变量的值并设置断点，即代码中您希望暂停执行并识别阻止代码正确执行的问题的位置。

要访问调试器

Firefox：选择 ➤ Web 开发者 ➤ 调试器或按 Ctrl + Shift + S 打开 JavaScript 调试器。如果工具已显示，请点击调试器选项卡。

Chrome：打开开发者工具，然后选择来源选项卡。（Opera 的工作方式相同。）

Safari：打开开发者工具，然后选择调试器选项卡。

Firefox 上的 JavaScript 调试器中有三个窗格。

文件列表

左侧的第一个窗格包含与您正在调试的页面关联的文件列表。从此列表中选择您要使用的文件。单击文件以选择它并在调试器的中央窗格中查看其内容。

源代码

设置您希望暂停执行的断点。在下图中，数字 18 上的突出显示表示该行已设置断点。

监视表达式和断点

右侧窗格显示您添加的监视表达式的列表以及您设置的断点的列表。

在图像中，第一个部分监视表达式显示已添加 listItems 变量。您可以展开列表以查看数组中的值。

下一个部分断点列出了页面上设置的断点。在 example.js 中，已在语句listItems.push(inputNewItem.value);上设置断点。

最后两个部分仅在代码运行时出现。

调用栈部分显示执行了哪些代码才能到达当前行。您可以看到代码位于处理鼠标单击的函数中，并且代码当前已在断点处暂停。

最后一个部分作用域显示代码中各个点可见的值。例如，在下图中，您可以看到 addItemClick 函数的代码可用的对象。

了解有关不同浏览器中 JavaScript 调试器的更多信息

• Firefox JavaScript 调试器)
• Microsoft Edge 调试器

• Chrome 调试器
• Safari 调试器

JavaScript 控制台是一个非常有用的工具，用于调试 JavaScript 代码中出现的问题。它允许你对浏览器中当前加载的页面运行 JavaScript 代码行，并在浏览器尝试执行代码时报告遇到的错误。要访问任何浏览器中的控制台

如果开发者工具已打开，请点击或按下“控制台”选项卡。

如果未打开，Firefox 允许你使用 Ctrl + Shift + K 直接打开控制台，或使用菜单命令：菜单 ➤ Web 开发人员 ➤ Web 控制台，或 工具 ➤ Web 开发人员 ➤ Web 控制台。在其他浏览器中，打开开发者工具，然后点击“控制台”选项卡。

这将为你提供如下所示的窗口

要查看发生了什么，请尝试将以下代码片段逐个输入控制台（然后按 Enter）

alert("hello!");

document.querySelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

现在尝试输入以下代码的错误版本，看看会得到什么结果。

alert("hello!);

document.cheeseSelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

你将开始看到浏览器返回的错误类型。通常这些错误相当隐晦，但这些问题应该很容易解决！

了解不同浏览器中的 JavaScript 控制台的更多信息

• Firefox Web 控制台
• Chrome JavaScript 控制台（Opera 的检查器与此相同）
• Safari 控制台

• 调试 HTML
• 调试 CSS