How to configure the DAP debugger under neovim for typescript? - neovim

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