10 Chrome Console Utility APIs You Probably Never Used
10 useful Chrome Console utility functions you might have missed.
The Console utility in the Chrome DevTools is one of the most used and most useful dev-tool in the Chrome browser. It provides a handful of functions that adds extra functionality to our webpage. It helps us in debugging, profiling and monitoring work on our webpage.
In this post all review a few of the very useful but unknown functions that the Chrome console provides.
1. monitor
This function is used to monitor a function, to know when the function is called.
function traceFunc (arg) { }
monitor(traceFunc)
The function traceFunc is passed as arg to monitor. Now whenever traceFunc is called, monitor will indicate to us that the function was called.
traceFunc(90)
function traceFunc was called with arguments: 90
2. unmonitor
This removes the indicated function from being monitored by the monitor function. To unmonitor traceFunc we will do this:
unmonitor(traceFunc)
When we call traceFcunc, we will see no indication from the monitor function:
traceFunc(90)
Tip: Use Bit (Github) to “harvest” your React/Angular/Vue components from any codebase and share them on bit.dev. Shared components can be imported to any project (and even modified and shared again). It’s a great way to optimize collaboration, speed up development, increase maintainability and scalability and maintain a consistent UI.
3. monitorEvents
The structure is this
monitorEvents(object,[,events])
This function monitors and logs an output when an event is called on an object.
<button id="button">Button</button>Now, if we type this in the Console:
monitorEvents(button, “click”)
This will monitor the “click” event on the button when the button is clicked the function will log a report on the Console, indicating that the button was clicked.
We can also monitor different events on an object.
monitorEvents(button, [“click”, “mouseover”])
This will monitor the events “click” and “mouseover” on the button. When we move our mouse over the button we will see a report on the Console, and also when we click on it.
We can also monitor generic events on an object:
monitorEvents(button, [“click”, “mouse”])
“mouse” is a generic event for the mouse events:
- mouseover
- mouseout
So, this will monitor the “click” event and the mouse events listed above on the button. So, when the click event occurs or any of the mouse events occurs on the button there will be a log on the Console.
Also, the key events will log on to any key event like keyup, keydown, etc.
4. unmonitorEvents
This function reverts what monitorEvents did. It unmonitors the events set by monitorEvents on an object.
monitorEvents(button, “click”)
This monitors the “click” event on the button. Clicking on the button will log a report on the Console.
Running unmonitorEvents(button, “click”) will unmonitor the click event on the button. Clicking on it now, will not log a report on the Console.
5. $_
This recalls the last executed expression in the Console.
If we type and execute this: 2 + 2 on the Console:
We will see 4, that’s the result of the expression evaluation.
Then, we type and execute 3 * 2:
It will give us 6.
We have executed two expressions with 3 * 2 being the most recent. Now, typing and executing $_ will display the result of 3 * 2 which is our most recent executed expression on the console. We will see 6 displayed.
6. copy
This function copies the data passed to it to the clipboard.
Type “copy(“nnamdi”)” on the console, this will copy “nnamdi” string to the clipboard. To verify this, go to your browser URL address bar, right-click and click on paste, you will see “nnamdi” pasted on your URL address bar.
7. clear
This clears the execution history of the Console.
Type this functions:
> 2 + 2
4
> 3 * 2
6
The Console will have an execution history of (2+2) 4 and (3*2) 6. Typing clear() on the Console will clear out the history
clear()
and we can’t refer to any of the expression histories.
8. keys(object)
Just like Object.keys, this function returns in an array, the keys of properties in an object:
9. values(object)
Just like, Object.values this function returns in an array the values of properties in an object:
10. getEventListeners(object)
This function returns the events registered on an object. For example, if we register click, mouseover, mouseout events on a button, this function will return an object that has the names of the events as properties in it. These properties are arrays that contain the listener function for the event.
We have a script:
<button id="button" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button</button><script>
function clickHandler() { }
function mousedownHandler() { }
function mouseoverHandler() { }
</script>
The button has three events click, onmousedown and onmouseover with listener functions clickHandler, mousedownHandler, mouseoverHandler.
Running getEventListeners(button) will return this:
See, the object has properties, click, mousedown, mouseover the event names of the event registered on the button. The properties are arrays, that contain objects. Expanding on the objects, we see that they are the listener functions to the events registered on the button.
11. $(elementName, [,node])
This function returns the first DOM node of the element specified
If we have this:
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>We have four buttons, Button1, Button2, Button3, Button4. To select the first button, we will run this:
$(“button”)
The Button1 is returned because of it the first Button element in the document. With the DOM node of the button returned we can access the properties and methods of the element.
Here, we used the DOM node reference of Button1 to access its id:
We can also specify the Node where we can select the first element:
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>Buttons 2, 3, 4 are nested in an div node above. We can select the fisrt button in the div node by doing this:
$("button", document.querySelector("div"))
See, it returns Button2 because it is the first button element in the div node.
12. $$(element, [,node]) Double dollar
This works the same as the single dollar $, but this returns all the elements specified.
Using our example:
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>Doing this, $$(“button”) will return in an array, the button nodes buttons 1, 2, 3, 4.
We can also get all the elemnts specified from a given node:
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>Buttons 2, 3, 4 are nested in an div node. To select all of them, we will do this:
$$(“button”, document.querySelector(“div”))
This will return buttons 2, 3, 4 because they are inside the div node.
There are many more...
- table
- debug
- undebug
- $x()
- dir
- dirxml
- profile() profileEnd()
- inspect
- $0 ~ $X
Conclusion
These functions are very useful in debugging or monitoring certain stuff on your webpage, they kinda give you a third eye.
As new versions of Chrome are released, so are new features and functions added to the Console tab. There are many more functions to my above list, I urge you to spend some time in your Console tab to find out some more hidden features and functions.
Thanks!!
