add example for testing typescript code with vscode-js-debug #817

xddq · 2023-12-20T23:54:02Z

Adding an example for debugging a typescript application using vimspector and
vscode-js-debug. Typescript is a great language, but sadly the setup is hell.
Debugging is no exception to this. This PR tries adding what would have been very beneficial for
me when checking out vimspector for debugging typescript code. It contains a step by step description which can be followed by 'anyone'.

puremourning · 2023-12-20T23:54:09Z

This change is

puremourning

Thanks for sending a PR!

It's always good to improve our community-supported docs.

Reviewable status: 0 of 7 files reviewed, 7 unresolved discussions (waiting on @xddq)

support/test/node/typescript/.vimspector.json line 6 at r2 (raw file):

      "adapter": "js-debug",
      "configuration": {
        "request": "attach",

Seems odd to use 'attach' here. Don't we want a "launch" configuration?

this is what I've always done for typescript projects (same for both the old vscode-node and new js-debug):

{
  "configurations": {
    "run": {
      "adapter": "js-debug",
      "configuration": {
        "request": "launch",
        "stopOnEntry": true,
        "console": "integratedTerminal",
        "program": "${workspaceRoot}/dist/index.js",
        "cwd": "${workspaceRoot}",
        "type": "pwa-node"
      }
    }
  }
}

TBH I don't think we should be "recommending" a sort of hacky workaround.

support/test/node/typescript/package.json line 2 at r2 (raw file):

{
  "name": "vimspector-typescript",

include the word "example" or "test" or something?

support/test/node/typescript/README.md line 3 at r2 (raw file):

# Howto

Typescript is a great language (looking past dependency hells of the js

thanks for writing all this up!

This first sentence is essentially expressing an opinion and is sort of tangential to the purpose of the guide. I don't really want to participate in any language fetish wars, or at least, not in print! So, I think we can just remove this first sentence.

support/test/node/typescript/README.md line 7 at r2 (raw file):

how to use vimspector with
[vscode-js-debug](https://github.com/microsoft/vscode-js-debug). I only could
make this combination work by using 'attach' as launch. This is the reason why

Launch certainly works. I've done it myself. Given that, would it be better to just enhance the main README's typescript config area? The benefits of that:

It appears in :help vimspector
Only one place to update when things inevitably change again for pointless annoying reasons (!)
Only one place for people to look
appears on front page of GitHub project.

WDYT?

support/test/node/typescript/README.md line 8 at r2 (raw file):

[vscode-js-debug](https://github.com/microsoft/vscode-js-debug). I only could
make this combination work by using 'attach' as launch. This is the reason why
this guide will explain how to use it with 'attach'. For all available options

The main README should probably use this link instead. We have a section on configuration for typescript there.

support/test/node/typescript/README.md line 13 at r2 (raw file):

## Prerequisites

- Ensure you are using nodejs version 18 or 20 (was tested with these and these are

Is this a requirement of this example, or of js-debug in general?

support/test/node/typescript/README.md line 21 at r2 (raw file):

## Debugging

- Build the project `yarn build`

do we really need to depend on yarn for this trivial example? Can we not just run tsc ?

- launch instead of attach and fix the required program path. - update readme, drop unnecessary language comment - add 'example' to name in packagejson

xddq

Reviewable status: 0 of 9 files reviewed, 7 unresolved discussions (waiting on @puremourning)

support/test/node/typescript/.vimspector.json line 6 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

Seems odd to use 'attach' here. Don't we want a "launch" configuration?

this is what I've always done for typescript projects (same for both the old vscode-node and new js-debug):
{
  "configurations": {
    "run": {
      "adapter": "js-debug",
      "configuration": {
        "request": "launch",
        "stopOnEntry": true,
        "console": "integratedTerminal",
        "program": "${workspaceRoot}/dist/index.js",
        "cwd": "${workspaceRoot}",
        "type": "pwa-node"
      }
    }
  }
}
TBH I don't think we should be "recommending" a sort of hacky workaround.

Good point, got it working with 'launch' now. Your config seems to me like it is used for debugging the "compiled/transpiled" js, I will adapt the config to use launch and still debug the typescript code.

FYI: never used reviewable before, so sorry in advance if I mess stuff up here.

support/test/node/typescript/package.json line 2 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

include the word "example" or "test" or something?

Done.

support/test/node/typescript/README.md line 3 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

thanks for writing all this up!

This first sentence is essentially expressing an opinion and is sort of tangential to the purpose of the guide. I don't really want to participate in any language fetish wars, or at least, not in print! So, I think we can just remove this first sentence.

Done.

support/test/node/typescript/README.md line 7 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

Launch certainly works. I've done it myself. Given that, would it be better to just enhance the main README's typescript config area? The benefits of that:

It appears in :help vimspector

Only one place to update when things inevitably change again for pointless annoying reasons (!)

Only one place for people to look

appears on front page of GitHub project.

WDYT?

Sounds good, I gave it a shot. Let me know what you think. I would still keep this readme here to make it easy for people checking out the example.

support/test/node/typescript/README.md line 8 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

The main README should probably use this link instead. We have a section on configuration for typescript there.

It is in the main readme as well. I think having duplication here is fine so that you can go through the example only with the readme within it. Could also remove it if you want to. I would rather not.

support/test/node/typescript/README.md line 13 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

Is this a requirement of this example, or of js-debug in general?

I meant that I tested it with these versions. I checked vscode-js-debug repo and did not find a mention of a node version so I am not sure which is the min supported one.

support/test/node/typescript/README.md line 21 at r2 (raw file):

Previously, puremourning (Ben Jackson) wrote…

do we really need to depend on yarn for this trivial example? Can we not just run tsc ?

No. Will use the default that comes with node which is npm.

…nto add-typescript-example

puremourning

thanks again

Reviewable status: 0 of 9 files reviewed, 3 unresolved discussions (waiting on @xddq)

README.md line 2155 at r4 (raw file):

the documentation [here](https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md).

To install vscode-js-debug, run `install_gadget.py --force-enable-node`. There

or VimspectorInstall vscode-js-debug

README.md line 2174 at r4 (raw file):

        "type": "pwa-node"
      },
      "breakpoints": {

I don't think we should include this here, as it's a preference. Feel free to comment it out with a note that it's one way to configure the exception breakpoints.

support/test/node/typescript/package-lock.json line 1 at r4 (raw file):

do we need this file? I don't like these lock file littering up the place particularly and for something this trivial, I really don't care about it's purported purpose.

puremourning

Reviewed 3 of 7 files at r1, 5 of 6 files at r3, 1 of 1 files at r4, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @xddq)

xddq

Reviewable status: 5 of 9 files reviewed, 3 unresolved discussions (waiting on @puremourning)

README.md line 2155 at r4 (raw file):

Previously, puremourning (Ben Jackson) wrote…

or VimspectorInstall vscode-js-debug

Done.

README.md line 2174 at r4 (raw file):

Previously, puremourning (Ben Jackson) wrote…

I don't think we should include this here, as it's a preference. Feel free to comment it out with a note that it's one way to configure the exception breakpoints.

Done.

support/test/node/typescript/package-lock.json line 1 at r4 (raw file):

Previously, puremourning (Ben Jackson) wrote…

do we need this file? I don't like these lock file littering up the place particularly and for something this trivial, I really don't care about it's purported purpose.

Done.

xddq · 2024-02-28T13:36:25Z

@puremourning Any updates on this? I went through your suggestions and made the changes accordingly

puremourning

@Mergifyio rebase

Reviewed 3 of 4 files at r5, 1 of 1 files at r6, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @xddq)

add example for testing typescript code with vscode-js-debug

95abb1c

fix typo

5d4a94d

puremourning requested changes Dec 21, 2023

View reviewed changes

xddq added 4 commits December 22, 2023 00:05

use npm instead of yarn to reduce number of tools needed.

55afdc0

- launch instead of attach and fix the required program path. - update readme, drop unnecessary language comment - add 'example' to name in packagejson

update readme

1e6b464

reference node-launch

5c46be1

update readme for nodejs js and ts usage, based on suggestion.

9d4fb49

xddq commented Dec 21, 2023

View reviewed changes

xddq added 3 commits December 22, 2023 00:34

Merge branch 'master' into add-typescript-example

83f99dc

update toc

fc825a3

Merge branch 'add-typescript-example' of github.com:xddq/vimspector i…

04754e8

…nto add-typescript-example

xddq requested a review from puremourning December 22, 2023 01:01

puremourning requested changes Jan 2, 2024

View reviewed changes

puremourning reviewed Jan 2, 2024

View reviewed changes

xddq added 2 commits January 13, 2024 09:55

pr feedback. mention vimspectorinstall, mention optional part of config

4324773

pr feedback. drop lockfile, use new debug config with optional comments

affe15e

xddq commented Jan 13, 2024

View reviewed changes

xddq requested a review from puremourning January 13, 2024 09:03

xddq added 2 commits January 26, 2024 23:02

Merge branch 'master' into add-typescript-example

1fc31c2

Merge branch 'master' into add-typescript-example

8fa981a

This was referenced Apr 24, 2024

adds example to use vimspector with typescript and jest #818

Closed

bump vscode-js-debug and delve to latest versions #816

Closed

puremourning approved these changes May 6, 2024

View reviewed changes

puremourning added 3 commits May 6, 2024 12:19

Merge branch 'master' into add-typescript-example

285419c

Merge branch 'master' into add-typescript-example

6af7d74

Merge branch 'master' into add-typescript-example

6099cd0

puremourning merged commit a021907 into puremourning:master May 6, 2024
5 of 7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add example for testing typescript code with vscode-js-debug #817

add example for testing typescript code with vscode-js-debug #817

xddq commented Dec 20, 2023 •

edited

Loading

puremourning commented Dec 20, 2023

puremourning left a comment

xddq left a comment

puremourning left a comment

puremourning left a comment

xddq left a comment

xddq commented Feb 28, 2024

puremourning left a comment

add example for testing typescript code with vscode-js-debug #817

add example for testing typescript code with vscode-js-debug #817

Conversation

xddq commented Dec 20, 2023 • edited Loading

puremourning commented Dec 20, 2023

puremourning left a comment

Choose a reason for hiding this comment

xddq left a comment

Choose a reason for hiding this comment

puremourning left a comment

Choose a reason for hiding this comment

puremourning left a comment

Choose a reason for hiding this comment

xddq left a comment

Choose a reason for hiding this comment

xddq commented Feb 28, 2024

puremourning left a comment

Choose a reason for hiding this comment

xddq commented Dec 20, 2023 •

edited

Loading