Custom Formatters for Immutable.js

Immutable.js is great. It helps me write simpler and more efficient React, but debugging code that uses Immutable structures can be a little frustrating.

Usually I call map.toJS() or map.toString() to get a look at my data. It’s not the worst thing in the world, but it’s certainly less seamless than working with native structures like Objects, Arrays, or ES6 Maps.

Lucky for all of us, there’s an awesome library called immutable-devtools that leverages a new feature in Chrome 47+ called Custom Formatters to print Immutable structures in a human-readable way.

To get it working, go to the “General” tab of settings page in the Chrome DevTools and check “Enable custom formatters” in the “Console” section.

Then, add immutable-devtools to your project.

npm install --save-dev immutable-devtools

Finally, install the formatter in your project’s JavaScript entry point.

import