VS Code 调试 React 应用

若非

August 25, 2023

2439 views

One comment

3793 words

开发工具 React

本文发布于微信公众号码上花甲，每天 9: 00 准时为你推送高质量前端开发相关文章！更有精品资源供你免费获取！欢迎关注。

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

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

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

$ npx create-next-app

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

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

"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>
  );
}

然后，本地跑起来：

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

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

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

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

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

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

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

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

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

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

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