Chrome 开发者工具使用

2025-04-06 2025-08-31 前端前端 104

当你开始编写一些简单的 HTML、CSS 和 JavaScript 代码时，可能会遇到各种各样的问题：为什么我的样式没有生效？JavaScript 报错在哪里？网页加载了哪些文件？别担心，Chrome 浏览器自带的 开发者工具 (Developer Tools) 就是你解决这些问题的强大助手！

本指南将带你由浅入深地认识 Chrome 开发者工具中最常用的几个面板，帮助你快速上手，提升你的前端开发技能。

如何打开开发者工具？

打开 Chrome 浏览器，访问任意网页，你可以通过以下几种方式打开开发者工具：

快捷键：
- Windows/Linux: 按下 F12 或 Ctrl + Shift + I
- Mac: 按下 Cmd + Option + I
鼠标右键： 在网页的任意位置点击鼠标右键，选择“检查”或“Inspect”。
Chrome 菜单： 点击浏览器右上角的三个点（Chrome 菜单） -> 更多工具 -> 开发者工具。

打开后，你通常会在浏览器窗口的底部或右侧看到一个包含各种面板的工具栏。

初学者入门：Elements、Console 和 Network

对于新手来说，以下几个面板是最常用且最有用的，它们能帮助你理解网页的基础构成和运行方式。

1. Elements 面板：洞悉 HTML 结构与 CSS 样式

Elements 面板 让你能够实时查看和修改网页的 HTML 结构和 CSS 样式。这对于理解网页的组成以及调试样式问题非常有帮助。

如何使用：

打开开发者工具，默认情况下通常会进入 Elements 面板。
在左侧的 “DOM 树” 中，你可以看到网页的 HTML 结构，点击展开和折叠不同的元素。
当你选中一个 HTML 元素时，右侧的 “Styles” 选项卡会显示应用于该元素的 CSS 规则。这些规则来自不同的来源，例如你的样式表、浏览器默认样式等。

你能在这里做什么？

查看 HTML 结构： 了解网页的元素是如何组织和嵌套的。
- (在这里插入 Elements 面板显示 HTML 结构的截图，并高亮显示一个可编辑的元素)
实时编辑 HTML： 双击 DOM 树中的元素，你可以直接修改元素的文本内容、属性甚至添加或删除元素。修改会立即在网页上反映出来，但刷新后会恢复原状。
查看 CSS 样式： 了解哪些 CSS 规则应用于选中的元素，以及这些规则的来源。
- (在这里插入 Elements 面板显示 CSS 样式的截图，并高亮显示一个可编辑的 CSS 属性和值)
实时编辑 CSS： 在 “Styles” 选项卡中，你可以点击已有的 CSS 属性和值进行修改，或者点击空白处添加新的 CSS 属性和值。修改同样会立即在网页上反映出来。
查看计算后的样式 (“Computed” 选项卡)： “Computed” 选项卡会显示浏览器最终应用到元素上的样式，包括继承、层叠等计算后的结果，这对于理解样式冲突非常有用。你还可以看到元素的尺寸（Width 和 Height）以及盒模型的各个属性值。
- (在这里插入 Elements 面板的 Computed 选项卡截图，并详细标注计算后的样式和盒模型数值)
盒模型 (Box Model)： 当你选中一个元素时，在 Styles 选项卡的底部会看到一个直观的盒模型图示，清晰地展示了元素的 content（内容区域）、padding（内边距）、border（边框）和 margin（外边距）。你可以通过鼠标悬停在不同的区域来查看它们的具体数值。理解盒模型是 CSS 布局的基础。
- (在这里插入 Elements 面板显示详细盒模型的截图，并标注各个区域)
样式来源： 每条 CSS 规则旁边都会显示其来源，例如你的 CSS 文件名和行号，或者 <style> 标签内的样式，甚至是浏览器默认样式。这对于追踪样式的定义位置非常有用。
强制状态 (Force State)： 有时你需要查看元素在特定状态下的样式，例如鼠标悬停时的 :hover 效果。在 Styles 选项卡的顶部，你可以找到一个 ":hov" 按钮，点击它可以强制元素进入 :active、:focus、:hover、:visited 等状态，方便你调试这些特殊状态下的样式。
- (在这里插入 Elements 面板使用 Force State 功能的截图，例如强制显示 hover 状态的样式)
Attributes 选项卡： 在 Elements 面板的右侧，与 “Styles” 和 “Computed” 并列的还有 “Attributes” 选项卡。在这里，你可以查看和修改当前选中 HTML 元素的属性。双击属性名称或值即可进行编辑。
- (在这里插入 Elements 面板显示 Attributes 选项卡的截图，并高亮显示一个可编辑的属性)
Event Listeners 选项卡： 如果你想知道某个 HTML 元素上绑定了哪些 JavaScript 事件监听器，可以切换到 “Event Listeners” 选项卡。它会列出该元素及其父元素上绑定的所有事件监听器，包括事件类型、触发对象和处理函数的位置。这对于调试 JavaScript 事件相关的问题非常有帮助。
- (在这里插入 Elements 面板显示 Event Listeners 选项卡的截图，并标注事件类型和处理函数位置)
DOM Breakpoints： Elements 面板还允许你设置 DOM 断点。当选中的元素或其子元素发生特定变化时（例如属性被修改、子节点被删除等），JavaScript 代码的执行会暂停，方便你追踪 DOM 的变化来源。右键点击 DOM 树中的元素，选择 “Break on...” 即可设置不同类型的 DOM 断点。
- (在这里插入 Elements 面板设置 DOM 断点的截图)

2. Console 面板：JavaScript 的控制中心

Console 面板 是你与 JavaScript 交互的重要场所。它主要用于显示 JavaScript 代码中的错误信息、警告以及开发者通过 console.log() 等方法输出的信息。

如何使用：

点击开发者工具顶部的 “Console” 选项卡，进入 Console 面板。

你能在这里做什么？

查看 JavaScript 错误和警告： 当你的 JavaScript 代码出现语法错误或者逻辑问题时，Console 面板会显示详细的错误信息，包括错误发生的行号和描述，帮助你快速定位问题。
- (在这里插入 Console 面板显示 JavaScript 错误的截图，并高亮显示错误信息和行号)
查看 console.log() 的输出： 开发者经常使用 console.log() 在代码中输出一些信息，例如变量的值、程序执行的流程等，这些信息会显示在 Console 面板中，帮助你理解代码的运行状态。
- (在这里插入 Console 面板显示 console.log() 输出的截图)
执行 JavaScript 代码： 你可以在 Console 面板底部的输入框中直接输入 JavaScript 代码并执行，这对于快速测试一些代码片段非常方便。你甚至可以访问当前网页的全局变量和函数。
- (在这里插入 Console 面板执行 JavaScript 代码的截图，并显示执行结果)
不同级别的日志输出： 除了 console.log()，JavaScript 还提供了 console.error()（显示错误信息，通常带有红色图标）、console.warn()（显示警告信息，通常带有黄色图标）和 console.info()（显示信息性消息）。合理使用不同级别的日志可以使你的调试信息更清晰。
- (在这里插入 Console 面板显示不同级别日志输出的截图)
console.table()： 当你需要以表格形式展示数组或对象时，console.table() 非常有用。 JavaScript
```
const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 }
];
console.table(users);
```
- (在这里插入 Console 面板显示 console.table() 输出的截图)
console.group() 和 console.groupCollapsed()： 当你的控制台输出信息很多时，可以使用 console.group('GroupName') 和 console.groupEnd() 将相关的日志信息组织在一起，console.groupCollapsed('GroupName') 默认会折叠分组。
- (在这里插入 Console 面板使用 console.group() 和 console.groupCollapsed() 的截图)
清空控制台： 你可以使用 console.clear() 命令或者点击控制台顶部的清除按钮来清空控制台的输出。
过滤控制台输出： 控制台顶部有一个过滤器输入框，你可以输入关键字、日志级别等来筛选你想要查看的信息。

3. Network 面板：追踪网页资源的加载

Network 面板 用于查看网页加载过程中发出的所有网络请求，例如 HTML 文件、CSS 文件、JavaScript 文件、图片、字体等等。对于初学者来说，简单了解这个面板可以帮助你理解网页是如何加载各种资源的。

如何使用：

点击开发者工具顶部的 “Network” 选项卡，进入 Network 面板。
刷新你的网页，Network 面板会记录下所有加载的资源。

你能在这里做什么？

查看资源列表： 你可以看到每个资源的名称、状态（例如 200 OK 表示加载成功）、类型、大小、加载时间等信息。
- (在这里插入 Network 面板显示资源列表的截图，并标注显示资源名称、状态和类型)
了解加载顺序： 资源列表会按照加载的时间顺序排列，你可以大致了解网页资源的加载流程。
筛选资源类型： 你可以使用顶部的过滤器（例如 “All”、“Fetch/XHR”、“JS”、“CSS”、“Img” 等）来筛选特定类型的资源。
请求的详细信息： 点击 Network 面板中的任何一个请求，你会在下方看到一个详细信息面板，包含多个选项卡：
- Headers： 显示了 HTTP 请求和响应的头部信息，包括请求方法、状态码、Content-Type、Cache-Control 等。
  - (在这里插入 Network 面板显示请求 Headers 信息的截图)
- Payload： 如果是 POST 或 PUT 请求，这个选项卡会显示请求发送的数据。
  - (在这里插入 Network 面板显示请求 Payload 信息的截图)
- Preview 和 Response： 用于查看服务器返回的响应数据，Preview 通常会尝试以易读的格式显示（例如 JSON、HTML），Response 则显示原始的响应文本。
  - (在这里插入 Network 面板显示请求 Preview 和 Response 信息的截图)
- Timing： 显示了请求各个阶段的时间消耗，例如 DNS 查询、TCP 连接、请求发送、等待服务器响应、内容下载等，帮助你分析性能瓶颈。
  - (在这里插入 Network 面板显示请求 Timing 信息的截图)
过滤请求： Network 面板顶部提供了丰富的过滤选项，你可以按资源类型（All, Fetch/XHR, JS, CSS, Img, Font, Media, Doc, WS/WSS, Manifest, Other）、状态码、域名等进行过滤，方便你查找特定的请求。
排序请求： 你可以点击列表中的列头（例如 Name, Status, Type, Size, Time）对请求进行排序。按 Time 排序可以帮助你了解资源的加载顺序和耗时。
模拟网络条件 (Throttling)： 在 Network 面板的顶部，你可以找到一个 “No throttling” 的下拉菜单，点击它可以模拟不同的网络速度（例如 Fast 3G, Slow 3G, Offline），用于测试你的网页在不同网络环境下的用户体验。
- (在这里插入 Network 面板设置 Throttling 的截图)
查看 Cookies： 虽然 Application 面板是专门管理存储的，但你可以在 Network 面板的请求头和响应头中查看与当前请求相关的 Cookies 信息。

简单的调试练习

让我们来看一个包含一些常见错误的代码片段，尝试使用开发者工具来找到并解决它们。

HTML (index.html):

HTML

<!DOCTYPE html>
<html>
<head>
  <title>调试练习</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <p class="text">Hello, world!</p>
    <button onclick="showAlert()">点击我</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

CSS

.text {
  color: blue;
  font-size: 18px;
  text-align: cente; /* 拼写错误 */
}

JavaScript (script.js):

JavaScript

function showAlert { // 缺少括号
  alert("Button clicked!");
}

在 Chrome 中打开 index.html。你会发现文本没有居中。打开开发者工具的 Elements 面板，选中 <p> 元素，查看 Styles 选项卡，你会发现 text-align: cente; 有一个小的黄色三角形，提示这是一个无效值。将 cente 修改为 center，文本就会居中了。
- (在这里插入 Elements 面板显示 CSS 拼写错误的截图)
点击按钮，你会发现没有任何反应，并且 Console 面板 中会显示一个错误信息，提示 SyntaxError: Unexpected token {。双击错误信息，会跳转到 Sources 面板（我们稍后会介绍，但现在你可以看到错误发生在 script.js 的 function showAlert { 这一行）。很明显，函数定义缺少了括号 ()。将 function showAlert { 修改为 function showAlert() {，再次点击按钮，你应该会看到弹出的警告框。
- (在这里插入 Console 面板显示 JavaScript 语法错误的截图)

快捷键小贴士

记住一些常用的开发者工具快捷键可以显著提高你的效率：

F12 或 Ctrl + Shift + I (Windows/Linux), Cmd + Option + I (Mac): 打开/关闭开发者工具。
Ctrl + Shift + C (Windows/Linux), Cmd + Shift + C (Mac): 快速选中页面元素（进入 Elements 面板并选中元素）。
Ctrl + F (Windows/Linux), Cmd + F (Mac) (在 Elements 或 Sources 面板中): 查找元素或代码。
Ctrl + G (Windows/Linux), Cmd + G (Mac) (在 Sources 面板中): 跳转到指定行号。
Ctrl + Shift + J (Windows/Linux), Cmd + Shift + J (Mac): 直接打开 Console 面板。
Ctrl + R 或 F5 (Windows/Linux), Cmd + R (Mac): 刷新页面（在 Network 面板中查看资源加载）。
Ctrl + - 和 Ctrl + + (Windows/Linux), Cmd + - 和 Cmd + + (Mac): 放大/缩小开发者工具界面。

小技巧与最佳实践

善用元素选择器： 在 Elements 面板中，你可以直接在 DOM 树中输入 CSS 选择器来快速找到特定的元素。
复制 CSS 规则： 在 Styles 面板中，右键点击 CSS 规则可以选择 “Copy rule” 或 “Copy all declarations”。
在 Styles 中添加注释： 你可以在 Styles 面板中编辑 CSS 时添加注释 /* your comment */。
使用 Source Maps： 当你使用预处理器（如 Sass、Less）或模块打包工具（如 Webpack、Parcel）时，Source Maps 可以将编译后的代码映射回原始代码，方便你在 Sources 面板中进行调试。
保持开发者工具打开： 在开发过程中，保持开发者工具打开，可以让你及时发现错误和问题。

Chrome 开发者工具使用

https://blog.moxuan.xin/archives/chrome-kai-fa-zhe-gong-ju-shi-yong

作者

moxuan

发布于

2025-04-06

更新于

2025-08-31

许可

前端前端