Meteor DevTools Evolved v1.2

Hello, quick announcement…

Chrome just reviewed and published version 1.2 of our developer tools.

It should already be available for new installs or gradual updates.

Highlights: Infinite Scrolling, Subscriptions Tab, Better Design (hopefully).

Thanks.

16 Likes

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 :package:

Such a great dev experience! :raised_hands: Thanks again! :comet:

1 Like

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.

1 Like

Really great work @leonardoventurini I’m a big fan of the new DevTools as well :smiley:

1 Like

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 :bulb:

Hacking Meteor DDP (this is also just a fun read to know a bit more about Meteor’s DDP)
https://hackernoon.com/hacking-meteor-ddp-9da37790b37b

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);
});
2 Likes

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.

1 Like

Awesome work!
One note: it’s hard to click the buttons at the bottom because of the scrollbar:

1 Like

Yeah, sorry about that. I am working on making the interface more responsive, soon there will be no need for scrollbars anyways.

Wow, didn’t know this even existed. Like it!

For those who were missing the direct link:

3 Likes

I’m missing a trash can button to clear the messages. Or did I just not find it?

1 Like

There is I think, it is not a trash can button, but it clears logs! haha

It is located on the bottom right corner (the yellow one).

image

I will add making it more trash-can-like to the road map. :smile:

1 Like

Ah, I would have never thought this was a clear button. In fact, instead of having a trash can I’d recommend to use Chrome’s clear button.

image

2 Likes