Devtools

Inspecting immutable collections in browser's Dev Tools is awkward. You only see the internal data structure, not the logical contents. For example, when inspecting the contents of an Immutable List, you'd really like to see the items in the list.

Chrome (v47+) and Firefox (116+) has support for custom "formatters". A formatter tells browser's Dev Tools how to display values in the Console, Scope list, etc. This means we can display Lists, Maps and other collections, in a much better way.

Essentially, it turns this:

into:

Installation

Install the following extension in your browser:

• 

• 

Alternative

If you don't want to install an extension, you can install the devtools as a dependency in your project.

To do that, install the following package using your package manager:

npm install --save-dev @jdeniau/immutable-devtools

and enable it with:

import * as Immutable from 'immutable';
import installDevTools from '@jdeniau/immutable-devtools';

installDevTools(Immutable);

See more details in the github repository.