Debugging in VSCode

I’m trying to setup remote debugging in VSCode for my storybook components. However, when i launch storybook using the Chrome Remote Debugging plugin in VSCode it says that is cannot find my source. I’m assuming this has to do with the iFrame window that the actual stories run inside of.

Has anyone successfulyl setup remote debugging in VSCode for Storybook stories? Is there a launch.json config to be shared?

[kresli]

This shouldn’t be closed until the docs are updated. Also still no luck with above configuration. However adding * in sourceMapPathOverriders works for me

      "type": "chrome",
      "request": "launch",
      "name": "Storybook Debug",
      "url": "http://localhost:6006",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    },```

[stephencweiss]

@ryudice - I got it working this morning after a bit of investigation.

I used @kresli’s solution, though ran into the same issue where my breakpoints weren’t stopping.

Turns out this is a known issue: https://github.com/Microsoft/vscode-chrome-debug#my-breakpoints-arent-hit-whats-wrong

For me, the issue was a simple as refreshing the Storybook page, though a better fix was to add the breakOnLoad option. With that addition to @kresli’s solution, no reload was necessary. .

My launch.json:

    {
      // Requires the extension Debugger for Chrome: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
      "type": "chrome",
      "request": "launch",
      "name": "Storybook Debug",
      "breakOnLoad": true,
      "url": "http://localhost:9001",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    },

The other thing to keep in mind (in case it’s not immediately obvious) is that the url should match where your Storybook server is running.

The launch.json config matches my Storybook script:

"scripts": {
  "storybook": "start-storybook -p 9001 -c .storybook",
}

Hope this helps you or anyone else who comes later!