DevTools tips — day 13: objects & functions
part of the “Advent calendar for front-end developers” series
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!
As usual, if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 14th day is already published, read it here:
