{"@attributes":{"version":"2.0"},"channel":{"title":"Andrei G\u0103tej","link":"https:\/\/andreigatej.dev\/","description":"Recent content on Andrei G\u0103tej","generator":"Hugo -- gohugo.io","language":"en","lastBuildDate":"Thu, 03 Apr 2025 23:39:59 +0300","item":[{"title":"Debugging Typescript in Neovim","link":"https:\/\/andreigatej.dev\/blog\/debugging-typescript-in-neovim\/","pubDate":"Thu, 03 Apr 2025 23:39:59 +0300","guid":"https:\/\/andreigatej.dev\/blog\/debugging-typescript-in-neovim\/","description":"
\n

If you prefer a video version of this topic, it can be found here<\/a>.<\/p>\n<\/blockquote>\n

Most of my career as a programmer, I took debugging for granted - all I needed was to press a button or set up some basic configuration and that\u2019s it! At worst, I had to try to understand what I was configuring, but I would confidently say that I have always succeeded in debugging any project I set my mind to (my biggest achievement in this regard was debugging Docker\u2019s engine).<\/p>\n

In this article I will share a simple (almost obvious) debugging concept that can be used to debug any program. This time, we will focus on TypeScript and we will see how to debug any TypeScript program both in Neovim. Let\u2019s get started!<\/p>\n

\n \n My Neovim debugging set-up\n <\/span>\n \n \n <\/path>\n \n <\/path>\n <\/svg>\n <\/a>\n<\/h2>

You can find my dotfiles here<\/a>.<\/em><\/p>\n

As a prerequisite, make sure you have installed js-debug-adapter<\/code>. The easiest way to do so is via Mason.<\/p>\n

Then, apart from the well-known mfussenegger\/nvim-dap<\/code> and rcarriga\/nvim-dap-ui<\/code> plugins, there is really nothing special as far as required plugins are concerned. The part where we need to pay a little more attention to is the actual configuration.<\/p>\n

First, we need to set up the debug adapter for node<\/a>:<\/p>\n

dap.adapters =<\/span> {\n<\/span><\/span>      ["pwa-node"<\/span>] =<\/span> {\n<\/span><\/span>        type =<\/span> "server"<\/span>,\n<\/span><\/span>        port =<\/span> "${port}"<\/span>,\n<\/span><\/span>        executable =<\/span> {\n<\/span><\/span>          command =<\/span> "js-debug-adapter"<\/span>,\n<\/span><\/span>          args =<\/span> {\n<\/span><\/span>            "${port}"<\/span>,\n<\/span><\/span>          },\n<\/span><\/span>        },\n<\/span><\/span>      },\n<\/span><\/span>      ...\n<\/span><\/span>          }\n<\/span><\/span><\/code><\/pre><\/div>
\n
A quick clarification: ${port}<\/code> means that the port for the debugging session will be resolved automatically.<\/p>\n<\/blockquote>\n
Then, we can define some basic debug configuration for TypeScript:<\/p>\n
dap.configurations["typescript"<\/span>] =<\/span> {\n<\/span><\/span>        {\n<\/span><\/span>          type =<\/span> "pwa-node"<\/span>,\n<\/span><\/span>          request =<\/span> "launch"<\/span>,\n<\/span><\/span>          name =<\/span> "Launch file"<\/span>,\n<\/span><\/span>          program =<\/span> "${file}"<\/span>,\n<\/span><\/span>          cwd =<\/span> "${workspaceFolder}"<\/span>,\n<\/span><\/span>        },\n<\/span><\/span>        {\n<\/span><\/span>          type =<\/span> "pwa-node"<\/span>,\n<\/span><\/span>          request =<\/span> "attach"<\/span>,\n<\/span><\/span>          name =<\/span> "Attach to process ID"<\/span>,\n<\/span><\/span>          processId =<\/span> utils.pick_process,\n<\/span><\/span>          cwd =<\/span> "${workspaceFolder}"<\/span>,\n<\/span><\/span>        },\n<\/span><\/span>}\n<\/span><\/span><\/code><\/pre><\/div>
\n  \n  Debugging simple files\n  <\/span>\n  \n    \n      <\/path>\n      \n      <\/path>\n    <\/svg>\n  <\/a>\n<\/h2>
Consider this simple TypeScript file:<\/p>\n
\/\/ foo.ts\n<\/span><\/span><\/span><\/span>function<\/span> foo() {<\/span>\n<\/span><\/span>      console<\/span>.log<\/span>("hey!"<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>foo<\/span>();\n<\/span><\/span><\/code><\/pre><\/div>
All we have to do is to:<\/p>\n
    \n
  1. place a breakpoint using :DapToggleBreakpoint<\/code>, let\u2019s say at foo()<\/code> line<\/li>\n
  2. start a debugging session with :DapContinue<\/code><\/li>\n
  3. choose Launch file<\/em><\/li>\n<\/ol>\n
    Then, we should see something like this:<\/p>\n
    \n  \"image.png\"\n<\/p><\/p>\n
    except the lint error.<\/em><\/p>\n
    So\u2026 it works! However, this is merely the simplest example. In reality, we are dealing with much more complex projects.<\/p>\n
    In fact, the current configuration does not work with even the simplest TypeScript project<\/strong>  - i.e. a tsconfig.json<\/code> file and a TypeScript file.<\/p>\n
    Assuming we have a main.ts<\/code> file:<\/p>\n
    function<\/span> foo<\/span>():<\/span> string<\/span> {\n<\/span><\/span>      return<\/span> "Andrei"<\/span>;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>console<\/span>.log<\/span>(foo<\/span>());\n<\/span><\/span><\/code><\/pre><\/div>
    and a basic tsconfig.json<\/code>:<\/p>\n
    {\n<\/span><\/span>    "compilerOptions"<\/span>:<\/span> {\n<\/span><\/span>    "sourceMap"<\/span>:<\/span> true<\/span>\n<\/span><\/span>  },\n<\/span><\/span>  "include"<\/span>:<\/span> [".\/main.ts"<\/span>]\n<\/span><\/span>}\n<\/span><\/span><\/code><\/pre><\/div>
    then, following the same steps as above, we will notice that debugging does not work:<\/strong><\/p>\n
    \n    
There are other things we could define and set up (such as keymaps, visual elements, etc.), but, for the scope of this article, what has been presented so far is sufficient. The entire debug configuration can be found here<\/a>. Let\u2019s put what we\u2019ve been configuring so far to practice!<\/p>\n