大家好，我是长林啊！一个 Go、Rust 爱好者，同时也是一名全栈开发者；致力于终生学习和技术分享。

本文首发于微信公众号《全栈修炼之旅》，欢迎大家关注！

在开发过程中，调试无疑是我们解决疑难杂症的手段之一，但调试不仅仅是在解决 Bug 的时候才能应用的技能，当拿到一个新的项目时，我们也可以通过调试的方法，去快速了解代码、熟悉业务。

本文工具及代码环境：

Visual Studio Code Version: 1.92.1Node.js version：v20.10.0Yarn version：v4.4.0React version：v18.3.1

下面就是本文要涉及的几个方面：

概念

什么是调试呢？调试就是代码在某个平台（网页、小程序、桌面应用、Node.js后台服务等）运行，把运行时的状态（调用栈、执行上下文、DOM结构、组件状态、网络、缓存等）通过某种方式暴露出来，传递给开发工具做 UI 的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等，这个就是调试。

在前端开发中，调试是日常任务的一部分。例如，使用 Chrome DevTools 进行网页调试，我们可以查看和编辑 DOM 元素，监控网络请求，设置 JavaScript 代码的断点，以及利用 Performance 工具来分析页面性能。这些都是针对网页层面的调试手段。

对于服务器端或后端逻辑的调试，VSCode Debugger 提供了强大的支持。它允许我们同时对多个进程的代码进行调试，无论是理解代码逻辑还是追踪问题，VSCode Debugger 都是 Node.js 开发者的得力助手。

对于使用现代 JavaScript 框架（Vue/React）的开发者来说，特定的调试工具是必不可少的。例如，通过 React DevTools 和 Vue DevTools 这类Chrome插件，我们可以深入调试 React 和 Vue 组件。另外，独立的 React DevTools 也常用于调试 React Native 应用，这些工具帮助我们优化组件逻辑和性能。

常用的调试工具

前端开发中常用的调试工具非常多，涵盖了从浏览器内置工具到代码编辑器插件，再到网络抓包和模拟数据等多个方面；下面就以最主要的 Chrome DevTools、VS Code Debugger 和 React DevTools 为侧重点。

Chrome DevTools

Chrome DevTools 是一套直接内置于 Google Chrome 浏览器中的 Web 开发人员工具。Chrome DevTools（简称DevTools）是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用 DevTools，可以更加高效的定位页面布局问题，设置 JavaScript 断点并且更好的理解代码优化。

注意: 如果你是一个web开发者并且希望获取最新版本的DevTools，你可以使用 Google Chrome Canary.

打开 DevTools 的方式有很多种，因为不同的用户希望快速访问 DevTools UI 的不同部分。

要使用 DOM 或 CSS，请右键单击页面上的元素并选择“检查”以跳转到“元素”面板。或者按 Command+ Option+ C(Mac) 或 Control+ Shift+ C(Windows、Linux、ChromeOS)。

要查看记录的消息或运行 JavaScript，请按 Command+ Option+ J（Mac）或 Control+ Shift+ J（Windows、Linux、ChromeOS）直接跳转到控制台面板。

访问 DevTools

访问DevTools，首先用 Chrome 打开一个 web 页面或 web 应用，也可以通过下面的方式：

DevTools 窗口会在 Chrome 浏览器的底部（默认是在底部）打开。

下面是一些有用的快捷键来快速的打开DevTools:

为了日常工作，学习快捷键将帮助你节省更多的时间。

DevTools 窗口

DevTools 在窗口顶部的工具栏对不同的任务功能进行分组。在每个工具栏选项卡和对应的操作面板中，你可以处理某项特殊的任务，例如 DOM 元素，资源和源码。

DevTools 目前主要包括以下八个主要功能组：

Console：通过控制台查看消息并运行 JavaScript。

Sources：调试 JavaScript，在页面重新加载时保留在开发者工具中所做的更改，保存和运行 JavaScript 代码段，并将在开发者工具中所做的更改保存到本地源代码中。

Network：查看和调试网络活动。

Recorder：录制、重放和衡量用户流。

Performance：找到提高加载和运行时性能的方法。

Memory：查找并修复影响页面性能的内存问题，例如内存泄漏。

Application：检查已加载的所有资源，包括 IndexedDB 或 Web SQL 数据库、本地和会话存储、Cookie、应用缓存、图片、字体和样式表。

Security：调试混合内容问题、证书问题等。

你可以通过 Ctrl+[ 和 Ctrl+] 快捷键在不同面板之间进行切换。

还有更多使用技巧可以查看官方文档。

source 面板

使用 Chrome 开发者工具 Sources 面板可以执行以下操作：

面板包含三个部分：

包含文件树的页面标签页。此处列出了页面请求的每个文件。代码编辑器部分。在 Page 标签页中选择文件后，该文件的内容会显示在此处。Debugger 部分。用于检查网页 JavaScript 的各种工具。

如果开发者工具窗口较宽，默认情况下，Debugger 位于代码编辑器的右侧。在这种情况下，Scope 和 Watch 标签页会将 Breakpoints、Call stack 和其他作为可收起的部分联接。如下图：

更多信息可以查看 Chrome 开发者文档！

VS Code Debugger

VS Code，全称为 Visual Studio Code，是由微软开发的一款免费且开源的代码编辑器。自从2015年发布以来，VS Code 凭借其高效、轻量和强大的功能迅速赢得了广大开发者的青睐。以下是 VS Code 流行的一些主要原因：

VS Code 内置的调试工具称为 VS Code Debugger，它为开发者提供了一个强大且易用的调试环境。以下是 VS Code Debugger 的主要功能：

下载 VS Code（如果已经安装可以忽略此步骤）

VS Code 是免费的，官网下载地址

配置 VS Code

先对 VS Code 有个大致了解，下面会具体实操调试技巧！

使用 Vite 创建 React 项目

以上代码可以在 clin211/react-awesome/tree/debug-react-project 中获取到！

React DevTools

在web端的 react项目里， React DevTools是作为浏览器的插件引入进来， chrome中可以在扩展程序里面添加；可以通过以下方式安装：

打开 chrome 网上商店可能需要科学上网，firefox 和 microsoft edge 不需要科学上网也可正常安装插件，使用上并无区别。

Safari 或其他浏览器:

工具入口

如果检测到当前web是 react 项目，右上角的工具小图标（地址栏右侧）会发生改变，分别对应着：

chrome 中右键点击检查，打开调试器，然后发现在调试器的 tab 栏末尾有最后两栏比较特殊的tab，分别是 ⚛️Components 和 ⚛️Profiler，这两个就是 react devtools 的功能入口了，下面会来介绍各自的功能。

Components 面板功能说明

在 Components 面板中，我们可以看到组件的结构以及相应的数据。

下面我们一个例子看看，DOM 结构如下：

import { useState } from 'react'
import classNames from 'classnames';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App () {
  return (
    
      

        
        
      
      
Vite + React
      
      

        Click on the Vite and React logos to learn more
      
    
    
  
}
function Counter () {
  const [count, setCount] = useState(0)
  return 

     setCount((count) => count + 1)}>
      count is {count}
    
    

      Edit src/App.jsx and save to test HMR
    
  
}
export default App

这段代码中， 组件中有两个 组件和一个 组件，我们看看浏览器中 Components 面板有啥变化，如下图：

还可以看到组件中的 props，如 组件中的 props：

function Logo(props) {
  return 
    
  
}

当然也能看到相关 Hooks，比如 Counter 组件中的 state count：

function Counter() {
  const [count, setCount] = useState(0)
  return 

     setCount((count) => count + 1)}>
      count is {count}
    
    

      Edit src/App.jsx and save to test HMR
    
  
}

在项目中用了一些 react-router， redux等工具后，虚拟 Dom树可能会受到一些侵入，比如 Dom树中多了一些 Conext.Consumer的结构，这些是 context的语法，不管这些结构，双击目标组件就可以展开当前组件下的所有子组件，这种方式有个弊端就是在组件层级很深的情况下，一层一层的找，效率太低了，当然 React Devtools 开发者也想到了，那就是 Components 中的过滤器！

使用过滤器可以轻松过滤掉一些不想要展示 Dom ，点开 setting 小图标的下拉框里，有一栏是组件的设置，然后找到 "Hide components where"，在这里可以添加过滤器，从而进行过滤的设置，下面列出了各个配置代表什么含义。

下拉框选择过滤类型：

名称含义

location

router 路由匹配的组件

name

组价名

type

各种组件类型细分（参考下面表格）

hoc

高阶组件

location（集成 react-router 之后才会有） 和 name 都是进行正则匹配的。

如果过滤类型选择 type 的话，匹配模式就有9种，如下：

名称含义

class

继承 React.Component的类组件

context

共享上下文 context

function

函数式组件

forward ref

函数式组件传递ref的

dom nodes

浏览器支持的 html 元素，div,h1,p

memo

函数式组件做props优化的

other

其他

profiler

测量性能的

suspense

懒加载根组件

单组件调试

当我们找到目标组件后，双击目标组件，右侧就会出现(从上往下)工具栏、props、hooks、rendered by、source

我们重点来看看第一行出现的那些 icon 分别是些什么(从左往右)：

显示懒加载的 fallback 状态

第一个显示懒加载的 fallback 状态，看起来像一个“闹钟”的按钮，实际上与 相关，当 组件的 children 还没加载出来的时候，有一个过渡的 loading 效果，点击按钮，就会显示 fallback 属性里的 ReactNode，用来预览加载效果还是不错的。比如在代码中添加 组件后效果调试如下：

function App () {
  return (
    <Suspense fallback={
Loading...
}>
      

        
        
      
      
Vite + React
      
      

        Click on the Vite and React logos to learn more
      
    
  )
}

小图标高亮就说明处于 loading 的状态调试。这里演示用的 loading 的文字，也可以写成骨架屏的方式，体验可能更佳！

检查组件的真实 Dom

在 React中写的 JSX代码渲染出来的组件树其实都不是真实的 DOM树，所有调试样式、修改文案、直接操作 DOM的需求，还是需要回到 chrome devtools的 Element 面板进行调试，这里仍然会面临 DOM 层级很深的情况，可以通过“小箭头”直接在页面上点击你要调试的 DOM。如下：

上面图中这种也是调试真是 DOM 的一种方式，还有就一种方式就是 Components 中工具栏的第二个小眼睛的按钮，点击它之后，它会直接切到 element 面板下且聚焦在对应的 DOM 上，如下：

Debug 信息

也就是第三个“小虫子”的图标，在最开始用的时候会挺懵逼的，点了以后好像没有什么作用，然后悬停一会会有一段文字：log this component data to the console（将组件数据记录在console中）；然后切换到 chrome devtools 的 console 就能发现端倪了，这里出现了和 相关的组件信息：

打印的信息如下：

定位 Source-map 信息

最后一个按钮很熟悉，平时都会在一些组件库文档中的代码案例中看到，比如 mui等UI组件库，用来作为展开代码的调试入口， react devtools的功能也是类似，这里是定位该组件对应的 Source文件，这里我就切换到了 组件对应的 App.jsx文件中，在开发环境中配置好 source-map，定位组件就能直接显示源码。

/** @type {import('vite').UserConfig} */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true
  },
})

这个 source 面板的功能就非常强大了，可以打断点、单步调试、调用栈、查看上下文对象等等，这一块的内容在下面的内容中介绍！

性能问题追踪

还有一个 ⚛️profiler 是什么东西呢，可能刚开始接触 React 的同学可能不太了解，在 react 的官方文档中有介绍一个 Profiler API ，能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销，用法：

虽然在项目中调试比较灵活，但是对项目有一定的代码侵入，甚至会有一些性能的损耗，所以当遇到使用全局 profiler 的场景的话，可以优先尝试一下用 React devtools 的 profiler 功能。

下面为了测试 profiler 功能，新增一个 组件中增加了一万条数据来显示，看下具体的耗时如何：

function List () {
  return 

    {Array.from({ length: 10000 }).map((_, index) => 
{index}
)}
  
}

这里是一个典型的性能分析火焰图，展示的是当前这个页面中，各个组件的耗时情况，如果是有耗时比较长的异常组件，横向柱状图会显示成黄色，甚至更严重的红色。从实际效果来看， 组件的耗能更高。

在 profiler 的系统设置中，还能打开组件何时渲染的开关，以及隐藏固定渲染时间以下的组件；

比如，我们把低于 16ms 的组件就在火焰图中隐藏渲染；设置如下：

分析性能：

这里 "Why did this render" 就说明了 组件是第一次渲染，渲染了171.6毫秒

在 Chrome 中调试 React 项目

有了上面的基础，接下来我们看看在 Chrome 中如何调试 React 项目，首先要将项目运行起来，然后打开 Chrome DevTools，在 Sources 面板找到 src/main.jsx，打上个断点（就是对应文件的代码行的地方，鼠标左击就添加一个断点）：

添加断点之后，刷新页面就可以进入调试流程了，如下图：

代码会在断点处断住，右边会显示当前 watch 监听变量，breakpoints 断点，scope 作用域，call stack 调用栈。还可以给请求和 DOM 打断点。

下图箭头所指的这行按钮就是控制执行行为的（Chrome 详细说明）：

从左往右分别是：

知道了这些调试方法后，就可以很方便的调试了，下面来看看我们平时用的最多的 IDE 工具 VS Code 如何调试？

在 VS Code 中调试 React 项目

React 项目归根到底也是 JS，调试网页的 JS，除了 Chrome DevTools 外，还有一种更好用的调试方式——VSCode Debugger。

创建调试文件

创建调试文件分为自动创建和手动创建。

用 VSCode 打开项目目录，在项目的根目录创建 .vscode/launch.json 文件：

自动创建：

打开 Debug 窗口，然后点击 create a launch.josn，如下图：

点击右下角的 Add Configuration... 按钮，

点击后，选择 Chrome: Launch，文件中就会出现一段 json 配置：

把访问的 url 改为开发服务器启动的地址：

然后进入 Debug 窗口，点击启动：

点击按钮之后，你会发现它启动了浏览器，并打开了配置中的 url：

VS Code 中还会有一排控制执行的按钮：

上面的控制按钮分别对应恢复执行、单步执行、进入函数调用、跳出函数调用，这个和 Chrome DevTools 一样的；还多了刷新和停止的按钮。

在代码打个断点，然后点击右边第二个按钮刷新，代码会执行到断点处断住，本地和全局作用域的变量，调用栈等都会展示在左边；浏览器也会刷新。

下面是各个功能的介绍：

看起来和 Chrome DevTools 里调试差不多，在 VSCode Debugger 里调试有啥好处呢？

好处就是不用切换工具，之前是调试在 Chrome DevTools，写代码在 VSCode，而现在写代码和调试都可以在 VSCode 里，无需在 Chrome DevTools 和 VSCode 之间切换。这种集成化的环境让开发者能够边写代码边调试，从而提高开发效率。

相比于 Chrome DevTools 的异常断点的设置，VS Code 表现形式略有不同，如下图：

配置说明launch 和 attach

无论自动创建还是手动创建，都会选择 launch 还是 attach 模式！

先引入一段配置，它们只是 request 的配置不同，然后 attach 模式有 port，launch 模式有 url：

{
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

常用常量下面是 launch 和 attach 类型共有的属性以下是特定于类型 launch(启动)的配置属性：总结

本文涵盖了从基础概念到具体实践的 React 调试全过程。文章分为五个部分：

介绍了什么是调试以及调试过程中我们应该关心那些东西。常用的提示工具，深入探讨了多种调试工具和技巧，特别是在 Chrome DevTools 和 React DevTools 两部分有比较深入的探索，让我们再开发过程中能够快速定位问题并进行有效调试。使用 vite 创建项目，详细介绍了如何使用 vite 这一现代前端构建工具快速搭建 React 项目，为调试工作提供了一个高效的开发环境。在 Chrome 中调试项目，展示了如何利用 Chrome DevTools 的强大功能。在 VS Code 中调试项目，重点介绍了 VS Code 的 Debugger 功能，包括设置断点、单步执行、监视变量等，在编码环境中直接进行调试。

通过这五个部分的系统性学习，不仅能够理解 React 调试的基础知识，还能掌握在 VS Code 和 Chrome 中进行高效调试的实用技能。虽然文章是以 React 作为项目的支撑点，但是换成 Vue 也大相径庭！