Storybook: Debugging in VSCode

[duro]

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?

[ndelangen]

Sounds like something @orta might know a few things about? 🙏

[UsulPro]

I'm still interested in this as well!

May share this example: https://github.com/storybooks/storybook-addon-console#debugging
Not in browser, but debugging in Node with VSCode

[orta]

I have an example of when I got this working on ours: https://github.com/artsy/reaction/pull/23

[ndelangen]

Thanks @orta!!!

I'm hoping this helps @duro

[CzBuCHi]

I know this is necromancy, but @duro Did u manage to get it working?
Im asking, because @orta 's PR has no example hot to actually config it :(

[ndelangen]

If anyone has this info, a PR adding this info to the docs would be very much welcome!

[mlmassey]

Leaving this here just for someone looking for help. If you cannot set a breakpoint because of souce-maps, try this config:
{
"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/"
}
},

This important line was:
"webpack:///": "${webRoot}/",

[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/*" } },

[ndelangen]

If that works for you, it might be of help to others, would you care to make the PR to our docs @kresli ?

[kresli]

@ndelangen I'll do if I'll find a time :/ . Where it should go? IDE integration/VS Code? Also the above setup works for react (with typescript). Should be tested with other frameworks before adding to docs?

[ndelangen]

Testing/Debugging is VS Code seems like a good place to me?

If you are constrained on time, I'd suggest just adding the docs that you know work, and add a comment about the docs being in complete, and we're happy to take PR's adding/changing it.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[ryudice]

Any update on this? I tried all of the instructions here I do get the breakpoints to show as filled red but they never hit or stop.

[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!

[boatcoder]

This last version is the one that should be merged into the repo. Much cleaner and very helpful, the only thing it is missing is launching storybook, but considering the watch and auto reload, I don't mind launching storybook manually. For me it is on a docker, so this is recipe works for both on machine and on docker instances.

[migsc]

@boatcoder This worked for me for launching the storybook server and Chrome together.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Storybook server",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/.bin/start-storybook",
      "args": ["-p", "6006"],
      "stopOnEntry": false,
      "runtimeArgs": ["--nolazy"],
      "sourceMaps": false
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for Storybook",
      "breakOnLoad": true,
      "url": "http://localhost:6006",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Launch Storybook",
      "configurations": ["Launch Chrome for Storybook", "Run Storybook server"]
    }
  ]
}