Método de configuração de código TS de depuração de VSCode

Etapas de configuração

    O VSCode precisa ser configurado para depurar o código TS. O seguinte descreve as etapas de configuração

1 O primeiro passo é preparar o arquivo ts a ser depurado.
Crie um novo arquivo a.ts como o arquivo ts a ser depurado

console.log('1 准备开始执行 for 循环')

for (let i: number = 1; i <= 3; i++) {
  console.log('...一锅装不下')
}

console.log('2 for 循环执行结束')

 

2 A segunda etapa  para abrir a janela de depuração: clique no botão do penúltimo evento da coluna esquerda (Depurar)

Gerar configuração padrão: clique na caixa suspensa atrás de DEBUG, selecione adicionar configuração

Modifique o conteúdo da configuração da seguinte forma:

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试TS代码",
      // ts-node 命令： “直接”运行ts代码。
      // 作用：调试时加载ts-node包（在调试时“直接”运行ts代码）
      "runtimeArgs": ["-r", "ts-node/register"],
      // 此处的 a.ts 表示要调试的 TS 文件（ 可修改为其他要调试的ts文件 ）
      "args": ["${workspaceFolder}/a.ts"]
    }
  ]
}

3 O terceiro passo é instalar e depurar os pacotes usados

No diretório atual, abra uma janela de terminal

Digite o seguinte comando no terminal:

# 注意：原来通过 -g（全局）安装的包，在调试时不生效，需要在当前目录中单独安装
# 调试TS代码，依赖这两个包
npm i ts-node typescript

Habilidades de depuração

Ver a saída do console.log (console de depuração)

Monitore o valor da variável (1. Mova o mouse; 2. Adicione à janela de monitoramento esquerda)