You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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
npm install
npm run dev
Load the "/extension" directory as an unpacked Chrome extension
Open "/test-page/index.html" to check everything looks as expected
Make sure to reload the extension after any changes.
About
Make ImmutableJS objects more readable when viewed in Chrome DevTools