andrewdavey / immutable-devtools Goto Github PK

Hello,
Thanks for this addon, it's of great help!
I tried the new version of Immutable on my project and the formatters don't work anymore.
I only tried v4.0.0-rc.9 but I guess it's broken for the other rcs too, probably because of the breaking changes of v4.

Hi,

I am using React-Native 0.18 and get the error:

installDevTools is not a function.

What am I doing wrong?

EDIT I'm bundling with Webpack. I think the problem is the script is getting run in strict mode.

I just installed and tried to use this.
When I load my page I get an 'install' is undefined error.

Looking at the code in node_modules/immutable-devtools/dist/index.js, it looks like src/index.js is transformed from this:

// Check for globally defined Immutable and add an install method to it.
if (typeof Immutable !== "undefined") {
  Immutable.installDevTools = install.bind(null, Immutable);
}

// I imagine most people are using Immutable as a CommonJS module though...

let installed = false;
module.exports = function install(Immutable) {
...

To this:

Immutable.installDevTools=install.bind(null,Immutable));var o=!1;n.exports=function(n){if("undefined"==typeof window)

As you can see, uglification removed the name of the install function.

Looking forward to using this though, thanks!

How Seq should be displayed?

I'm using node --inspect-brk and chrome://inspect to debug the server side rendering (Using Webpack, React and Redux stack) but sure enough it says window object doesn't exist. maybe it should try installing those in global instead for it to work.

Remove the part about canary build

Thanks for this great tool @andrewdavey.

I notice that it can't be installed on versions of Chrome earlier than 48 and wondered, what work would be involved for older versions to be supported? Is it a case of introducing a few shims, or something much more involved?

When trying to inspect a record I sometimes get the error:

Custom Formatter Failed: Illegal format: obligatory attribute "object" isn't specified

I think it has to do with the fact that a property of the record is set to undefined but not sure...

Tried but got an error before running the code:

[node-haste] Encountered an error while persisting cache:
> SyntaxError: /Users/chen/repo/gist/Todolist/node_modules/immutable-devtools/before.png: Unexpected character '�' (1:0)
> > 1 | �PNG
>     | ^
>   2 | 
>   3 | 
>   4 | IHDR����
                EiCCPICC ProfileH
>     at Parser.pp.raise (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/parser/location.js:22:13)
>     at Parser.getTokenFromCode (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/tokenizer/index.js:561:12)
>     at Parser.readToken (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/tokenizer/index.js:180:21)
>     at Parser.<anonymous> (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/plugins/jsx/index.js:51:20)
>     at Parser.readToken (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/plugins/flow.js:155:22)
>     at Parser.nextToken (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/tokenizer/index.js:169:21)
>     at Parser.parse (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/parser/index.js:128:12)
>     at parse (/Users/chen/repo/gist/Todolist/node_modules/babylon/lib/index.js:47:47)
>     at File.parse (/Users/chen/repo/gist/Todolist/node_modules/babel-core/lib/transformation/file/index.js:517:34)
>     at File.parseCode (/Users/chen/repo/gist/Todolist/node_modules/babel-core/lib/transformation/file/index.js:603:20)

It would be handy to have this as a bookmarklet, so I could instantly inject it into a page that uses immutable-js without having to edit the site's code to pull this library in. Would that be possible? It looks like the formatter just needs to be added to the window.devtoolsFormatters array in the page's context. I guess the hard bit would be actually getting the reference to Immutable-js - It could probably assume there's either an Immutable global (eg. using immutable-js from CDN), or require('immutable') pulls it in (on some sites with CommonJS requires, eg. on Facebook).

Add 👍 if you wish this

Hi, I was reading through the code of this library, and read the renderIterableBody function. Here is the source for it:

  const renderIterableBody = (collection, mapper, options = {}) => {
    if (options.sorted) {
      collection = collection.sortBy((value, key) => key);
    }
    const children = collection
      .map(mapper)
      .toList();

    const jsList = []
    // Can't just call toJS because that will also call toJS on children inside the list
    children.forEach(child => jsList.push(child))

    return [ 'ol', listStyle, ...children ];
  }

It seems that the author carefully crafted the jsList list, but then forgot to use it, and mistakenly used children instead.

I think the question suggests everything but - would be great to have this as a chrome extension so that we can enable this as required.

On Chrome build 51.0.2689.0 (actually, for versions stretching back for the preceding week or so), attempts to click on a logged Immutable.js object now result in:

VM562:9 Custom Formatter Failed: ReferenceError: bindRemoteObject is not defined

I suspect that there's some kind of permanent change to the Custom Formatter API. A few Google searches have revealed precious little information, sadly.

Add 👍 if you wish this

Heya! Nice work on this!

I discovered it by way of https://www.npmjs.com/package/immutable-devtools but that has broken screenshots and no link back to this repo.

would be so sweet if it can get both! :)

Hi,
So i'm trying to use this GREAT tool but I don't want to change the source code, and I want it to work only in debug mode. I'm using gulp and webpack to build.
Any ideas, recommendations, examples?
Thanks!

It isn't on by default, at least for me, and then it doesn't work.

It will helps a lot if installDevTools can be called directly in this package and only required injectiong code will be require('immutable-devtools')

Note that I also tried updating chrome. I will say that both import statements are valid as they both log out correct looking data for immutable and installDevTools from these two lines.

import immutable from 'immutable';
import installDevTools from 'immutable-devtools';

Yet when I log them out to install it, it's undefined such that:

console.log('installDevTools', installDevTools(immutable));
const stuff = installDevTools(immutable);
console.log('thingers', stuff);

always logs undefined.

And the code below always just spits out unformatted immutablejs objects.

const thing = {
  'thing':"oop",
  'mop':"glop",
  'weeks': [
    {goop:"date"},
    {goop:"date"},
    {goop:"date"},
    {goop:"date"}
  ],
  'used': 'meep'
};

const schA = Map (thing);

console.log(schA);

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

Screenshot: https://imgur.com/yx81O8Z

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

This appears to be happening because of this line: https://github.com/andrewdavey/immutable-devtools/blob/master/src/createFormatters.js#L37

It can probably just be removed because actual nulls are formatted correctly by the fallthrough case that formats all objects.

Example code:

    let MyRecord = Immutable.Record({foo: 4}, "MyRecord");
    let bar = new MyRecord({foo: 3});
    debugger;

Printed to the Console:

It would be nice if instead of just printing "Record" the formatter would print the actual name of the record, in this case "MyRecord". Or it may print "Record: MyRecord" to see that is is a Record with this name.

If I define an Immutable Record, it seems the inspector cannot format it:

    let MyRecord = Immutable.Record({foo: 4});
    let bar = new MyRecord({bar: 3});

It would be nice if we could inspect Record types and directly see the properties on them.

in the version 69.0.3497.100。 is not work.

let Immutable = require('immutable');

let installDevTools = require('immutable-devtools');

console.log(installDevTools(Immutable));

console.log(Immutable.List([1, 2]));

I tried it on two mac.

and console has not changed.

Is there any documentation on devtoolsFormatter somewhere (or at least pointers to where it's used in the Chrome dev tools code)? Searching Google only returns a few examples of people using it, and no actual documentation.