Coder Social home page Coder Social logo

Try to debug typescript file about ts-node-dev HOT 24 CLOSED

wclr avatar wclr commented on July 19, 2024 1
Try to debug typescript file

from ts-node-dev.

Comments (24)

Deilan avatar Deilan commented on July 19, 2024 58

Debug with restart is working for me on macOS 10.13.4 and Node.js 8.9.4 with the following VS Code debug configuration:

{  
   "name":"Launch via nodemon",
   "type":"node",
   "request":"launch",
   "protocol":"inspector",
   "cwd":"${workspaceRoot}",
   "runtimeExecutable":"${workspaceRoot}/node_modules/.bin/ts-node-dev",
   "args":[  
      "${workspaceRoot}/src/index.ts"
   ],
   "restart":true
}

The only issue I've encountered is ts-node-dev won't restart if execution is stopped at a breakpoint.

from ts-node-dev.

joseluisq avatar joseluisq commented on July 19, 2024 42

Just ts-node-dev worked for me (no nodemon or VS code tasks) .

screen shot 2018-12-07 at 10 49 39

Tools:

  • VS Code: v1.29.1
  • Node: v10.6.0
  • ts-node-dev: ^1.0.0-pre.31

package.json

{
  "scripts": {
    "debug": "cross-env TZ=UTC NODE_ENV=development tsnd --inspect --respawn src/main.ts"
  }
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Typescript Server",
      // "processId": "${command:PickProcess}",
      "protocol": "inspector",
      "port": 9229,
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "."
    }
  ]
}

Usage:

  1. Run your debug NPM task: npm run debug
  2. Start VS Code debugging.

from ts-node-dev.

gintsgints avatar gintsgints commented on July 19, 2024 13

Works fine for me with this launch task:

    {
      "type": "node",
      "request": "launch",
      "name": "Launch server debug",
      "program": "${workspaceRoot}/node_modules/ts-node-dev/bin/ts-node-dev",
      "args": [
        "--inspect",
        "--no-notify",
        "--respawn",
        "--transpileOnly",
        "./src"
      ],
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart",
      "port": 9229
    },

from ts-node-dev.

stabback avatar stabback commented on July 19, 2024 12

Expanding on @joseluisq's above -

The solution nearly worked for me. I'm unsure if it's because of my project settings, or if something in the dependencies have changed with time.

The above launch.json settings worked great to attach the debugger, however I found all of my breakpoints were appearing as unverified breakpoint. I could log to the debugger, but couldn't connect direct.

Removing localRoot and remoteRoot and specifying cwd allowed me to use breakpoints.

Updated instructions:


Tools
VS Code: v1.33.1
Node: v10.16.0
ts-node-dev: ^1.0.0-pre.40

package.json

{
  ...
  "scripts": {
    ...
    "debug": "ts-node-dev --inspect --respawn --transpileOnly src/main.ts"
  },
  ...
}

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "attach",
        "name": "Typescript Server",
        "protocol": "inspector",
        "port": 9229,
        "restart": true,
        "cwd": "${workspaceRoot}"
      }
    ]
  }

Usage:

  1. Run your debug NPM task: npm run debug
  2. Start VS Code debugging.

from ts-node-dev.

Xaz16 avatar Xaz16 commented on July 19, 2024 10

It is how it works for me now, with restart and registered paths from tsconfig.json.

Which troubles I resolved before I get this:

  1. Error: ENAMETOOLONG: name too long -- when I use --transpileOnly option I get an error. I used ts-node-dev without vscode debug just in bash. It looks like it is not reproducing all the time...

Command:

node_modules/.bin/ts-node-dev --inspect --respawn --no-notify --transpileOnly --require tsconfig-paths/register ./src/main.ts --inspect-brk=34622 

Output:

Debugger listening on ws://127.0.0.1:9229/715ad179-6f9f-413c-b920-8af6bf7fbfc4
For help, see: https://nodejs.org/en/docs/inspector
Error: ENAMETOOLONG: name too long, open '/tmp/.ts-node73pF36/compiled/____________libs_some_really_long_long_long_long_long_long_long_long_path_to_the_file_index_ts_e3bf35e41e9158318d85cbaf2049ee067732245b2f5a6a06bd0bedc5cbfdb1ab.js812b475326f84.jsonfig_ts_62d4880d8bd64735ec8b9299dfd29f468157af7c7a09a5abf.done'
    at Object.openSync (fs.js:457:3)
    at Object.writeFileSync (fs.js:1298:35)
    at writeCompiled (/node_modules/ts-node-dev/lib/compiler.js:244:10)
    at Object.compile (node_modules/ts-node-dev/lib/compiler.js:271:7)
    at node_modules/ts-node-dev/lib/index.js:129:20
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
  1. node: bad option "--require tsconfig-paths/register" -- silly error without any info about how to resolve it, but it is a quite simple. Do not use it in args array in one element like --require tsconfig-paths/register, use it in 2 different elements "--require", "tsconfig-paths/register"
  2. ECONNREFUSED -- in most cases with ts-node-dev lots of issues because you are trying to configure it through runtimeExecutable and runtimeArgs, but for me it works without any headache only if you combine runtimeExecutable and args
  3. Error: Cannot use import statement outside a module
(node:27281) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
warning.js:32
src/main.ts:1
import { __awaiter } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1067:16)
    at Module._compile (internal/modules/cjs/loader.js:1115:27)
    at Module._compile (node_modules/source-map-support/source-map-support.js:541:25)
    at Module.m._compile (/tmp/ts-node-dev-hook-1421372891564434.js:59:25)
    at Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at require.extensions.<computed> (/tmp/ts-node-dev-hook-1421372891564434.js:61:14)
    at Object.nodeDevHook [as .ts] (node_modules/ts-node-dev/lib/hook.js:61:7)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)

Just put to the tsconfig.json of project that you are trying to compile:
"module": "CommonJS"
Due to node.js do not know about es imports

Summary

ts-node-dev debug config with typescript paths and auto reload:

{
      "name": "Server tools",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "restart": true,
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node-dev",
      "cwd": "${workspaceFolder}/apps/server/tools/${input:toolName}",
      "internalConsoleOptions": "openOnSessionStart",
      "args": [
        "--inspect",
        "--respawn",
        "--no-notify",
        "--require",
        "tsconfig-paths/register",
        "./src/main.ts"
      ]
}

@whitecolor as I can see lots of people comes to your lib after troubles with nodemon through this issue https://stackoverflow.com/a/50528031 and in most cases they trying to setup debugging.

Would it be a good idea to put something like "troubleshooting" section to readme for such folks?

from ts-node-dev.

filetvignon avatar filetvignon commented on July 19, 2024 5

After an extensive amount of trial and error, this config seems to have worked for me:

{
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "name": "ts-node-dev",
  "restart": true,
  "request": "launch",
  "runtimeExecutable": "tsnd",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node",
  "runtimeArgs": ["--respawn"],
  "args": ["${workspaceFolder}/src/index.ts"]
}

from ts-node-dev.

sippeangelo avatar sippeangelo commented on July 19, 2024 4

Adding to this, currently VS Code seems to be having some issues reattaching. My program crashes with EPIPE: broken pipe, write as VS Code seems to be too slow to reattach on reload before my program starts writing output. I found the fix was to switch to integratedTerminal for the console option in launch.json instead of the default internalConsole

This seems to be working for me so far:

{
    "name": "ts-node-dev",
    "type": "node",
    "request": "launch",
    "protocol": "inspector",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
    "args": [
        "--inspect",
        "--no-notify",
        "--transpileOnly",
        "--respawn",
        "${workspaceRoot}/src"
    ],
    "console": "integratedTerminal",
    "restart": true
}

from ts-node-dev.

MrMonotone avatar MrMonotone commented on July 19, 2024 3

This is what I used. The important part was making sure you pass the "--inspector" flag to ts-node-dev. e.g.
ts-node-dev --inspect --files src/index
My file for reference.

        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "protocol": "inspector",
        }

There is also the auto attach feature you can look at. Check here:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_auto-attach
I still needed to pass in the --inspect flag to get it working though. I was using lerna so that might be an issue.
After a few hours of googling hopefully this will help more people.

from ts-node-dev.

alexbatis avatar alexbatis commented on July 19, 2024 2

Leaving my launch.json file here for anyone who may find it useful:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ts-node-dev debug",
      "runtimeExecutable": "nodemon",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "sourceMaps": true,
      "smartStep": true,
      "args": [
        "--watch",
        "'src/**/*.ts'",
        "--ignore",
        "'src/**/*.spec.ts'",
        "--exec",
        "'ts-node-dev'",
        "-r",
        "tsconfig-paths/register",
        "<src/your_entry_point.ts>"
      ],
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

where <src/your_entry_point.ts> is the entry point of your application.

This uses tsconfig-paths to register custom paths registered in tsconfig.json.

if your app doesn't use this library, remove the lines :

  "-r",
  "tsconfig-paths/register",

I prefer this method as it doesn't require starting the application in a console then attaching the debugger on a seperate (vscode integrated) terminal. It will launch your application, attach the debugger, and register all breakpoints.

from ts-node-dev.

oshri avatar oshri commented on July 19, 2024 1

I found the solution that work for me.

Under .vscode ( folder ) you should create 2 files:

  1. launch.json
  2. tasks.json

launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug TypeScript in Node.js",
        "preLaunchTask": "typescript",
        "program": "${workspaceFolder}/src/index.ts",
        "cwd": "${workspaceFolder}",
        "protocol": "inspector",
        "outFiles": [
          "${workspaceFolder}/lib/**/*.js"
        ]
      }
    ]
  }

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "typescript",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "problemMatcher": [
          "$tsc"
        ]
      }
    ]
}

pacckage.json ( scripts section )

"scripts": {
    "start": "npm run build:live",
    "build:live": "NODE_ENV=development nodemon --exec  ./node_modules/.bin/ts-node -- ./src/index.ts --debug"
  }

To Run you should press Shift + command + B ( Tasks - > Run Build Task ).

from ts-node-dev.

joseluisq avatar joseluisq commented on July 19, 2024 1

@montera82 if you want to debug in docker container check out:
Debugging TypeScript in a Docker Container

Basically, it should works with minimal tweaks.

from ts-node-dev.

gintsgints avatar gintsgints commented on July 19, 2024 1

@gintsgints I tried your solution as I don't want to have to manually run a command and then attach
but my breakpoints are not being hit

Have you run into this?

No I have not. Check logs, may be somthing about port settings.

from ts-node-dev.

oshri avatar oshri commented on July 19, 2024

When I add --inspect I get a weird error
command: yarn ts-node-dev --inspect server

screen shot 2018-03-12 at 11 32 55

from ts-node-dev.

wclr avatar wclr commented on July 19, 2024

does it work without --inspect flag?

from ts-node-dev.

oshri avatar oshri commented on July 19, 2024

No :(

from ts-node-dev.

wclr avatar wclr commented on July 19, 2024

Try to run it without debugger, try to run it with just ts-node (not ts-node-dev), etc..

from ts-node-dev.

francocorreasosa avatar francocorreasosa commented on July 19, 2024

Same for me, but with ts-node I get the same result.

from ts-node-dev.

montera82 avatar montera82 commented on July 19, 2024

@joseluisq thanks, this worked for me!
i wonder how i could make it work with a dockerfile like this

FROM node:9-alpine

ARG APP=/http

WORKDIR ${APP}

COPY . ${APP}/

RUN npm install

RUN npm i -g typescript ts-node-dev [email protected]

EXPOSE 3000

RUN npm run debug

from ts-node-dev.

M-Zuber avatar M-Zuber commented on July 19, 2024

@gintsgints I tried your solution as I don't want to have to manually run a command and then attach
but my breakpoints are not being hit

Have you run into this?

from ts-node-dev.

mannok avatar mannok commented on July 19, 2024

@gintsgints I tried your solution as I don't want to have to manually run a command and then attach
but my breakpoints are not being hit

Have you run into this?

Yes I have run into this...
Windows 10...

from ts-node-dev.

davidzwa avatar davidzwa commented on July 19, 2024

I had to add my server.ts after the last arg "${workspaceRoot}/src"

from ts-node-dev.

rochapablo avatar rochapablo commented on July 19, 2024

I'm getting [ERROR] 15:37:43 SyntaxError: Cannot use import statement outside a module but it does not show here's the problem.

It seems that it's when I try to import sequelize, but I can't see what I'm doing wrong.

from ts-node-dev.

wclr avatar wclr commented on July 19, 2024

@rochapablo probably trying to run some code that contains import inside node js

from ts-node-dev.

jehnls avatar jehnls commented on July 19, 2024

@joseluisq , Here it's works, it started normally , but I can't use break point.

Could someone help me please?

"scripts": {
....
"debug": "cross-env TZ=UTC NODE_ENV=development tsnd --inspect --respawn src/server.ts"
},

launch.json

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Typescript Server",
// "processId": "${command:PickProcess}",
"protocol": "inspector",
"port": 9229,
"restart": true,
"localRoot": "${workspaceFolder}",
"remoteRoot": "."
}
]
}

debugNode

from ts-node-dev.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.