VScode如何调试javascript文件

打开项目的 .vscode/launch.json，在调试配置中添加 runtimeExecutable 字段，粘贴你的 Node 路径：

runtimeExecutable写成node的路径，即可以直接调试

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${file}", // 调试当前打开的 JS 文件
      "console": "integratedTerminal",
      "runtimeExecutable": "C:\\Program Files\\nodejs\\node.exe" // Windows 默认路径
    }
  ]
}

怎么调试typescript文件

VS Code（内置调试器）+ Node.js（运行环境）+ SourceMap（源码映射），无需额外安装复杂插件，就能直接断点调试 TS 源码（而非编译后的 JS）。

以下是详细调试方案（分 Node.js 后端 / 前端浏览器场景）：

一、核心前提

1. 已安装 Node.js（node -v 能显示版本，如你之前的 v22.18.0）；
2. 已初始化 TS 项目（执行 npm init -y + npm install typescript --save-dev）；
3. 关键配置：tsconfig.json 中启用 sourceMap: true（让调试工具关联 TS 源码和编译后的 JS）。

二、场景 1：调试 Node.js 端 TS（最常用，如后端、TS 脚本）

步骤 1：配置 tsconfig.json（关键）

确保 tsconfig.json 包含以下核心配置（生成 JS 和 SourceMap）：

json

{
  "compilerOptions": {
    "target": "ES6", // 兼容你的 Node 版本（Node v22 支持 ES6+）
    "module": "CommonJS", // Node.js 默认模块系统
    "outDir": "./dist", // 编译后的 JS 文件输出目录（如 dist/index.js）
    "rootDir": "./src", // TS 源码目录（如 src/index.ts）
    "sourceMap": true, // 必须启用！生成 .map 文件，关联 TS 和 JS
    "strict": true // 可选，开启严格模式（推荐）
  },
  "include": ["src/**/*"], // 包含要编译的 TS 文件
  "exclude": ["node_modules"] // 排除依赖
}

步骤 2：编写测试 TS 代码

在 src/index.ts 中写一段简单代码（用于调试）：

typescript

运行

// src/index.ts
function add(a: number, b: number): number {
  return a + b; // 在这里打个断点（左侧点红色圆点）
}

const x = 10;
const y = 20;
const result = add(x, y);
console.log(`结果：${x} + ${y} = ${result}`);

步骤 3：配置 VS Code 调试（launch.json）

1. 打开 TS 项目文件夹（VS Code 必须打开项目根目录）；
2. 按 Ctrl+Shift+D 打开「运行和调试」面板，点击「创建 launch.json 文件」，选择 Node.js；
3. 替换 launch.json 为以下配置（关键：关联 SourceMap 和 TS 源码）：

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试 TS（Node）",
      "program": "${workspaceFolder}/src/index.ts", // 直接指定 TS 入口文件（而非 JS）
      "outFiles": ["${workspaceFolder}/dist/**/*.js"], // 编译后的 JS 路径（对应 tsconfig 的 outDir）
      "sourceMaps": true, // 启用 SourceMap 关联
      "console": "integratedTerminal",
      "runtimeExecutable": "node" // 若之前配置过 Node 路径，可替换为具体路径（如 C:\\Program Files\\nodejs\\node.exe）
    }
  ]
}

步骤 4：编译 + 启动调试

1. 编译 TS：打开终端，执行 npx tsc（会根据 tsconfig.json 生成 dist/index.js 和 dist/index.js.map）；
   • 若想实时编译（修改 TS 后自动更新 JS），执行 npx tsc --watch（保持终端运行）；
2. 在 src/index.ts 的 return a + b 行左侧打断点（红色圆点）；
3. 按 F5 启动调试：VS Code 会直接在 TS 源码断点处暂停 （而非 JS 文件），调试操作和 JS 一致：
   • 单步调试（F11）、查看变量（左侧「变量」面板）、监视表达式（「监视」面板）等；
   • 终端会输出 结果：10 + 20 = 30。

示例

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowImportingTsExtensions": false,
    "noEmit": false,
    "sourceMap":true
  },
  "include": ["*.ts", "index_1.js", "newfolder/index_enterprise.ts", "newfolder/index_version2.ts", "newfolder/index.ts", "newfolder/index(2).ts"],
  "exclude": ["node_modules", "dist"]
}

launch.json

{
    "version":"0.2.0",
    "configurations": [
        {
            "type":"node",
            "request":"launch",
            "name":"启动程序",
            "program":"${workspaceFolder}/simple_code.ts",    //代码的路径
            "outFiles":["${workspaceFolder}/dist/simple_code.js"], //代码的路径
            "sourceMaps": true,
            "console":"integratedTerminal",
            "runtimeExecutable": "D:\\软件\\Nodejs\\node.exe"   
        }
    ]
}

编译 + 启动调试

1. 编译 TS：打开终端，执行 npx tsc（会根据 tsconfig.json 生成 dist/index.js 和 dist/index.js.map）；
   • 若想实时编译（修改 TS 后自动更新 JS），执行 npx tsc --watch（保持终端运行）；
2. 在 src/index.ts 的 return a + b 行左侧打断点（红色圆点）；
3. 按 F5 启动调试：VS Code 会直接在 TS 源码断点处暂停 （而非 JS 文件），调试操作和 JS 一致：
   • 单步调试（F11）、查看变量（左侧「变量」面板）、监视表达式（「监视」面板）等；
   • 终端会输出 结果：10 + 20 = 30。

项目文件夹的结构

你的项目文件夹/
├─ .vscode/          # VS Code 配置文件夹（放 launch.json 等）
│  └─ launch.json    # 调试配置
├─ src/              # TS 源码文件夹
│  └─ index.ts       # 你的 TS 代码
├─ dist/             # 编译后的 JS 输出文件夹（自动生成）
├─ tsconfig.json     # TS 编译配置（正确位置！）
└─ package.json      # 项目依赖配置（npm init 生成）

npm start的index.ts怎么进行调试

在 Node.js 环境中调试 index.ts（通过 npm start 启动），核心是 结合 TypeScript 编译配置 + 调试工具 （VS Code 内置调试 /node-inspect），确保调试时能映射到原始 TS 代码（而非编译后的 JS）。以下是 step-by-step 完整教程，兼顾新手友好和实际开发场景：

一、前置准备（必做）

1. 项目基础配置 ：确保项目已初始化 TypeScript 和 package.json（若未配置，先执行以下命令）：

   bash

   运行

   # 初始化 package.json（默认配置）
   npm init -y
   # 安装依赖（TypeScript + 类型声明 + 开发工具）
   npm install typescript @types/node --save-dev
   # 安装 ts-node（可选，支持直接运行 TS，无需手动编译）
   npm install ts-node --save-dev

2. 关键配置文件：

   • 根目录创建 tsconfig.json（TypeScript 编译配置，核心是开启 sourceMap，实现 TS→JS 代码映射）：

     json

     {
       "compilerOptions": {
         "target": "ES6",                // 编译目标 ES 版本
         "module": "CommonJS",           // 模块系统（适配 Node.js）
         "outDir": "./dist",             // 编译后的 JS 文件输出目录
         "rootDir": "./src",             // 原始 TS 代码目录（假设 index.ts 在 src 下）
         "strict": true,                 // 开启严格模式（推荐）
         "esModuleInterop": true,        // 兼容 CommonJS/ES 模块
         "sourceMap": true               // 关键！生成 .map 映射文件，调试时关联 TS 源码
       },
       "include": ["src/**/*"],          // 要编译的 TS 文件（src 目录下所有）
       "exclude": ["node_modules"]       // 排除 node_modules
     }

   • 配置 package.json 的 scripts（npm start 对应的启动命令）：两种常见启动方式，选一种即可：

     json

     {
       "scripts": {
         // 方式 1：先编译 TS 为 JS，再运行 dist/index.js（稳定，推荐生产/调试）
         "build": "tsc",                  // 编译命令（生成 dist 目录）
         "start": "node dist/index.js",   // 运行编译后的 JS
         
         // 方式 2：用 ts-node 直接运行 TS（无需手动编译，开发调试更便捷）
         "start:ts": "ts-node src/index.ts"
       }
     }

3. 项目目录结构（示例）：

   plaintext

   your-project/
   ├── src/
   │   └── index.ts  # 要调试的入口文件
   ├── dist/         # 编译后生成的 JS + .map 文件（自动生成）
   ├── tsconfig.json
   └── package.json