andrewdavey / immutable-devtools Goto Github PK
View Code? Open in Web Editor NEWChrome Dev Tools custom formatter for Immutable-js values
License: BSD 3-Clause "New" or "Revised" License
Chrome Dev Tools custom formatter for Immutable-js values
License: BSD 3-Clause "New" or "Revised" License
Hi,
I am using React-Native 0.18 and get the error:
installDevTools is not a function.
What am I doing wrong?
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.
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, 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.
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.
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.
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.
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.
Add 👍 if you wish this
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?
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!
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!
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.
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.
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);
Remove the part about canary build
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.
How Seq
should be displayed?
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)
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.
Add 👍 if you wish this
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).
It will helps a lot if installDevTools
can be called directly in this package and only required injectiong code will be require('immutable-devtools')
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.