什么是浏览器开发者工具？
每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
如何在浏览器中打开开发者工具
开发者工具内置在浏览器的子窗口之中，大概像这样，具体取决于所使用的浏览器：
如何打开它？有三种方式：
-
键盘快捷键：
- Windows：Ctrl + Shift + I 或 F12
- macOS：⌘ + ⌥ + I
-
菜单栏：
- Firefox：菜单（☰）➤ 更多工具 ➤ Web 开发者工具
- Chrome：➤ 更多工具 ➤ 开发者工具
- Opera：开发者 ➤ 开发者工具
- Safari：开发 ➤ 显示 Web 检查器。
备注：Safari 开发者工具默认没有启用。要启用它们，前往 Safari ➤ 偏好设置 ➤ 高级，然后勾选在菜单栏中显示“开发”菜单或启用 Web 开发者功能复选框。
-
右键菜单：在网页上长按/右键单击某项（在 Mac 上按 Ctrl 同时点击），并从弹出的菜单中选择检查元素。（这种方法的好处：此方法会立即高亮显示右键单击的元素的代码）。
检查器：DOM 浏览器和 CSS 编辑器
开发者工具在打开时默认为检查器（inspector）页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许你立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。
如果你看不到调试器，
- Firefox：选择查看器标签页。
- 其他浏览器：选择元素标签页。
探索 DOM 检查器
首先在 DOM 检查器中右键单击（或按 Ctrl 同时单击）一个 HTML 元素，查看上下文菜单。菜单选项各不相同，但主要功能是相同的：
- 删除节点（或删除元素）：删除当前元素。
- 编辑 HTML（或添加属性/编辑文本）：让你更改 HTML 并即时查看结果。对于调试和测试非常有用。
- :hover/:active/:focus（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
- 复制/复制为 HTML：复制当前选定的 HTML。
- 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的 HTML 元素 CSS 选择器或 XPath 表达式。
现在试着编辑一些你的 DOM。双击元素，或在页面内容里右键单击它并选择编辑 HTML。你可以做出任何你想要的改变，但你不能保存。
探索 CSS 编辑器
默认情况下，CSS 编辑器显示当前所选元素应用的 CSS 规则：
这些功能特别有用：
- 应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。
- 点击每个声明旁边的复选框，看看如果删除声明会发生什么。
- 点击每个简写属性旁边的小箭头显示属性的普通等效项。
- 单击属性名称或值以显示一个文本框，你可以在其中键入新值以获取样式更改的实时预览。
- 每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。
- 你还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，你可以在其中为页面写入一个全新的声明。
你会注意到 CSS 查看器顶部的一些可点击的选项卡：
- 计算值：显示当前所选元素的计算样式（浏览器应用的最终标准化值）。
- 布局：如果正在检查的元素使用了 CSS 网格或弹性盒布局模式，此处将显示相关详细信息。
- 字体：在 Firefox 和 Safari 中，字体标签页显示应用于当前元素的字体。
盒模型视图直观地展示了当前元素的盒模型，因此可以一目了然地看到该元素应用了哪些内边距、边框和外边距，以及其内容的大小。在 Firefox 中，该视图位于布局标签页下；而在其他浏览器中，则位于计算值标签页下。
在某些浏览器中，还可以在此面板中查看所选元素的 JavaScript 详细信息。在 Safari 中，这些内容统一在节点标签页下，但在 Chrome、Opera 和 Edge 中则分别位于不同的选项卡中。
了解更多
了解更多检查器在不同的浏览器中的细节：
- Firefox 页面检查器
- Chrome DOM 检查器（Opera 和 Edge 的检查器和它一样）
- Safari 元素标签
JavaScript 调试器
你可在 JavaScript 调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。
如何打开调试器：
- Firefox：打开开发者工具，然后选择调试器标签页。
- 其他浏览器：打开开发者工具，然后选择源代码标签页。
探索调试器
每个浏览器的 JavaScript 调试器都分为三个面板。这些面板的布局因所使用的浏览器而略有不同；本指南以 Firefox 为例进行说明。
文件列表
第一个面板位于左边，它包含你正在调试的网页的文件列表。从列表中选中你要操作的文件。单击以选择该文件，并在调试器的中间面板中查看其内容。
源码
在你想要停止执行的位置设置断点。在下面图片中，高亮的第 18 行就是被设置的断点。
监视表达式和断点
右边的面板会显示你添加的监视表达式与断点。
在下图中，第一个区域，监视表达式，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。
接下来的部分，断点，列出了页面上设置的断点。在 example.js 中，一个断点被设置在语句 listItems.push(inputNewItem.value); 上。
最后两个部分，只在代码运行时才出现。
调用堆栈区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。
最后一部分，作用域，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。
了解更多
了解不同浏览器中的 JavaScript 调试器：
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 控制对象 API 和控制台命令行 API