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

如何在浏览器中打开开发者工具

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

如何调出它？三种方法

• 键盘

  • Windows： Ctrl + Shift + I 或 F12
  • macOS： ⌘ + ⌥ + I

• 菜单栏

  • Firefox： 菜单（☰）➤ 更多工具 ➤ Web 开发者工具

  • Chrome： 更多工具 ➤ 开发者工具

  • Opera：开发者 ➤ 开发者工具

  • Safari： 开发 ➤ 显示 Web 检查器。

    注意： Safari 的开发者工具默认未启用。要启用它们，请转到Safari ➤ 偏好设置 ➤ 高级，然后勾选在菜单栏中显示“开发”菜单或为 Web 开发者启用功能复选框。

• 上下文菜单： 按住/右键单击网页上的某个项目（Mac 上按住 Ctrl+单击），然后在出现的上下文菜单中选择检查元素。（额外好处：此方法会立即突出显示您右键单击的元素的代码。）

检查器：DOM 浏览器和 CSS 编辑器

开发者工具通常默认打开到检查器，其外观大致如下面的屏幕截图所示。此工具显示您页面上的 HTML 在运行时是什么样的，以及每个元素应用了什么 CSS。它还允许您即时修改 HTML 和 CSS，并实时查看更改在浏览器视口中的反映。

如果您没有看到检查器，

• Firefox： 选择检查器选项卡。
• 其他浏览器： 选择元素选项卡。

探索 DOM 检查器

首先，右键单击（Ctrl+单击）DOM 检查器中的 HTML 元素，然后查看上下文菜单。可用菜单选项因浏览器而异，但重要的选项大多相同。

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

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

探索 CSS 编辑器

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

这些功能尤其方便

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

您会注意到 CSS 查看器顶部有一些可单击的选项卡。

• 计算值：这显示了当前选定元素的计算样式（浏览器应用的最终、标准化值）。
• 布局：如果正在检查的元素使用了 CSS 网格和 Flexbox 布局模式，则此选项卡显示这些模式的详细信息。
• 字体：在 Firefox 和 Safari 中，字体选项卡显示应用于当前元素的字体。

盒模型视图直观地表示当前元素的盒模型，因此您可以一目了然地看到它应用的内边距、边框和外边距，以及其内容的尺寸。在 Firefox 中，它位于布局选项卡中，在其他浏览器中位于计算值选项卡中。

在某些浏览器中，选定元素的 JavaScript 详细信息也可以在此面板中查看。在 Safari 中，这些合并在节点选项卡下，但在 Chrome、Opera 和 Edge 中位于单独的选项卡中。

• 属性：元素的 属性。
• 事件监听器：与该元素关联的 事件。

了解更多

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

• Firefox 页面检查器
• Chrome DOM 检查器（Opera 和 Edge 的检查器相同）
• Safari 元素选项卡

JavaScript 调试器

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

如何访问调试器

Firefox：打开开发者工具并选择调试器选项卡。其他浏览器：打开开发者工具并选择源代码选项卡。

探索调试器

每个浏览器的 JavaScript 调试器分为三个窗格。这些窗格的布局因您使用的浏览器而异；本指南以 Firefox 为参考。

文件列表

左侧的第一个窗格包含与您正在调试的页面相关的文件列表。从列表中选择要处理的文件。单击文件即可选中它并在调试器的中间窗格中查看其内容。

源代码

在希望暂停执行的地方设置断点。在下图的数字 18 处的高亮显示表明该行已设置了断点。

监视表达式和断点

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

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

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

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

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

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

了解更多

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

• Firefox JavaScript 调试器)
• Chrome 调试器（Opera 和 Edge 的调试器相同）
• Safari 源代码选项卡

JavaScript 控制台

JavaScript 控制台是一个非常有用的工具，用于调试非预期工作的 JavaScript。它允许您针对浏览器中当前加载的页面运行 JavaScript 代码行，并报告浏览器尝试执行代码时遇到的错误。

要在任何浏览器中访问控制台，请打开开发者工具并选择控制台选项卡。这将为您提供如下窗口：

要查看会发生什么，请尝试逐个将以下代码片段输入控制台（然后按 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 和 Edge 的控制台相同）
• Safari Console Object API 和 Console Command Line API

另见

• 调试 HTML
• 调试 CSS