Breakpoints or Source Maps not working properly in Chrome

I’m using Storybook for some components, but breakpoints are not working correctly in Chrome Dev Tools.

I was able to reproduce the same issue in thekadira-samples/react-storybook-demo app with no modifications (the Todos app sample). Just clone it from github, do npm i and npm run storybook and open your browser to localhost:9001.

If I open TodoItem.js in the Chrome Dev Tools “Source” tab, and put a breakpoint on the first line of render(), then make a change in Storybook that causes a TodoItem to need to re-render (e.g., mark one as complete), the debugger “breaks”, but the file that Chrome Dev Tools shows has the name ?d41d, and the contents of the file is just the following:

undefined


/** WEBPACK FOOTER **
 ** 
 **/

Switching over to TodoItem.js has no effect, and single stepping just continues execution.

Anyone else have debugging working in Storybook?

[markov00]

@dagatsoin I’m currently on 4.1.11 and it’s just a matter of adding the following on your storybook webpack config:

  config.devtool = 'inline-source-map';

[trianta2]

Thanks @markov00 , your solution worked for me. For those like me who are still new to storybook, follow this example to update the storybook webpack config.