This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Debugging Webpack" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

The “--inspect“ flag can be used on the command line for enabling some debugging capabilities in Webpack. At the time of this recording, this flag was only available in node-nightly. Code examples for debugging are located on the FEM/01.1-debug-webpack branch.

Get Unlimited Access Now

Transcript from the "Debugging Webpack" Lesson

>> [MUSIC]

>> Kent C Dodds: Unfortunately, we're gonna skip this bit because we are pretty far behind. But I'll explain that there's this cool thing in Node version seven which is unstable Node, it will be stable on version eight. But you can run it with --inspect and then --debug brk. Actually, well, I'll all go ahead and do that, npm, well, we'll just check out the next branch.

[00:00:33] So you can feel free to check out the next branch as well and try this.
>> Kent C Dodds: But if we run npm run debug:dev. Then it's gonna give me a URL to put in my Chrome browser that will open up the DevTools and put a breakpoint at the first line of JavaScript code.

[00:00:57] And I have my DevTools, so I can step over to the next line. And I can save path.resolve or relative or whatever, and I can like use all that stuff right in my Chrome DevTools. It's super, super handy and one thing that this branch is adding that we're gonna skip over, is it also adds another env property to our command line flags for debug.

[00:01:22] And so you can specify, okay, npm run build with env debug. And then you get a console log of your config, and you also get a debugger right here. So you can look at your config objects and see, okay, so my context is actually this URL in my output, and you can actually even say, config.output = cool story bro.

[00:01:45] And then you can play on through and you totally broke your webpack stuff. But hopefully, that can make it a little bit easier for you to work through webpack stuff. Unfortunately, right now, node-nightly does not work for Windows. Hopefully, by this afternoon or later today, it maybe even it will cuz I know they're working on it right now.