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.

An Immutable Map logged in the console is pretty hard to read.

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.

An Immutable Map logged with immutable-devtools is much easier to read.

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.

Check "Enable custom formatters".

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 Immutable from 'immutable';
import installDevTools from 'immutable-devtools';

installDevTools(Immutable);

Happy formatting!

 
11
Kudos
 
11
Kudos