webpack bits: Learn and Debug webpack with Chrome Dev Tools!

Sean T. Larkin
Jul 21, 2016 · 3 min read

This article is a very short instructional detailing how to use the new chrome dev tools to help you debug and understand webpack better! Thanks to Paul Irish for getting me hooked on the feature and hemanth for the repository. IMPORTANT: The node-nightly package (per Tobias) isn’t working on Windows, however you should be able to use these features the same way through a manual install of the nightly node v7 binaries.

Why use Dev Tools with webpack?

Chrome Dev Tools are a life saver when working on web application development. But it doesn’t have to stop with just web applications!! I love using Chrome Dev Tools to also set breakpoints and step through source code that is running from node as well. It is not only a great learning tool, but helps you understand the inner workings of the technologies you are using.

How to use Dev Tools for node?

I recommend using the node-nightly npm package to access an instant nightly build of the node.js binaries. Why? Because thats how you use the latest and greatest Chrome Dev Tools inspector for node.

Here’s how you get started:

$ npm install --global node-nightly

Then you will need to “add the command into your path/CLI” by running (one time):

$ node-nightly

You are now ready to use node-nightly!!!!!

How to use node-nightly with webpack?

Since node-nightly cannot run alias bin commands, we have to access the webpack.js bin command from your node_modules.

$ node-nightly --inspect --debug-brk ./node_modules/webpack/bin/webpack.js 

Then you are provided with a friendly link that you paste into a new chrome tab.

Debugger listening on port 9229.To start debugging, open the following URL in Chrome:chrome-devtools://devtools/remote/serve_file/@521e5b7e2b7cc66b4006a8a54cb9c4e57494a5ef/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node

You can also run other JavaScript files that use the webpack API:

Image for post
Image for post
I used node-nightly + devtools to help me integrate webpack into the angular-cli (above). Also extremely helpful for creating plugins and loaders.

You can also help diagnose build time problems by running the javascript profiler seen here:

Image for post
Image for post
Using the profiler from Chrome Dev Tools (left). Monitoring my webpack build at the same time (right).

With Chrome Dev Tools at our fingertips, stepping through the webpack runtime is easier than ever!

Image for post
Image for post
Image for post
Image for post
Profile analysis of your node scripts. (Left) Providing an anonymous function into the plugins array allows you to access the webpack compiler so you can easily test and learn to write webpack plugins!!! (Right)

You don’t just have to use this on webpack, but any node script! Excellent for identifying memory leaks, performance bottlenecks, and insights on how your code works!

Conclusion

So break out your projects using webpack, give node-nightly a spin and see what things you find with node-nightly and share it with hashtag #webpack or in the comments below!!!

webpack

The official Medium publication for the webpack open source…

Thanks to Tobias Koppers and Juho Vepsäläinen

Sean T. Larkin

Written by

@Webpack Core team & AngularCLI team. Program Manager @Microsoft @EdgeDevTools. Web Performance, JavaScripter, Woodworker, 🐓 Farmer, and Gardener!

webpack

webpack

The official Medium publication for the webpack open source project!

Sean T. Larkin

Written by

@Webpack Core team & AngularCLI team. Program Manager @Microsoft @EdgeDevTools. Web Performance, JavaScripter, Woodworker, 🐓 Farmer, and Gardener!

webpack

webpack

The official Medium publication for the webpack open source project!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store