Hacker News Reader

Comment by sureglymop | Hacker News Reader

I find debugging hard when it comes to web development. How can I debug a typescript web app when 1. It will actually be in javascript once it's transpiled and 2. It will run in the browser and not in my ide. It uses some kind of live reloading dev server that is completely different than the production build.

Currently I'm building something with sveltekit and i have no idea how to debug this except logging out messages.

View on HN

If the code is running in the browser: source maps are the answer (there's a step-debugger in the browser's devtools panel). But also: Modern Javascript is (more or less) just Typescript with the type hints removed, so even debugging the output JS code is pretty straightforward.

When push comes to shove, go down to the most the basic of debugger tools. Print output to a tracing/console. I have had to resort to some version of temporary print statements in my code to get thru with debugging. And along the way have found many situations where those print statements or the logging/tracing equivalents introduced changes that altered the program's behavior.

I remember finding a situation where output of console.log would not match reality when debugging using chrome's debugger while working on a react app in 2019. Had to resort to making a copy of the variables to get console.log working in that situation.

When it comes to web deveopment, like others have said, it is easy to debug modern web apps with the help of source maps. We have been doing some version of that for a long time now. I remember using source maps with codeview back in the late 80s/early 90s.

I don't know what your setup is but I've had no trouble debugging typescript in the browser or on the server. In the browser I use the browser's devtools and source maps. It works. For the server I use VSCode's built in node debugger integration. Both have worked great for me.

The first book above has a chapter of various tools in debugging web applications. You can use the sourcemap feature to debug TS.

You are missing out on a lot of amazing capabilities by avoiding the browser debugger. Did you know you can place a breakpoint that will trigger on DOM mutation?

Most languages are compiled or transpired into another representation.

For TypeScript, source maps can help with the debugging.

The live reloading dev server is just a wrapper around your code. You should still be able to use the browsers debugger to set a breakpoint at the function you want.

personally i rely on barking (printf) no matter the environment. in fact, my personal unpopular opinion is that people rely way too much on IDEs for debugging and that barking can solve 95% of bugs. (race conditions are more difficult, of course)

Reply on news.ycombinator.com