mattzeunert/immutable-object-formatter-extension

Make ImmutableJS objects more readable when viewed in Chrome DevTools

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.

immutable-object-formatter-extension's Issues

instructions unclear

Screenshot doesn't match:

Not seeing formatted results

I've installed the extension and enabled "Enable custom formatters" in chrome dev tool settings as per readme, but after doing so, I'm still not seeing the formatting in the screenshot.

I'm using Chrome v56.0.2924.76 (64-bit) on a MBP. Is there anything else I'm missing to get this to work? My current console settings look like this.

1.8 version not work

When update to 1.8, it not working.

String "null" is formatted as null

The string "null" is formatted as null itself, causing confusion.

Screenshot: https://imgur.com/yx81O8Z

This is on the version at the Chrome Web Store at https://chrome.google.com/webstore/detail/immutablejs-object-format/hgldghadipiblonfkkicmgcbbijnpeog?hl=en

Symbols in maps causes formatter to break

Hey, thanks for this extension.

I get this error:

Custom Formatter Failed: Uncaught TypeError: Cannot convert a Symbol value to a number

When attempting to expand a immutable Map with symbols as keys.

ImmutableJS 4.0 breaks chrome extension

I believe that an api change in 4.0 will break immutable object formatter extension. Try this codepen for an example of a record not being formatted in the chrome console when logged out. Instead, I get "Custom Formatter Failed: record.keySeq is not a function" and an unformatted object:

Formatted objects in console are not accessible via keyboard

I am used to navigate objects in the console using only my keyboard, but the formatted version of the immutable objects will not expand if you use your keyboard. You have to use your mouse to click through and expand the objects.

I am happy to submit a PR for this--could you please advise what is the best approach?

Create new release for downstream changes in immutable-devtools

There was an issue in the downstream immutable-devtools that was fixed here andrewdavey/immutable-devtools#38 by @dbassett17. I just want to follow up and see if you could perhaps do a release of this extension to the chrome store with the updated dependency

"immutable-devtools": "0.1.5" or higher

Couldn't get working… until I restarted Chrome

OS: MacOS 10.12.6 (16G1314)
Chrome version: 65.0.3325.181

I've enabled the custom formatters…

… and now I've realised my browser needed to restart for a version update, so this is not an actual issue, but reporting it in case anyone else has the same problem & looks here for answers.

Clarify in the readme.md that the user has to enable 'Custom Formatters'

Nice tool! Thanks for taking time to create it. It is really useful!

May I suggest that you clarify somewhere in the Readme.md file that the user has to enable "Custom formatters" in the devtools settings? It took me a while to find it.

Thanks again.

incorrectly displays Map properties of Records as Objects (Immutable 4.0.0-rc.9 only?)

I'm using Immutable 4.0.0-rc.9, but I'm not sure whether this happens with Immutable 3.

> console.log(Immutable);
(index):142 {default: {…}, version: "4.0.0-rc.9", Collection: ƒ, Iterable: ƒ, Seq: ƒ, …}
> const {Record, Map} = Immutable
undefined
> const Foo = Record({bar: Map()})
undefined
> Foo()
Record {
  bar: Object
    __proto__: Object
}
> Foo().get('bar')
Map[0]

Privacy Concerns

Hi,

I noticed when installing this chrome extension, it required some very liberal content permissions. I.E. it can read and change all your data on the websites you visit.

Can you explain why the object formatter requires such extreme permissions, and whether you can guarantee our data is safe? I will not be using the extension until those concerns are addressed. Thank you.

When update to 1.9.1, it not working.

I use macOS 10.14.1 and Chrome 71.0.3578.80, after upgrade to 1.9.1 it not working. Here is the example:

Missing "Enable custom formatters" checkbox

In Chrome Version 63.0.3239.108 (Official Build) (64-bit), the "Enable Custom formatters" checkbox is missing from the DevTools settings :

Was it moved?

Nested properties not showing up

Great extension thank you so much Matt. I have had this issue for a few weeks now, when opening nested properties allI see is white. The work around is right clicking the object and selecting 'store as global variable' which can then be inspected at the bottom of the console. But this is inefficient... I have googled to see if others are having this issue and can't find any info - I know some other ppl are solving it the way I am right now too though. This does not happen with every object and I can't find the pattern for when it happens vs doesn't. This also happens when property values are extremely long and don't fit in the console window (resizing will fix it) but this isn't always the case.

Edit: I do think this has to do with line length. There are some values that are so long they would have to wrap even with the console window as wide as it can get and these are the ones that are not showing up.

keys are vertical-aligned to the center

in https://github.com/andrewdavey/immutable-devtools screenshot keys are aligned to the top. So I’m wondering is it extension issue?

Image Upload

How this extension works?

Please, write some lines in readme :-) Thanks!

Avoid bundle.js request in network panel

Currently this request appears on every page... It wouldn't be necessary if we included the code directly in the content script file.

possible way to determine if something is a record

Not at all elegant, but this is true for Records (not sure if it's true for anything else though):

Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(thing)))['@@__IMMUTABLE_KEYED__@@']