How to configure the DAP debugger under neovim for typescript?

Question

I'm trying to configure the DAP debugger in Neovim for a typescript application.

I added the DAP plugin:

    use "mfussenegger/nvim-dap"

I also have a config.lua file containing the adapter and configuration:

      local status_ok, dap = pcall(require, "dap")
      if not status_ok then
        return
      end
      
      dap.adapters.chrome = {
        type = "executable",                                                                                                                                      
        command = "node",    
        args = {os.getenv("HOME") .. "/dev/dap-debugger/vscode-js-debug/out/src/debugServerMain.js", "45635"}
      }    
      dap.configurations.typescript = {    
        {    
        type = "chrome",    
        request = "attach",    
        program = "${file}",   
        debugServer = 45635,
        cwd = vim.fn.getcwd(),    
        sourceMaps = true,    
        protocol = "inspector",    
        port = 9222,    
        webRoot = "${workspaceFolder}"    
        }    
      }

When, under nvim in my typescript application project, I try to start the debugger with the :lua require'dap'.continue() command, I get the error:

Debug adapter didn't respond. Either the adapter is slow (then wait and ignore this) or there is a problem with your adapter or `chrome` configuration. Check 
the logs for errors (:help dap.set_log_level)

But the ~/.cache/nvim/dap.log DAP log shows no error:

    [ DEBUG ] 2022-04-12T08:49:37Z+0200 ] ...nvim/site/pack/packer/start/nvim-dap/lua/dap/session.lua:776 ] "Spawning debug adapter"    {
      args = { "/home/stephane/dev/dap-debugger/vscode-js-debug/out/src/debugServerMain.js", "45635" },
      command = "node",
      type = "executable"
    }
    [ DEBUG ] 2022-04-12T08:49:37Z+0200 ] ...nvim/site/pack/packer/start/nvim-dap/lua/dap/session.lua:965 ] "request"   {
      arguments = {
        adapterID = "nvim-dap",
        clientId = "neovim",
        clientname = "neovim",
        columnsStartAt1 = true,
        linesStartAt1 = true,
        locale = "en_US.UTF-8",
        pathFormat = "path",
        supportsRunInTerminalRequest = true,
        supportsVariableType = true
      },
      command = "initialize",
      seq = 0,
      type = "request"
    }

I can set breakpoints with the command:

    lua require'dap'.toggle_breakpoint()

I also installed the VSCode Js debugger with the following commands:

    git clone https://github.com/microsoft/vscode-js-debug
    cd vscode-js-debug/
    npm i
    gulp

I can see that my Chrome browser is listening on the 9222 port:

    chrome    208069        stephane  118u  IPv4 1193769      0t0  TCP 127.0.0.1:9222 (LISTEN)

If I run the debugger manually, I can see it starts on the given port number:

    09:16 $ node ~/dev/dap-debugger/vscode-js-debug/out/src/debugServerMain.js 45635
    Debug server listening at 45635

I'm on NVIM v0.7.0-dev

My Angular application is started and responds all right.

UPDATE: The debugger I was trying to use is not on DAP standard. I guess I need to find an alternative.

Answer 1

The VSCode Chrome debugger is deprecated and has been replaced by the VSCode JS debugger. The VSCode JS debugger is compatible with all browsers. But the VSCode JS debugger is not DAP compliant. So the VSCode Chrome debugger is still being used for now.

Installing the debugger:

git clone git@github.com:microsoft/vscode-chrome-debug.git
cd vscode-chrome-debug
npm install
npm run build

Configuring the debugger:

  local function configureDebuggerAngular(dap)    
    dap.adapters.chrome = {    
      -- executable: launch the remote debug adapter - server: connect to an already running debug adapter    
      type = "executable",    
      -- command to launch the debug adapter - used only on executable type    
      command = "node",    
      args = { os.getenv("HOME") .. "/.local/share/nvim/lsp-debuggers/vscode-chrome-debug/out/src/chromeDebug.js" }    
    }    
    -- The configuration must be named: typescript    
    dap.configurations.typescript = {    
      {    
        name = "Debug (Attach) - Remote",    
        type = "chrome",    
        request = "attach",    
        -- program = "${file}",    
        -- cwd = vim.fn.getcwd(),    
        sourceMaps = true,    
        --      reAttach = true,    
        trace = true,    
        -- protocol = "inspector",    
        -- hostName = "127.0.0.1",    
        port = 9222,    
        webRoot = "${workspaceFolder}"    
      }    
    }    
  end

  local function configureDap()
    local status_ok, dap = pcall(require, "dap")
    if not status_ok then
      print("The dap extension could not be loaded")
      return
    end
  
    dap.set_log_level("DEBUG")
  
    vim.highlight.create('DapBreakpoint', { ctermbg = 0, guifg = '#993939', guibg = '#31353f' }, false)
    vim.highlight.create('DapLogPoint', { ctermbg = 0, guifg = '#61afef', guibg = '#31353f' }, false)
    vim.highlight.create('DapStopped', { ctermbg = 0, guifg = '#98c379', guibg = '#31353f' }, false)
  
    vim.fn.sign_define('DapBreakpoint', { text = '', texthl = 'DapBreakpoint', linehl = 'DapBreakpoint',
      numhl = 'DapBreakpoint' })
    vim.fn.sign_define('DapBreakpointCondition',
      { text = 'ﳁ', texthl = 'DapBreakpoint', linehl = 'DapBreakpoint', numhl = 'DapBreakpoint' })
    vim.fn.sign_define('DapBreakpointRejected',
      { text = '', texthl = 'DapBreakpoint', linehl = 'DapBreakpoint', numhl = 'DapBreakpoint' })
    vim.fn.sign_define('DapLogPoint', { text = '', texthl = 'DapLogPoint', linehl = 'DapLogPoint', numhl = 'DapLogPoint' })
    vim.fn.sign_define('DapStopped', { text = '', texthl = 'DapStopped', linehl = 'DapStopped', numhl = 'DapStopped' })
  
    return dap
  end

  local function configure()
    local dap = configureDap()
  
    if nil == dap then
      print("The DAP core debugger could not be set")
    end
  
    configureDebuggerAngular(dap)
  end