how can i use node inspect with typescript | TypeScript Community | Page 1

inland lotus Oct 31, 2023, 6:16 AM

#

I wanted to be able to see my console logs in the browser instead of just the terminal I am using express , node version v18.15.0 any help would be appreciated😇 tsconfig file : { "compilerOptions": { "module": "NodeNext", "moduleResolution": "NodeNext", "esModuleInterop": true, "sourceMap": true, "target": "ES2020", "outDir": "./tsbuild", "allowImportingTsExtensions":true } ,"include": ["./src"] }

restive scaffold Oct 31, 2023, 2:36 PM

#

it's no different than without TS. you provide the --inspect option to node when running your compiled JS. there's some more info here: https://nodejs.org/en/docs/guides/debugging-getting-started

Node.js

Debugging - Getting Started | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

#

i don't think node intercepts messages sent to stdout/stderr and sends them over the inspector protocol though, so your console.log messages and whatnot will not magically show up in the browser's devtools (i could be wrong; it's been a while since i've used devtools like this)

inland lotus Oct 31, 2023, 4:11 PM

#

well when u run node Js with typescript u need to run the index.ts file to be able to run the code and see the console log

restive scaffold Oct 31, 2023, 4:14 PM

#

right, so for example if you're currently compiling and then running node dist/index.js, instead run node --inspect dist/index.js

inland lotus Oct 31, 2023, 4:23 PM

#

restive scaffold right, so for example if you're currently compiling and then running `node dist/...

i am not running my js files i am running my ts files if i run my js it won't work

restive scaffold Oct 31, 2023, 4:33 PM

#

but you can't run ts files without compiling them to js… can you tell me exactly how you're running stuff?

inland lotus Oct 31, 2023, 4:41 PM

#

I run this command in my terminal ts-node --esm index.ts

restive scaffold Oct 31, 2023, 4:43 PM

#

ah, ts-node is not the same as node. it's an independent project that internally compiles your typescript and then runs node on the result

#

anyway i bet ts-node supports forwarding the --inspect flag to node

#

yeah, it does. it was implemented years ago: https://github.com/TypeStrong/ts-node/issues/218

#

so you should be able to do ts-node --inspect --esm index.ts

inland lotus Oct 31, 2023, 4:46 PM

#

i did mentioned i am using node with typescript ts-node is the only way to use noded with typescript from my research

restive scaffold Oct 31, 2023, 4:46 PM

#

definitely not

#

the typical way is to first compile your typescript with tsc, then run the resulting JS files (see https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html for an example)

#

there are other tools ("bundlers") that you can use instead of tsc or that wrap tsc, which are also pretty commonly used (though less so with backend projects), but they still spit out JS that you run yourself

#

ts-node is mostly for quick and dirty testing or if you want an interactive REPL. i wouldn't normally use it in production

inland lotus Oct 31, 2023, 4:51 PM

#

restive scaffold so you should be able to do `ts-node --inspect --esm index.ts`

well all it does is run with a warning in the console plus i am not getting any logs in the console for some reason i think it has to do with that it's running on a different port idk

restive scaffold Oct 31, 2023, 4:52 PM

#

well like i said i don't think node's inspect stuff actually does anything with your logs

#

what's the warning?

inland lotus Oct 31, 2023, 4:53 PM

#

node:internal/process/warning:50 (node:4900) ExperimentalWarning: Custom ESM Loaders is an experimental feature. This feature could change at any time (Use node --trace-warnings ... to show where the warning was created)

restive scaffold Oct 31, 2023, 4:53 PM

#

ah, that seems unrelated

#

oh i was mistaken! i just tried it in one of my own projects and it does forward stdout to the dev console (or maybe just intercepts console.whatever calls specifically). neat

#

it even kinda handles terminal escape sequences (though not all of them)

inland lotus Oct 31, 2023, 4:56 PM

#

so u have console logs in your ts project and it does log them to your browser console

#

?

restive scaffold Oct 31, 2023, 4:57 PM

#

yes, after i attach to the remote target in my browser (as described on https://nodejs.org/en/docs/guides/debugging-getting-started)

#

i'm using Chrome to test, opened chrome://inspect and my server was automatically discovered (the remote target shown here)

Screenshot_2023-10-31_at_12.59.19_PM.png

inland lotus Oct 31, 2023, 5:06 PM

#

so did u run the project and ran node inspect

#

?

restive scaffold Oct 31, 2023, 5:16 PM

#

yes, i just added --inspect to the existing node command i was using to run my server, then rebuilt & ran it, then opened chrome://inspect and that's what i saw

inland lotus Oct 31, 2023, 5:19 PM

#

ah ok

#

it worked now

#

it wasn't before i asked

#

is it just me or is typescript a pain to deal with

#

espcially with node

#

especially *

restive scaffold Oct 31, 2023, 5:20 PM

#

having any build step is always going to be more painful than no build step, but IMO the benefits you get (type safety, easy automated refactoring, nice IDE support, etc) are worth it

#

node's ESM story is a massive pain

#

and typescript tried to paper over it in the past, but now that node has real ESM support the papering-over is just making things more confusing IMO

#

also the fact that tons of npm packages only support ESM or only support CommonJS also makes things painful

#

deno supposedly makes things much simpler, but i haven't yet been able to use it for any real projects

inland lotus Oct 31, 2023, 5:30 PM

#

plus getting to know how to use typescript with node was also painful the docs are not clear with it at i had to research stuff just to get a simple setup done which is a single command and a few packages to install which is in my opinion absolutely ridiciouls

restive scaffold Oct 31, 2023, 5:32 PM

#

oh? i think the official handbook is pretty good. it's not 100% comprehensive (there are some language features it doesn't go into), but for getting started and having an understanding of the core concepts it does a great job IMO: https://www.typescriptlang.org/docs/handbook/intro.html

Handbook - The TypeScript Handbook

Your first step to learn TypeScript

#

did you have trouble following that? the fact that you landed on ts-node as your starting point makes me think maybe you didn't find the official docs?

#

for the ESM stuff specifically there's https://www.typescriptlang.org/docs/handbook/esm-node.html

inland lotus Oct 31, 2023, 6:12 PM

#

would u say that u can learn from the node js docs for example how to submit forms in node , create apps ? or do u think it's just good for reference

restive scaffold Oct 31, 2023, 6:19 PM

#

i think the nodejs docs are better as a reference. like if you already know what you want to do and just need to look up how to call a built-in function or whatever. "submit forms" and "create apps" also sound like they're talking about the client-side stuff too, which node docs definitely will not cover

#how can i use node inspect with typescript