DEV Community

Henrique Marques Fernandes
Henrique Marques Fernandes

Posted on • Originally published at marquesfernandes.com on

VS Code debug com ts-node e ts-node-dev no Docker

Se você está tendo problema para debuggar no VS Code os seus projetos com Typescript que usam ts-node ou ts-node-dev, como linhas erradas no debbuger ou ele não selecionando nenhuma linha, não se preocupe, a solução é simples.

Por algum motivo o debugger do VS Code se confunde ao tentar interpretar os arquivos .map e acaba selecionando as linhas erradas, o que pode inviabilizar o uso do debbuger na sua aplicação. Essa solução serve também para quem estiver desenvolvendo com Docker.

Explicarei passo a passo as configurações para que você identifique qualquer possível problema em seu projeto.

Configurando o package.json

Ele deve incluir o ts-node ou ts-node-dev nas suas dependências:

"devDependencies": { "ts-node": "8.9.0", "ts-node-dev": "1.0.0-pre.44",}
Enter fullscreen mode Exit fullscreen mode

Crie um script para rodar o seu projeto com ts-node-dev ou ts-node:

"scripts": { "dev": "ts-node-dev --inspect=0.0.0.0:7001 --exit-child --respawn src/index.ts",}
Enter fullscreen mode Exit fullscreen mode

Configurando seu tsconfig.json

Precisamos sempre habilitar a opção de sourceMap em compilerOptions, essa opção faz com que o compilador gere os arquivos de mapeamento necessários para o debug funcionar corretamente:

"compilerOptions": { ... "sourceMap": true}
Enter fullscreen mode Exit fullscreen mode

Configurando o debugger do VS Code

Crie ou modifique seu .vscode/launch.json . Não esqueça de configurar para a porta que configuramos nosso script de execução nopackage.json .

{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "attach", "name": "Docker: Attach to Node", "port": 7001, "address": "localhost", "localRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "/app/\*": "${workspaceRoot}/\*" }, "remoteRoot": "/app/" }]}
Enter fullscreen mode Exit fullscreen mode

A sacada está aqui na propriedade sourceMapPathOverrides, precisamos explicitamente indicar para o debugger qual o caminho ele deverá seguir dos arquivos sourcemap para os arquivos dentro do contêiner Docker.

"sourceMapPathOverrides": {
  "<WORKDIR>/\*": "${workspaceRoot}/\*"
}
Enter fullscreen mode Exit fullscreen mode

Existe uma issue em aberto no repositório do Typescriptsobre esse problema, por enquanto a solução é usar essa configuração.

Agradecimentos a solução original: https://medium.com/@mitsuhideohi/debugging-uncompiled-typescript-code-running-on-a-docker-container-213418ab2b1f

O post VS Code debug com ts-node e ts-node-dev no Docker apareceu primeiro em Henrique Marques Fernandes.

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon