前端调试功能介绍

前言

在现代的 Web 开发中，调试是一个不可或缺的技能。浏览器的开发者工具提供了强大的调试功能，帮助开发者解决 JavaScript 代码中的问题。本文将介绍如何使用 Chrome 浏览器的调试工具，从基本的 JavaScript 文件调试到更复杂的前端框架调试。

debugger 的一些优点

debugger 和 console.log 都是用于调试 JavaScript 代码的工具，但debugger 在某些情况下具有比 console.log 更好用的特点：

实时暂停执行： debugger 可以实时暂停代码的执行，使开发者能够逐步查看和分析代码的执行流程。这对于深度调试非常有用，特别是处理复杂的问题或追踪代码执行路径时。
变量查看和监视： 使用 debugger，可以轻松查看当前作用域内的变量值，并监视这些值的变化。可以直接在调试器中检查和修改变量，而不必在代码中插入多个 console.log 语句。
调用堆栈： debugger 可以查看函数的调用堆栈，这对于追踪错误源头和理解代码执行流程非常有帮助。并且能够在堆栈中导航，查看函数调用的顺序。
条件断点： 可以设置条件断点，只有在满足特定条件时才会触发暂停。这可以帮助开发者在特定情况下捕获问题，而不必在代码中添加额外的条件检查和 console.log 语句。
单步执行： debugger 允许开发者逐步执行代码，包括单步进入函数、单步跳过函数、单步退出函数等。这有助于更详细地了解代码的执行流程和状态变化。
监视表达式： 可以添加监视表达式，以实时监视特定变量或属性的值。这对于追踪状态变化或检查特定条件的变化非常有用。
不会影响生产环境： 使用 debugger 不会影响生产环境中的代码执行，因为可以在开发者工具中启用或禁用断点。这意味着开发者可以在开发过程中使用 debugger，然后在发布应用程序时轻松移除它们。

Sources 面板

Sources 面板是 Chrome Devtools 中用于调试 JavaScript 代码的重要工具，它通常可以分为从左到右三个主要板块，每个板块都有不同的功能。

左侧文件导航器（File Navigator）

这是 Sources 面板的左侧区域，用于浏览和导航当前页面的源代码文件。它列出了页面使用的所有文件，包括 HTML、CSS、JavaScript 等。可以单击文件名来打开和查看代码文件。此区域还提供了文件夹结构，帮助开发者组织和浏览项目中的文件，还可以通过搜索框来快速查找特定文件。

中间代码编辑器（Code Editor）

这是 Sources 面板的中间区域，用于查看和编辑选定的源代码文件。在这里可以查看代码的内容、行数、语法高亮显示等。如果在代码中设置了断点，它们也会在此处显示。开发者可以在代码编辑器中进行调试操作，如单步执行、查看变量、检查堆栈跟踪等。这是主要用来分析和调试 JavaScript 代码的地方。

右侧调试面板（Debugging Panel）

这是 Sources 面板的右侧区域，包含了与调试相关的功能和选项。

操作按钮介绍

Resume ：恢复代码执行，直到遇到下一个 debugger。

Step over ：单步执行，遇到函数则跳过。

Step info ：单步执行，遇到函数则进入到函数内部，遇到异步函数也会先进入回调中。

Step out of ：当执行到函数内部的时候，跳出此函数。

Step ：执行正常的代码逻辑，遇到异步函数会先执行同步代码。

Deactivate breakpoints ：让断点失效。

属性介绍

Watch（观察表达式） ：添加监视表达式，以跟踪变量和对象的值随时间的变化。

Breakpoints（断点） ：设置断点，以在代码执行到特定位置时暂停执行并进入调试模式。

Scope（作用域） ：显示当前函数的作用域和变量，查看和修改变量的值。

Call Stack（调用堆栈） ：显示当前 JavaScript 执行的调用堆栈，让开发者了解代码执行的顺序和上下文。

XHR/fetch Breakpoints（网络请求断点） ：设置断点以在 XMLHttpRequest 或者 fetch 请求的不同阶段中暂停执行。

DOM Breakpoints（DOM 断点） ：设置断点以在 DOM 元素的不同变化事件发生时暂停 JavaScript 执行。

Global Listeners（全局监听器） ：这个选项用来查看全局事件监听器（Global Event Listeners）。全局事件监听器是在整个页面范围内监听事件的 JavaScript 函数。通过选择这个选项，可以查看页面上所有全局事件监听器的列表，并快速导航到它们的定义位置。这有助于开发者追踪事件处理程序，识别潜在的性能问题或事件处理逻辑中的错误。

Event Listener Breakpoints（事件监听器断点） ：设置断点以在特定类型的事件被触发时暂停 JavaScript 执行。

CSP Violation Breakpoints（CSP 违规断点） ：这个选项用于设置断点，以在内容安全策略（Content Security Policy，CSP）违规发生时暂停 JavaScript 执行。CSP 是一种安全性机制，用于防止恶意脚本注入和其他安全漏洞。启用这个选项后，当页面上的 CSP 规则被违反时，代码执行会在违规的位置暂停，查看违规的详情并诊断问题，以确保页面的安全性。

基本的 JavaScript 文件调试

首先，确保网页在 Chrome 浏览器中打开。然后，右键单击页面上的任何位置，选择"检查"或按下 Ctrl+Shift+I/F12（或 Cmd+Option+I/F12 在 Mac 上），以打开 Chrome 开发者工具。刷新页面或触发 JavaScript 代码执行的事件。当代码执行到断点位置时，浏览器会自动停止，并在 Sources 面板中突出显示当前执行的代码行。使用控制台查看变量的值，单步执行代码，查看调用堆栈等。

js 复制代码

function multiply(a, b) {
  debugger;
  return a * b;
}

function add(a, b) {
  return a + b;
}

function calculate() {
  const x = 5;
  const y = 3;
  const result = multiply(x, y);
  console.log("Result:", result);
}

function startDebugger() {
  debugger;
  calculate();
}

startDebugger();

通过调试上面的代码，可以看到代码执行中作用域的变化，以及各个函数的调用。

项目调试

调试一个 React/Vue 项目与调试普通 JavaScript 文件在基本原理上是相似的，在文件中 debugger 或者在 Soucres 中打断点，调试的方法是相同的。但前端项目通常会使用复杂的组件层次结构和状态管理，因此需要更多的工具和技巧来帮助我们调试。以下以调试 React 项目为例，列举主要步骤。

安装 React DevTools

首先，确保已经安装了 React DevTools 扩展程序。可以在 Chrome 网上应用商店中找到它，并将其添加到浏览器中。React DevTools 扩展程序提供了有关 React 组件的详细信息，安装完成后，在开发者工具中的 "Components" 选项卡中可以查看 React 组件。

在 Components 面板中调试

浏览组件层次结构：

在调试工具的 "Components" 面板中，我们将看到 React 应用的组件树形结构。这个树形结构显示了应用中所有的组件，并以嵌套的方式显示它们的层次结构。可以展开或折叠组件以查看其子组件。

选择组件：

通过在 "Components" 面板中点击组件，我们可以选择要查看的组件。选中的组件将在页面上以虚线框的形式高亮显示，并且在 "Components" 面板的右侧将显示该组件的详细信息，包括 props 和状态。

查看组件的 props 和状态：

选中组件后，我们可以在 "Components" 面板的右侧查看该组件的 props 和状态。这些信息对于了解组件的当前状态和数据流非常有用。

查看组件的 DOM 结构：

在 "Components" 面板中，可以通过右上角的眼睛图标定位到组件的 DOM 结构，包括组件渲染的 HTML 元素以及它们的属性。

编辑组件的 props 和状态（仅用于调试）：

在 "Components" 面板中，我们可以编辑选中组件的 props 和状态，以模拟不同的数据传递给组件。这在调试期间测试不同情况时非常有用。

在 Sources 面板中调试：

通过点击右上角的 "<>" 按钮可以定位到当前组件的源代码文件位置，与基本的 JavaScript 文件调试类似，可以在 Sources 面板中设置断点，单步执行代码，查看变量和状态。不过，我们可以更轻松地导航和调试 React 组件，因为 React DevTools 提供了对组件层次结构的可视化。

总结

Chrome 浏览器的开发者工具是一个强大的调试工具，能够帮助开发人员调试各种类型的 JavaScript 代码，掌握这些调试技能对于成为一名高效的 Web 开发者至关重要。