Make ImmutableJS objects more readable when viewed in Chrome DevTools
Clone or download
Latest commit 9eb3a01 Dec 31, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
extension 1.9.2 Dec 31, 2018
img Clean up. Mar 26, 2016
test-page 1.9.2 Dec 31, 2018
.gitignore 1.9.1 Dec 8, 2018 Update Feb 24, 2018
build.js Inject as text instead of loading as script. Jan 31, 2017
content-script-template.js Inject as text instead of loading as script. Jan 31, 2017
index.js Directly use immutable-devtools as a dependency Jan 27, 2018
package-lock.json 1.9.2 Dec 31, 2018
package.json 1.9.2 Dec 31, 2018
webpack.config.js Inject as text instead of loading as script. Jan 31, 2017

Immutable.js Object Formatter (Chrome Extension)

Transforms Immutable JS objects to a more readable format when they are logged to the console.

Install the Chrome Extension

Based on immutable-devtools.

The Chrome extension will only work if you enable Custom Formatters in the DevTools settings.

Step 1: Open DevTools settings

Step 2: Enable custom formatters

How it works

The code in "/immutable-devtools" is essentially just a copy of immutable-devtools.

The two main differences are:

  1. We can't use instanceof Immutable.Record to detect if an object is a record, since we don't have access to the Immutable module that's loaded on the page. (We only have access to the one loaded in the extension.)
    We can still identify Records correctly, but the way we do it means there's a chance that an internal change in how Immutable.JS works could break that.
  2. The code can be loaded and unloaded several times on the same page, so we can't rely on variables inside the modules to detect if the formatters have already been injected into the page. Instead I'm setting a window.__ImmutableJSDevToolsFormattersInstalled property.

Then all that's left to do is to load the code in "devtools.js".

Running the code locally

  1. npm install
  2. npm run dev
  3. Load the "/extension" directory as an unpacked Chrome extension
  4. Open "/test-page/index.html" to check everything looks as expected

Make sure to reload the extension after any changes.