VSCode

[WangShuXian6]

VSCode

[WangShuXian6]

vscode 如何对vite + react + typescript 项目进行断点调试

在 VS Code 中对 Vite + React + TypeScript 项目进行断点调试需要一些配置，主要是设置 launch.json 文件以支持调试环境。以下是步骤：

1. 安装必要的扩展

确保已安装以下 VS Code 扩展：

• Debugger for Chrome（或适用于您浏览器的调试器扩展）
• ESLint（可选，确保代码质量）

2. 创建 launch.json

.vscode\launch.json
首先，您需要创建调试配置文件 launch.json，这是 VS Code 调试的核心配置文件。执行以下步骤：

1. 打开 VS Code，按 Ctrl+Shift+P 并搜索 Debug: Add Configuration。
2. 选择 Chrome，这是一个常用的调试环境。

配置文件 launch.json 可能类似如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Vite + React",
      "url": "http://localhost:5173", // Vite 默认端口
      "webRoot": "${workspaceFolder}/src", 
      "sourceMaps": true,
      "trace": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

3. 配置 Vite 进行调试

Vite 默认支持调试，但需要确保它生成了可以映射到 TypeScript 源代码的 Source Maps。Vite 中的 sourceMap 通常默认开启，但可以在 vite.config.ts 文件中明确配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true // 确保生成 source maps
  }
})

4. 启动 Vite 开发服务器

在终端中运行以下命令启动 Vite 开发服务器：

npm run dev

5. 启动调试

1. 确保在 src 文件夹中的 TypeScript 或 React 代码上放置断点。
2. 点击 VS Code 左侧调试图标，选择 Vite + React 调试配置，点击“启动调试”按钮。
3. VS Code 会在 Chrome 浏览器中自动启动调试。

6. 确保断点可以正常命中

在调试器启动后，加载您的应用并导航到断点所在的页面。VS Code 应该会在合适的地方命中断点，您可以在调试器中查看变量、调用堆栈等。

7. 调试技巧

• 在 .tsx 文件中放置断点，以调试 React 组件。
• 使用浏览器中的调试控制台与 VS Code 调试控制台同步进行调试。
• 使用 Ctrl+Shift+D 快捷键快速打开调试面板。

按照这些步骤，您应该能够在 VS Code 中对 Vite + React + TypeScript 项目进行顺利的断点调试。