The full video and many others like it are all available as part of our Frontend Masters subscription.

Kent C Dodds

Kent C. Dodds works at PayPal as a full stack JavaScript engineer. He host JavaScript Air and co-hosts React30 podcasts. Kent is an Egghead.io instructor and Google Developer Expert.

Kent C Dodds

PayPal

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.
- http://slides.com/kentcdodds/webpack-deep-dive#/7/1

Get Unlimited Access Now

Kent C Dodds: Unfortunately, we're going to 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.

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 going to 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.

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 going to skip over, is it also adds another env property to our command line flags for debug.

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.

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 because I know they're working on it right now.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now