search

bitjson / typescript-starter

Quickly create and configure a new library or Node.js project
https://bitjson.github.io/typescript-starter/
MIT License
3.48k stars 245 forks source link

Using the VSCode debugger #172

Closed mshick closed 4 years ago

mshick commented 5 years ago

As a user of this generator, I would appreciate more handholding in learning how to properly debug a TypeScript application through your boilerplate functions in VSCode.

I've been struggling to understand how to properly use the VScode debugger with a vanilla TS application output from this project. By default the launch.json file doesn't seem to be set up to work with the boilerplate functions that are generated. I've spent some time trying to figure out what my program path should be, and still haven't managed to get a working debugger. I've been through a number of tutorials, and can do some simple debugging with breakpoints in a plain JS app. Key questions are:

  1. What should program be set to if I'm trying to set a breakpoint in the asyncABC function?
  2. How should I invoke that function to get debugger output at my breakpoint?
  3. What is the Debug Spec profile supposed to do? Debug the tests themselves?

I do realize some of these questions are due to my lack of familiarity, but I've found this project very helpful in learning TS so I see value in helping new users understand the debugger.

bitjson commented 5 years ago

Hey @mshick, thanks for opening an issue. I definitely agree that this project should be more helpful in using the debugger. If it's not working for you, it may actually be a bug.

Currently, I'm having a lot of trouble using the debugger on tests – it works in some cases but not in others. (And I haven't gotten to the bottom of it yet.) One trick I've been using: be sure you have a breakpoint placed in the .spec file you're trying to test, rather than in another file called from the test file. If necessary, drop a breakpoint at the beginning of the test, then press the play button to get into the breakpoint in the other file. (Without this little trick, VSCode seems to skip over the breakpoint in the other file.)

Debugging tests in this project needs an overhaul – I'm hoping some of the movement happening in this thread will help a lot. I don't have time to dig into it too much more right now, but hopefully some of these issues will be smoothed out in the next few months.

For now, I'll just try to answer your questions:

1: Make sure you're currently viewing the .spec.ts file you want to test, then run the "Debug Spec" task. That task checks the currently active editor window, and tries to debug it as an AVA test. It usually works if you use that trick I mentioned above. (When it doesn't, I suspect there's an issue with source maps somewhere causing the breakpoints to not line up with the code as expected.)

The "Debug Project" task is much more reliable, you'll just need to set it to the entry point of your application. (If you're building a library, this doesn't really apply to you. It's more for CLI or other Node.js applications.)

2 & 3: When you run "Debug Spec" it will run all the tests in the active file. You should be able to pause at any of the breakpoints in that file.

Again, it's not really working reliably right now (and some of the recent updates to AVA have made it work even less-reliably than before), so some changes definitely need to be made. I think AVA is on the right track now on the debug mode thread, so definitely subscribe there for updates.

I'm going to leave this issue open for discussion, and PRs are very welcome.

bitjson commented 4 years ago

The latest version of typescript-starter now uses AVA's built-in debug mode! 🎉

Debug AVA tests is now much easier and more reliable. I'm going to close this issue, but please open a new issue if you discover any problems. 👍