Search code examples
typescriptgoogle-chrome-devtoolsvscode-debuggermonoreponpm-workspaces

VS Code or Chrome Dev Tools: debug NPM Workspaces (monorepo) TypeScript + React code

I've got a monorepo setup using NPM Workspaces. It looks something like this:

  • apps
    • my-react-app
  • packages
    • shared-package

Both my-react-app and shared-package are rewritten in TypeScript. My React app launches on localhost:3000. I can use both Chrome Dev Tools and VS Code's debugger to break on code inside the main React app (ts and tsx files in my-react-app), but I can't get my breakpoint to hit in shared-package.

Chrome Dev Tools

I can see shared-package's TypeScript files in Chrome Dev Tools (via source maps), but breakpoints there never get hit.

VS Code Debugger

With the following configuration inside launch.json:

{
  "name": "Launch Edge",
  "request": "launch",
  "type": "pwa-msedge",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

I can get breakpoints to hit in my-react-app but not shared-package.

How can I get breakpoints to hit in a monorepo package with either Chrome Dev Tools or VS Code's debugger?

Solution

  • 2020-01-18 Update: Create React App released v5.0.0 and in it is:

    #8227 Add source-map-loader for debugging into original source of node_modules libraries that contain sourcemaps (@justingrant)

    With this change, the debugger will go deep inside source maps of modules, so for those of us lucky enough to use CRA, this problem is solved. 👍

    Original Answer

    I got it to work, but sadly I'm debugging the compiled JavaScript and not the source TypeScript in the dependent packages (e.g. packages/shared-package from my example above).

    Here's my launch.json:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Attach React App",
      "url": "http://localhost:3030", // Or whatever port your app is running on
      "webRoot": "${workspaceFolder}/apps/my-react-app"
    }
  ]
}

    It's hard to find the file to attach a breakpoint to, but if you add a debugger; to the source TypeScript file, then VS Code will break on the compiled file. From that point forward, you can add as many breakpoints as you'd like in the compiled file and VS Code will stop on them.

    Launch the debugger with F5 and watch your debugger come to life:

    enter image description here

    Note: Adding a breakpoint to your react app (e.g. apps/my-react-app) will work as expected and you will be debugging your source TypeScript files. The problem of debugging the compiled files is only when you want to add a breakpoint to the dependent packages.