VS Code 调试 React 应用

Author：若非
发布时间：August 25, 2023
267 views
No comments
3785 words
Categories：开发工具 React

本文发布于微信公众号[**码上花甲**](https://mp.weixin.qq.com/s?__biz=MzIzMDM4MzE3Mw==&mid=2247490705&idx=1&sn=e2a6c842de6b9f9a91515d3ffd21bb42&chksm=e8b517bbdfc29ead1ce187c97323a3a72d88c40e902a88bf8a7f85e9f74a04fafb29c3993f98&token=76701651&lang=zh_CN#rd)，每天 9: 00 准时为你推送高质量前端开发相关文章！更有精品资源供你免费获取！欢迎关注。

---

身为一名优秀的前端开发攻城狮，我们每天都会调试 React/Vue 代码。大家是怎么调试的呢？

* 直接看代码找问题，用不着调试！——这是大牛，一般人搞不定 ~
* console.log 打日志——最最常见的调试方式了吧这应该是。
* 借助 Chrome Devtools 的 debugger 来调试——不错不错~ 但是，会不会遇到要调试的代码是编译过后的代码呢？未经编译的 JS 代码借助 Chrome DevTools 的 debugger 体验还是不错的。
* 直接用 VS Code 的 debugger 来调试——哈哈~ 今天要说的就是这个方法哦。

就以一个简单的 Demo 为例吧：

```bash
$ npx create-next-app
```

Next.js 是 React 官网推荐的一个生产级别的框架，大家用这个命令来初始化项目就可以了。

完了之后，把 `page.tsx` 文件改一下，内容如下：

```jsx
"use client";

import { useState } from "react";

export default function Home() {
  const [counter, setCounter] = useState(0);

function handleClick() {
    setCounter(counter + 1);
  }

return (
    <main className="flex min-h-screen flex-col items-center justify-start p-24">
      <input value={counter} disabled style={{ textAlign: "center" }} />
      <div
        className="counter"
        style={{ paddingTop: "15px", cursor: "pointer" }}
      >
        <button onClick={handleClick}>Increase</button>
      </div>
    </main>
  );
}
```

然后，本地跑起来：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/1.png)

浏览器显示的页面长这样：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/2.png)

如果跟你的页面不一样也不要奇怪，因为我把一些没用的 CSS 给删了。只要你的页面上有一个数字 0 和一个按钮 `Increase` 就行。

到这里准备工作就做完了。

接下来，要如何用 VS Code 来调试呢？

在项目根目录创建一个文件：

```bash
$ touch <project_dir>/.vscode/launch.json
```

你要是不想用命令，点几下 VS Code 界面上的几个按钮也行：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/3.png)

然后在弹出的框框中选择「Web 应用(Chrome)」即可：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/4.png)

之后就会在项目根目录的 .vscode 文件夹下生成一个 `launch.json` 文件，然后改成下面的内容：

```json
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: <https://go.microsoft.com/fwlink/?linkid=830387>
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug",
      "request": "launch",
      "type": "chrome",
      "url": "<http://localhost:3000>"
    }
  ]
}
```

我简单说一下代码中那几个字段的意思：

* `name`：定义名为 `debug` 的调试配置。
* `request`：该字段有两个值，分别是 `launch` 和 `attach`。`launch` 的意思是，我们希望调试器启动我们的代码并开始调试会话。
* `type`：表示让调试器应该使用哪种类型的调试器。`chrome` 的意思是，我们希望使用 Chrome 调试器来调试我们的代码。
* `url`：指定了我们要调试的 Web 应用的 URL。显然，我们这个 Demo 是跑在本地 3000 端口上的。

让我们开始打断点吧 ~ 这里我打了两个断点：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/5.png)

然后，按下键盘的 `F5` 键，或者是点一下 VS Code 中的调试按钮：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/6.png)

这时候你会发现打开了一个新的 Chrome 窗口。

成功看到页面之后，点一下页面上的 `Increase` 按钮，神奇的事情发生了：

程序果然在断电的地方断住了！变量、调用堆栈、断点信息等等都有。

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/7.png)

释放断点，继续往下走。

还能在「调试控制台」对表达式求值：

![](https://cdn.jsdelivr.net/gh/smpower/oss.hi-ruofei.com@main/2023/08/25/8.png)

咱就说，是不是很方便吧。