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

Published in

webpack

3 min readJul 21, 2016

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:

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:

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!

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 bits: Learn and Debug webpack with Chrome Dev Tools!

Why use Dev Tools with webpack?

How to use Dev Tools for node?

How to use node-nightly with webpack?

Conclusion

Written by Sean T. Larkin