Great work @leonardoventurini! I’ve been using the Meteor dev tools now along with Vue’s dev tools and they provide some helpful insights together! The Meteor dev tools give me a little more clarity into what is happening on the Meteor client.
Have you used the Vue dev tools on a Meteor + Vue project yet? I think they were mostly done by @akryum on the Vue core team who made the Meteor + Vue packages
Thanks, I haven’t used Vue with Meteor yet but that is certainly in my todo list! I used Vue a few years ago, so I really would like to try all the new things and improved TypeScript support that came along.
I’ve been curious to know more about Meteor’s DDP implementation. It’s such a powerful tool that the world of devs at large have not grasped the benefits of just yet. It’s also great that you don’t really need to know much about it to use Meteor, but when looking at the new Meteor DevTools again, I had a couple curiosities.
I found a great blog post with a couple lines of code to allow logging of all DDP messages to the console. Somehow this made it easier for me to realize everything that is displayed in the new Meteor DevTools on the DDP tab
Hacking Meteor DDP (this is also just a fun read to know a bit more about Meteor’s DDP)
This is all the code you need to drop on your client to have some fun!
var oldSend = Meteor.connection._stream.send;
Meteor.connection._stream.send = function() {
oldSend.apply(this, arguments);
console.log(arguments[0]);
};
Meteor.connection._stream.on('message', function (msg) {
console.log(msg);
});
Exactly, intercepting the DDP messages is very easy and basically all it does in one of the injectors here. Of course, we have to resend the messages to the extension through Chrome’s messaging API since we can’t communicate directly through sandboxes by JavaScript alone.