vscode-docs icon indicating copy to clipboard operation
vscode-docs copied to clipboard

Better Debug documentation for TypeScript

Open danielniccoli opened this issue 3 years ago • 1 comments

I'm reading through https://code.visualstudio.com/docs/languages/typescript with the eyes of a TypeScript beginner and I believe Debug Server-Side should be improved.

It says:

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

There are two things I would criticise:

  1. If setup is easy, I'd expect that one of two things would work:

    • Start debugging by pressing F5, see it hit a breakpoint and see "Hello World" printed to the terminal.
    • Creating a default launch.json file with the before mentioned Node.js configuration, that leads to the same result as above when a debug session is started. Both achieve the same thing, with the difference then one stores the configuration in a file. But both call node.exe ./helloworld.ts, which naturally results in a SyntaxError. I would not call this "easy" in a documentation that is clearly targeted towards absolute beginners on "Hello World" level.
  2. The link to the "Node.js debugging tutorial" leads to a tutorial about how to debug a Express app. There are two things problematic with that:

    • The tutorial does not mention TypeScript compilation or debugging at all.
    • It doesn't help in the immediate attempt to setup a TypeScript debugger. Instead, it potentially overloads the reader with information about a framework that they are potentially unable to contextualise.

To improve the documentation, I would suggest that a basic or minimal working example is provided, so that after reading this tutorial, he is not only able to compile a Hello World, but also to set a break point, start the debugger and see the "Hello World" being printed to the server-side console.

danielniccoli avatar Aug 19 '22 14:08 danielniccoli

I agree that "TypeScript debugging" is not easily to find in TypeScript in Visual Studio Code.

The "Debugging" section links to generic debugging pages which are not that helpful in the Typescript context.

But scrolling down to the "Next Steps" section has a Debugging TypeScript link.

I don't understand why this link is not more prominently located in the "Debugging" section. It would even make sense to inline the contents of Debugging TypeScript directly in the "Debugging" section of TypeScript in Visual Studio Code.

weinand avatar Aug 19 '22 15:08 weinand

Created PR to hopefully fix issue. Thanks!

https://github.com/microsoft/vscode-docs/pull/5807

kinkeadian25 avatar Nov 28 '22 04:11 kinkeadian25

I think that's a good start! When the PR get's approved, this issue can be closed.

danielniccoli avatar Nov 28 '22 12:11 danielniccoli

@danielniccoli, thanks a lot! Anything else you want to see changed I am happy to work on!

kinkeadian25 avatar Nov 28 '22 16:11 kinkeadian25

Fixed with https://github.com/microsoft/vscode-docs/pull/5807

gregvanl avatar Nov 28 '22 21:11 gregvanl

@gregvanl Thanks so much!

kinkeadian25 avatar Nov 28 '22 21:11 kinkeadian25