bakery / meteor-devtools Goto Github PK
View Code? Open in Web Editor NEW⚡Chrome Dev tools extension for Meteorjs apps
Home Page: https://chrome.google.com/webstore/detail/meteor-devtools/ippapidnnboiophakmmhkdlchoccbgje
License: MIT License
⚡Chrome Dev tools extension for Meteorjs apps
Home Page: https://chrome.google.com/webstore/detail/meteor-devtools/ippapidnnboiophakmmhkdlchoccbgje
License: MIT License
When the Chrome Dev Tools window is open, some kind of glitch occurs where the first click on any button or link doesn't execute it's corresponding action, on the page you are developing (using the dev tools). From the second click on forward, everything continues to work fine with any button or link (including the one pressed for the first time in the page). If you refresh the page, the problem reappears, again, only on the first click on any button or link you pressed. It results in having to click a button or link twice for it to perform it's action, the first time the page runs (either by navigating to it or by refreshing the page).
This only happens while the Chrome Dev Tools window is open. Additionally, if you uninstall the Meteor DevTools, the problem disappears (even if the Chrome Dev Tools window is open), only to return when you reinstall the extension.
Maybe I'm just too dumb, but I can't get this working with my own app. If I install the extensions from the Chrome store, it seems to show some other app, with different templates and such. But there's no user interface to point it to my own app. How exactly can I set-up this extension for my own app?!
Thanks for a great tool!
A feature request if I may:
Make mongodb IDs in the DDP monitor links that take you to the document in the MiniMongo Explorer tab.
I like the Meteor Dev Tool. It helps me a lot in development. But the audit tool in MeteorDevTool mark my app insecure.
In my app, there is no allow/deny rules as recommended by meteor guide. And all user insert/update/remove are done through meteor method. check, audit-arguments-checks package are used, all argument check before execute. But when open MeteorDevTool =>security=>collections, click audit button of users collection, it still gives me a red update insecure message.
I read the article about how meteor dev tool determine a collection op is insecure, http://blog.thebakery.io/introducing-a-secury-auditor-to-meteor-devtools/, it says it will mark insecure if got an error other than 403... and says 'This means that some collections might be labeled as insecure even though the appropriate Allow/Deny rules have been setup and they present no immediate vulnerability.'
But this 'insecure' message makes developer and manager really scared . Therefore, I dig it further..
I looked into the DDP log and found the user update throws 400 Match Error instead of 403.
And the test is update with argument _{id:"invalid_id}
And in server console, such update op will throw an exception: Exception while invoking method '/users/update' Error: Match error: Expected object, got undefined
at exports.check (packages/check.js:57:15) ...
I tried some test method:
_Meteor.call('users/update', ({id:"invalid_id} )
==> throw 400 Match error (it will be marked as insecure by meteorDevTool)
_Meteor.call('users/update', ({id:"invalid_id},{})
==> throw 403 error ( it will be marked as secure by MeteorDevTool)
I tried tried similar update test direct to mongo in Robomongo:
_db.getCollection('users').update({'id':'invalid_id'} )
==> throw syntax exception
Error: need an object :
_DBCollection.prototype.parseUpdate@src/mongo/shell/collection.js:428:1
DBCollection.prototype.update@src/mongo/shell/collection.js:460:18
_db.getCollection('users').update({'id':'invalid_id'},{}})
==> pass: Updated 0 record(s) in 1ms ( no access check in Romomongo)
My impression:
The arguments for updating Meteor.users not allow only _id but no other field
If I am wrong, please enlighten me.
If I am right, could the MeteorDevTool could consider add some more dummy arguments to avoid wrongly insecure which scares us.
And also the collection meteor_autoupdate_clientVersions which is mark insecure for all insert/update/remove, even in a very simple app (a app created by 'meteor create app' and removed insecure, autopublish). What does that mean? what should we do?
Thanks!
Quan
We can improve how things are rendered in smaller resolutions
It would be nice to have a pretty landing page for the DDP Monitor with a few nice screenshots highlighting available features + extension installation button
I have a collection Products and it's defined like this (I am not writing here the schema and others for the sake of simplicity):
export const Products = new Mongo.Collection('products');
Products.allow({
insert: () => false,
update: () => false,
remove: () => false
});
Products.deny({
insert: () => true,
update: () => true,
remove: () => true
});
So we forbid any updates using client mongo upates (latency compensation). We do all of them through secured methods.
Nevertheless the outpout from audit in the tool is the following:
We believe this wrong.
All this is reproducible using The Meteor Chef's Base...
many thanks for the tool ! :-)
Bug:
If there are many collections, scroll appears, but it does not extend till the very end. The last collection is always unreachable.
Feature Request:
Keyboard support (arrow up down) to navigate between collections.
I'd like to see a checkbox or something to hide plain ping and pong messages
It would be great to filter the subscriptions to only show the one we are waiting on.
Should we have a way for devs to test methods directly in the monitor?
based on feedback here
It would be wonderful to see a filter feature implemented. Sometimes I'm only interested in seeing certain messages, and have to search through the flood to see if it happened. With a text filter, I could "watch" only certain method calls.
Thanks for such an awesome tool!
This is super practical especially for subscriptions when you might need to figure out how much data gets transported
Is there any feature to see the message time?
I'd be really neat if any given ID was given a link which when clicked would scroll to/expand/highlight the message the ID refers to.
Please, add explore reactive vars: Session, Dict, Vars.
Uncaught ReferenceError: Blaze is not defined
Please, fix the error message for Meteor + React app (without Blaze). Thx!
See if we can put a page action UI element to link back to the dev extension and notify devs about warnings and show stats
Chrome is reporting this as an error and the Meteor tab doesn't show up in dev tools anymore.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Current scrolling on the trace list is a bit annoying as it keeps pulling the scrollbar down to show the latest traces. This should be fixed to only do this when a the scroll bar is forced all the way to the bottom by the user
a common pattern is:
Template.new_cached.onCreated ->
this.foo = new ReactiveVar 0
this.bar = 3
would be nice to be able to see this template data in addition to the currently-shown data context.
Is there a way to debug a meteor app that is running inside an iframe of another website?
As much as I tried changing the '''Top''' window to its iframe Meteor counterpart, it only worked at browsers console shell.
When executing a React based app, meteor-devtools
spits a ReferenceError: Tracker is not defined
that applies on the VM
.
Step to reproduce:
git clone https://github.com/ssr-server/ssr
cd ssr
meteor npm install
cd demo
meteor npm install
meteor --setting ./setting.json
Open Chrome dev tools and select meteor-devtools
. Launch the app using the default address http://localhost:3000
.
Note that our demo makes no use of Tracker. It seems that meteor-devtools
relies on the app's Tracker instead of using it's own.
The check against the mdg:validated-methods
should be against mdg:validated-method
.
This is fixed in #57
It would be wonderful to see a pause (or start/stop) feature implemented. Sometimes I'm looking at a message and it gets pushed up out of view because other messages started pouring in.
Thanks for such an awesome tool!
Currently the send hook sits right on top of the websocket.send which means that some non ddp traces get in every once in while (e.g. intercom jazz). We should fix this by setting the hook higher up, somewhere around Meteor.connection.send or smth like that. Also need to double check if this has any effect on stack traces
Hi, I can not see all my custom collections in MiniMongo tab. I can see those,t hat are initialized at app start. But during work with app I load some files dynamically. Those files then initialize some collections and work with them, but they are not visible in the tab. Is it possible to fix it? Thanks.
subject says it all...
We should have a footer with a few stats on the messages sent/received + potentially a breakdown on types of messages:
-------------------------------------------------------------------------------------------------------------------------------------------
10 messages sent * 2 messages received * 3 subs * 5 method calls * 4 collection updates
-------------------------------------------------------------------------------------------------------------------------------------------
When an element is selected in elements tab (eg when I do, on the page, right-click -> inspect), expand the blaze tree and select the corresponding element.
The DDP tab is showing the initial subscriptions of the app twice for some reason. The Chrome devtools shows that websocket is only sending "sub" messages once, but Meteor DevTools show the twice. I tried Meteor devtools Evolved extension (but I like this one better 😉) and it's showing the subscriptions only once (correctly).
Any chance FF will get supported?
I've not digged into it myself, but based on this blog post by Mozilla Hacks and the fact that React DevTools supports both I assume it's possible.
We've started discussing a possibility of turning DDP monitor into a general collection of devtools for Meteor developers where the DDP traffic monitor is one of the components. Other potential candidates:
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.