Skip to content

Commit 1c2ea8d

Browse files
tramwaytramway
committed
JS Debug using vscode-js-debug
1 parent 07d3bcb commit 1c2ea8d

File tree

2 files changed

+209
-43
lines changed

2 files changed

+209
-43
lines changed

‎init.lua‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ require('lazy').setup({
254254
-- Document existing key chains
255255
spec = {
256256
{ '<leader>c', group = '[C]ode', mode = { 'n', 'x' } },
257-
{ '<leader>d', group = '[D]ocument' },
257+
{ '<leader>d', group = '[D]ebug/Document' },
258258
{ '<leader>g', group = '[G]it' },
259259
{ '<leader>r', group = '[R]ename' },
260260
{ '<leader>s', group = '[S]earch' },
@@ -479,7 +479,7 @@ require('lazy').setup({
479479

480480
-- Fuzzy find all the symbols in your current document.
481481
-- Symbols are things like variables, functions, types, etc.
482-
map('<leader>ds', require('telescope.builtin').lsp_document_symbols, '[D]ocument [S]ymbols')
482+
map('<leader>dS', require('telescope.builtin').lsp_document_symbols, '[D]ocument [S]ymbols')
483483

484484
-- Fuzzy find all the symbols in your current workspace.
485485
-- Similar to document symbols, except searches over your entire project.

‎lua/kickstart/plugins/debug.lua‎

Lines changed: 207 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,62 +26,143 @@ return {
2626

2727
-- Web
2828
{
29-
'microsoft/vscode-chrome-debug',
30-
version = '1.x',
31-
build = 'npm i && npm run build',
29+
'microsoft/vscode-js-debug',
30+
-- TODO: check wheter vscode-js-debug has some "build dap server script in package.json"
31+
build = 'npm i && npx gulp dapDebugServer',
3232
},
3333
},
3434
keys = {
35-
-- Basic debugging keymaps, feel free to change to your liking!
35+
{ -- NOTE: Temporary solution to open chrome - until I'll figure out how to run it automatically
36+
'<leader>dd',
37+
':!open -a "Google Chrome" --args --remote-debugging-port=9222<CR>',
38+
},
39+
-- TODO: change lua formatter to keep such entries in one line
3640
{
37-
'<F8>',
41+
'<leader>dB',
42+
function()
43+
require('dap').set_breakpoint(vim.fn.input 'Breakpoint condition: ')
44+
end,
45+
desc = 'Breakpoint Condition',
46+
},
47+
{
48+
'<leader>db',
49+
function()
50+
require('dap').toggle_breakpoint()
51+
end,
52+
desc = 'Toggle Breakpoint',
53+
},
54+
{
55+
'<leader>dc',
3856
function()
3957
require('dap').continue()
4058
end,
41-
desc = 'Debug: Start/Continue',
59+
desc = 'Run/Continue',
60+
},
61+
{
62+
'<leader>da',
63+
function()
64+
require('dap').continue { before = get_args }
65+
end,
66+
desc = 'Run with Args',
67+
},
68+
{
69+
'<leader>dC',
70+
function()
71+
require('dap').run_to_cursor()
72+
end,
73+
desc = 'Run to Cursor',
4274
},
4375
{
44-
'<F10>',
76+
'<leader>dg',
77+
function()
78+
require('dap').goto_()
79+
end,
80+
desc = 'Go to Line (No Execute)',
81+
},
82+
{
83+
'<leader>di',
4584
function()
4685
require('dap').step_into()
4786
end,
48-
desc = 'Debug: Step Into',
87+
desc = 'Step Into',
4988
},
5089
{
51-
'<F9>',
90+
'<leader>dj',
5291
function()
53-
require('dap').step_over()
92+
require('dap').down()
5493
end,
55-
desc = 'Debug: Step Over',
94+
desc = 'Down',
5695
},
5796
{
58-
'<F11>',
97+
'<leader>dk',
98+
function()
99+
require('dap').up()
100+
end,
101+
desc = 'Up',
102+
},
103+
{
104+
'<leader>dl',
105+
function()
106+
require('dap').run_last()
107+
end,
108+
desc = 'Run Last',
109+
},
110+
{
111+
'<leader>do',
59112
function()
60113
require('dap').step_out()
61114
end,
62-
desc = 'Debug: Step Out',
115+
desc = 'Step Out',
116+
},
117+
{
118+
'<leader>dO',
119+
function()
120+
require('dap').step_over()
121+
end,
122+
desc = 'Step Over',
123+
},
124+
{
125+
'<leader>dP',
126+
function()
127+
require('dap').pause()
128+
end,
129+
desc = 'Pause',
63130
},
64131
-- Toggle to see last session result. Without this, you can't see session output in case of unhandled exception.
65132
{
66-
'<F6>',
133+
'<leader>dl',
67134
function()
68135
require('dapui').toggle()
69136
end,
70137
desc = 'Debug: See last session result.',
71138
},
72139
{
73-
'<leader>b',
140+
'<leader>dr',
74141
function()
75-
require('dap').toggle_breakpoint()
142+
require('dap').repl.toggle()
76143
end,
77-
desc = 'Debug: Toggle Breakpoint',
144+
desc = 'Toggle REPL',
78145
},
79146
{
80-
'<leader>B',
147+
'<leader>ds',
81148
function()
82-
require('dap').set_breakpoint(vim.fn.input 'Breakpoint condition: ')
149+
require('dap').session()
150+
end,
151+
desc = 'Session',
152+
},
153+
{
154+
'<leader>dt',
155+
function()
156+
require('dap').terminate()
157+
end,
158+
desc = 'Terminate',
159+
},
160+
{
161+
'<leader>dw',
162+
function()
163+
require('dap.ui.widgets').hover()
83164
end,
84-
desc = 'Debug: Set Breakpoint',
165+
desc = 'Widgets',
85166
},
86167
},
87168
config = function()
@@ -143,28 +224,113 @@ return {
143224
dap.listeners.before.event_terminated['dapui_config'] = dapui.close
144225
dap.listeners.before.event_exited['dapui_config'] = dapui.close
145226

146-
dap.adapters.chrome = {
147-
type = 'executable',
148-
command = 'node',
149-
args = { vim.fn.stdpath 'data' .. '/lazy/vscode-chrome-debug/out/src/chromeDebug.js' }, -- TODO adjust
150-
}
227+
for _, adapterType in ipairs { 'node', 'chrome', 'msedge' } do
228+
local pwaType = 'pwa-' .. adapterType
151229

152-
-- TODO: Figure out how to launch chrome automatically
153-
-- TODO: Figure out why I have two additional configurations when starting debugger: "Launch Chrome Debugger", "Debug App Two"
154-
-- now I have to do "open -a "Google Chrome" --args --remote-debugging-port=9222"
155-
dap.configurations.typescript = {
156-
{
157-
name = 'Attach to Chrome',
158-
type = 'chrome',
159-
request = 'attach',
160-
program = '${file}',
161-
cwd = vim.fn.getcwd(),
162-
sourceMaps = true,
163-
protocol = 'inspector',
164-
port = 9222,
165-
webRoot = '${workspaceFolder}',
166-
},
167-
}
230+
dap.adapters[pwaType] = {
231+
type = 'server',
232+
host = 'localhost',
233+
port = '${port}',
234+
executable = {
235+
command = 'node',
236+
args = {
237+
vim.fn.stdpath 'data' .. '/lazy/vscode-js-debug/dist/src/dapDebugServer.js',
238+
'${port}',
239+
},
240+
},
241+
}
242+
243+
-- this allow us to handle launch.json configurations
244+
-- which specify type as "node" or "chrome" or "msedge"
245+
dap.adapters[adapterType] = function(cb, config)
246+
local nativeAdapter = dap.adapters[pwaType]
247+
248+
config.type = pwaType
249+
250+
if type(nativeAdapter) == 'function' then
251+
nativeAdapter(cb, config)
252+
else
253+
cb(nativeAdapter)
254+
end
255+
end
256+
end
257+
258+
local enter_launch_url = function()
259+
local co = coroutine.running()
260+
return coroutine.create(function()
261+
vim.ui.input({ prompt = 'Enter URL: ', default = 'http://localhost:4201' }, function(url)
262+
if url == nil or url == '' then
263+
return
264+
else
265+
coroutine.resume(co, url)
266+
end
267+
end)
268+
end)
269+
end
270+
271+
for _, language in ipairs { 'typescript', 'javascript', 'typescriptreact', 'javascriptreact', 'vue' } do
272+
dap.configurations[language] = {
273+
-- NOTE: Tested configs
274+
-- NOTE: inspired by https://github.com/StevanFreeborn/nvim-config/blob/main/lua/plugins/debugging.lua
275+
-- TODO: Figure out why I have two additional configurations when starting debugger: "Launch Chrome Debugger", "Debug App Two"
276+
-- now I have to do "open -a "Google Chrome" --args --remote-debugging-port=9222"
277+
{
278+
-- TODO: Figure out how to launch chrome automatically
279+
-- url = enter_launch_url,
280+
name = 'Attach to Chrome',
281+
type = 'pwa-chrome',
282+
request = 'attach',
283+
program = '${file}',
284+
cwd = vim.fn.getcwd(),
285+
sourceMaps = true,
286+
protocol = 'inspector',
287+
port = 9222,
288+
webRoot = '${workspaceFolder}',
289+
},
290+
{
291+
-- TODO: This config launches chrome, breapoints are working, but it's very slow for some reason
292+
type = 'pwa-chrome',
293+
request = 'launch',
294+
name = 'Launch Chrome (nvim-dap)',
295+
url = enter_launch_url,
296+
webRoot = '${workspaceFolder}',
297+
sourceMaps = true,
298+
},
299+
300+
-- NOTE: Untested configs
301+
{
302+
type = 'pwa-node',
303+
request = 'launch',
304+
name = 'Launch file using Node.js (nvim-dap)',
305+
program = '${file}',
306+
cwd = '${workspaceFolder}',
307+
},
308+
{
309+
type = 'pwa-node',
310+
request = 'attach',
311+
name = 'Attach to process using Node.js (nvim-dap)',
312+
processId = require('dap.utils').pick_process,
313+
cwd = '${workspaceFolder}',
314+
},
315+
-- requires ts-node to be installed globally or locally
316+
{
317+
type = 'pwa-node',
318+
request = 'launch',
319+
name = 'Launch file using Node.js with ts-node/register (nvim-dap)',
320+
program = '${file}',
321+
cwd = '${workspaceFolder}',
322+
runtimeArgs = { '-r', 'ts-node/register' },
323+
},
324+
{
325+
type = 'pwa-msedge',
326+
request = 'launch',
327+
name = 'Launch Edge (nvim-dap)',
328+
url = enter_launch_url,
329+
webRoot = '${workspaceFolder}',
330+
sourceMaps = true,
331+
},
332+
}
333+
end
168334

169335
-- Install golang specific config
170336
require('dap-go').setup {

0 commit comments

Comments
 (0)