DevTools tips — day 13: objects & functions

part of the “Advent calendar for front-end developers” series

Tomek Sułkowski
Dec 13, 2018 · 2 min read

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve seen conditional breakpoints and “ninja logs”, today let’s keep track of things with…

35. queryObjects function

Say we have this kind of code, in which we’ve created several objects.

Which of these objects exist in a specific execution context, in a given moment in time?

Chrome DevTools has a nifty queryObjects function, that shows us exactly that.

Notice how the last object created in the listing is not available, because the reference to this one is not kept anywhere–after executing the code, I only have 3 Person objects:

36. monitor functions

monitor is a DevTools’ function that lets you “spy” on any function calls: whenever a “spied” function will run, console will log that fact, including the name of the function and arguments with which it was called.

Let’s take the Person class from our previous examples and extend it with 2 additional methods:

class Person {
constructor(name, role) {
this.name = name;
this.role = role;
}

greet() {
return this.getMessage('greeting');
}
getMessage(type) {
if (type === 'greeting') {
return `Hello, I'm ${this.name}!`;
}
}
}

As you can see the greet method runs getMessage with a specific argument. Let’s see how tracking getMessage would work:

That should save us some console.logs!

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man, https://twitter.com/sulco

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade