Typescript: Is it possible to debug a Language Service Plugin?

[anurbol]

Hello! My plugin became pretty complex to the point I need to debug it.

What I have tried is writing debugger in the code and running
node --inspect-brk path/to/tsc, but the script never pauses at the breakpoint provided.

Any directions, please?

P.S. Logging works, but is a bit tedious, especially for figuring out the exact flow path of the program.

[dragomirtitian]

One of the few things covered in the wiki : https://github.com/microsoft/TypeScript/wiki/Debugging-Language-Service-in-VS-Code

[anurbol]

Hi @dragomirtitian my old TS pal :smile: Whenever I ask something about TS I feel like you will answer it with 50% chance :smile: I can see that article, I'll try it when I'll get back to work! Thank you!

[anurbol]

@dragomirtitian @RyanCavanaugh Well that wiki tutorial turned out to be unexpectedly hard. I just wanted to debug my LS Plugin, but the wiki suggests to debug a VSCode inside a VSCode.

I started to go through the tutorial anyway (in hope that it will give me some related knowledge) but abandoned it soon after, because it's too much for me to build VSCode, build TS, and try to figure out what does launch and attach (I may guess but I am totally not sure) mean in steps 3,4,5, when all I want is to catch a bug in my plugin. I feel like I'll spend many hours doing something that I am not sure will work at all.

I think that some other guys who want to debug their plugins may feel the same way as I do, so maybe there is some more straightforward way? Or am I missing something or am I probably too stupid for this I don't know :-)

[DanielRosenwasser]

Does that page actually require a development version of VSC? I believe it's only because the processes are identical. Can you get away with using an insiders release?

[anurbol]

@DanielRosenwasser Thanks for quick response. Yes, it does require a development version of VSC. I am not even sure what is the purpose of the whole tutorial after reading it, so maybe I am just missing something, and yes the processes may be identical/similar with what I want to achieve, but if this is the case, then I don't have any ideas about which steps should I replace for my case.

[dragomirtitian]

@anurbol been using that exact tutorial. Works with regular vs code. Just:

1. close all vs code instances
2. start power shell.
3. Run $env:TSS_DEBUG = 5859
4. Run vscode (write the command in the terminal
5. Open a ts file to start the language service
6. Start a new instance of vs code with Typescript and attach to the language service in the previous instance.

You can run the Restart ts server command in the debugged instance to reload the server (as you make changes) but you will need to reattach when you do so.

Write to me on gitter if you have any issues 😊

[anurbol]

Titian is our (TS strugglers) savior as always! Helped me in gitter.

I just want to make some corrections that appeared from the gitter conversation:

1. close all vs code instances.
2. start power shell.
3. Run $env:TSS_DEBUG = 5859
4. Run code (write the command in the terminal
5. Open the second VSCode window (NOT from the same command line, you may just open a VSCode from your OS GUI)
   5.1 In that window, a TS repo must be opened (download and build it if you don't have one)
   5.2 Add the snippet below to .vscode/launch.json (or click on the debug button on the left panel, click on the arrow down in the left top corner and click on "Add configuration" and add the configuration provided below):

       "configurations": [
        ...,
       {
            "type": "node",
            "request": "attach",
            "name": "Attach to TS Server",
            "protocol": "inspector",
            "port": 5859
        }
        ]

5.3. Click the arrow down (mentioned in 5.2) again choose Attach to TS Server configuration.
5.4. Click "Start Debugging" button (it is located to the left of configuration select dropdown).

1. Go back to the first opened VSCode window, open a .ts file to start the language service and do something that triggeres the code with the breakpoint, e.g. modify a .ts file, request a hover aka quick info etc. (the debugger breakpoint should be there in your LS Plugin).