vscode 对 typescript代码调试的步骤

下面是详细讲解“vscode 对 TypeScript 代码调试的步骤”的完整攻略：

步骤一：安装插件

在使用 vscode 进行 TypeScript 调试之前，我们需要先安装一个适合于 TypeScript 的插件：Debugger for Chrome。

安装方式如下：

1. 在 vscode 左侧侧边栏的面板中选择 Extensions 按钮；
2. 搜索 Debugger for Chrome 并安装；
3. 安装完成后，重启 vscode。

步骤二：配置运行环境

接下来，我们需要配置运行环境，包括：

1. 启动 Chrome 浏览器的调试模式；
2. 配置 vscode 针对 TypeScript 文件生成的 JavaScript 文件所在的目录。

具体操作如下：

1. 启动 Chrome 浏览器并打开一个新标签页；
2. 在地址栏中输入 chrome://inspect/#devices；
3. 确保勾选了「Discover network targets」选项，并且你的目标网站能被找到；
4. 勾选「Open dedicated DevTools for Node」选项；
5. 找到「Configure」按钮，然后打开下拉菜单，选择「Add localhost」；
6. 在打开的对话框中输入 127.0.0.1:8080，然后点击 Add 按钮；
7. 此时你的目标网站会被列举出来；
8. 配置 TypeScript 文件生成的 JavaScript 文件所在的目录。这可以通过在你的 VS Code 工作区的根目录中添加一个名为 launch.json 的文件来实现。一个最简单的示例如下所示：

json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

步骤三：找到你想要调试的代码

现在，你已准备好进行 TypeScript 代码调试了。接下来，打开你想调试的 TypeScript 文件并设置断点。

示例一：调试 TypeScript 文件

举个例子，我们有个简单的 TypeScript 文件 index.ts，内容如下：

function sayHello(name: string) {
  console.log(`Hello ${name}!`);
}

sayHello("World");
sayHello("TypeScript");

我们想要调试这个文件，并查看调用 sayHello 函数时会输出什么内容。这可以通过使用以下设置来实现：

1. 打开 index.ts 文件，设置断点；
2. 按下 F5 或者在 vscode 中使用调试按钮启动项目；
3. 调试器会自动在浏览器中打开你的网站，同时在 vscode 下面的调试面板中，你可以看到断点信息；
4. 在浏览器中，你可以操作你的网站，以让代码执行到你设置的断点位置；
5. 当代码执行到断点时，调试器会记录下来、展示你调试所关注的堆栈追踪、变量等信息。

示例二：调试 React + TypeScript 应用程序

假设你正在开发一个使用 React 和 TypeScript 技术栈的应用程序，你可以使用以下设置进行调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

步骤四：开始调试

现在，你可以开始进行 TypeScript 代码调试了。运行你的代码，执行到你设置的断点，然后通过 vscode 来查看调用堆栈、变量、表达式评估和更多信息。

总结

以上就是使用 vscode 调试 TypeScript 代码的步骤，可以使用这些设置轻松地调试 TypeScript 应用程序。