VSCode Node/Express Debugging Config

[leepowelldev]

Don't suppose anyone has a VSCode config for debugging the express server in dev mode? I've spent a few hours trying to get something to work with no luck. I'm currently using:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Remix: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    }
  ]
}

Which works when I use the debugger keyword, however, setting breakpoints in VSCode results in breakpoints being unbound.

[zigomir]

I have sam problem – but don't want to spend hours on it :) I tried this config but no luck

[edit] Ha, it's very simple :)

What you do is open package.json and hover over dev until you see Run Script | Debug script popup. Of course you then select Debug script.

Then just write a debugger in your loader / action and trigger it – and it all just works™.

[leepowelldev]

Thanks - ideally I'd like to step through source files, and also to use inline breakpoints rather than a debugger statement. But this will do for now :)

[jdevries3133]

Is it possible to generate server side source maps in the build folder so that editors can support debugging better without the only way to break being an actual debugger statement in source?

[jdevries3133]

I am having some trouble, I made a detailed write-up of my issue. I'm
definitely uncertain about whether this is a remix issue or a my-config issue,
but any support is much appreciated.

Remix Source Map Issue

My Setup

Frist, I am working on setting up debugging with nvim-dap for the first time,
so of course my first concern is that there is something wrong with my setup
which has nothing to do with remix. I created a trivial example and uploaded
the demo repository to
demonstrate that my setup seems to be working in general. I was able to debug
the example I created here, which trivially reproduces what I'm trying to do
with the debugger in remix. I set breakpoints in the typescript file, and was
able to step through it successfully.

My Debug Script

I'm running remix inside a docker container, so expose the remote debugging
port and use this script for debugging:

"debug": "node --inspect-brk=0.0.0.0 ./node_modules/.bin/remix dev --sourcemap"

I'm then able to attach my debugger with this launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "address": "localhost",
      "name": "Attach to Remote",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "sourceMap": true,
      "outFiles": [
        "${workspaceFolder}/build/**",
        "${workspaceFolder}/public/build/**"
      ]
    }
  ]
}

The debugger attaches but source maps don't work. If I add a debugger;
statement in my source, it does stop, but breakpoints I set in my typescript
source don't work. Error messages are emitted along the lines of, "Breakpoint
set but not yet bound." This behavior is the same with nvim-dap and VS Code.

Confirming Source Maps Exist

I confirmed that remix is outputting source maps in ./build

:!ls build
[No write since last change]
index.js
index.js.map

I also confirmed that source maps are in ./public/build, although I don't think
that matters because I'm only concerned with server-side debugging right now.

:!ls public/build
[No write since last change]
_assets
_shared
entry.client-LSGM24BX.js
entry.client-LSGM24BX.js.map
manifest-97FB9AEC.js
manifest-F3431B1B.js
root-T6V6OF27.js
root-T6V6OF27.js.map
routes

tsconfig files

I'm also concerned about the way my tsconfig files are setup. I nested a remix tsconfig inside the app folder and put a tsconfig file for cypress in its folder so that I could make cypress tests know about the global cy object. I'm wondering if I might have broken something in that process

I'm also wondering if the way I have my tsconfig files setup might be a problem.

Top-Level tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./app"
    },
    {
      "path": "./cypress"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "target": "ES2019",
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "noEmit": true,
    "paths": {
      "~/*": ["app/*"]
    }
  },
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"]
}

app/tsconfig.json

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

cypress/tsconfig.json

{
  "compilerOptions": {
    "composite": true,
    "target": "es5",
    "lib": ["es2015", "es5", "dom"],
    "types": ["cypress"],
    "noEmit": true
  },
  "include": ["**/*.ts"]
}

[kiliman]

Ah, your setup is a bit more complicated than mine. Definitely a lot more moving parts.

Can you update your sample repo to include your Dockerfile?

[jdevries3133]

Ah, I finally figured it out! My problem was that I didn't include localRoot and remoteRoot in my launch.json. When remix ran inside the container, the generated source maps used file paths inside the docker container, which the debugger couldn't map to files on my local machine.

This is the final launch.json I came up with, which did work in VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "address": "localhost",
      "name": "Attach to Remote",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "sourceMaps": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
      "outFiles": [
        "${workspaceFolder}/build/*.js",
        "${workspaceFolder}/pubilc/build/*.js",
        "!**/node_modules/**"
      ]
    }
  ]
}

The remote root is /app because that's the working directory I chose in my Dockerfile.

[jdevries3133]

Follow-up: for anyone discovering this thread re:neovim, I'm still having issues, albeit unrelated to remix. I found that although the above change made everything work beautifully in VS Code, but breakpoints in nvim / nvim-dap still don't work. I followed @kiliman's advice and dockerized my trivial example to more closely resemble my scenario with my dockerized remix project.

I found that with the trivial example in this state, I could successfully debug and set breakpoints in VS Code, but could not do so in neovim / nvim-dap. I'm going to go over to those communities to continue asking for help, and update this thread if I find anything specific to neovim / nvim-dap.

[jdevries3133]

I opened up a thread on the nvim-dap discussion page.

mfussenegger/nvim-dap#596

[natac13]

Does anyone have this working for the Grunge Stack?

[PaulLockett]

Would love a solution for this