Preface
The Chrome DevTools includes a built-in tool for interacting with the JavaScript engine – which is the Console.
In order to master the Console – we should know its supported capabilities as much as possible.
Accordingly, we’re going to reveal several tips regarding the Console.
Opening the Console
To open the Console as a panel – press on CTRL
+SHIFT
+J
(Windows/Linux) or CMD
+ OPT
+ J
(Mac):
![Opening the Console as a panel](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools.example.gif)
To open the Console as a drawer – press on CTRL
+ `
(Backtick):
![Opening the Console as a drawer](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools2.example.gif)
Selecting Elements
We can execute querySelectorAll
for selecting all elements by a selector using $$(selector)
:
![Selecting all the rendered buttons on the page](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools3.example.gif)
Note: If we want to execute querySelector
, we should use $(selector)
.
Last Evaluated Expression
To access the last evaluated expression, we can use $_
:
![Retrieving the last evaluated expression](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools4.example.gif)
Note: We can apply the appropriate methods on that expression, for instance – if it’s a DOM element, we’re able to invoke innerHTML
and print the result into the Console.
Last Five Elements
In case that we traverse the DOM manually, we’ve the ability to access the last five watched elements. In order to do that, we can use the commands: $0
, $1
, $2
, $3
and $4
. $0
returns the current selected element whereas $1
–$4
return the last historical elements respectively:
![Retrieving the last five DOM elements](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools5.example.gif)
Copy to Clipboard
Sometimes we need to copy the string representation of an object to the clipboard:
![Copying an object to the clipboard as a string](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools6.example.gif)
Note: In previous versions of DevTools, we should have used copy(JSON.stringify(object))
in order to convert the JSON to a string. However, it isn’t needed anymore.
Registered Event Listeners
Printing the registered event listeners for an object is pretty easy because of getEventListeners(object)
:
![Retrieving all the registered event listeners of an object](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools7.example.gif)
Note: Assuming there is a button with click event in the page.
Monitoring a Function
We can track invocations for a function with the passed arguments using monitor(function)
:
![Tracking invocations of a function](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools8.example.gif)
Note: To stop the tracking – use unmonitor(function)
.
Monitoring an Events
We can track an events of an object using monitorEvents(object, [events])
. The first argument is the actual specified object whereas the second is the specified array of events (or a single event).
Let’s listen and simulate clicks on the Window
object:
![Tracking invocations of registered events for an object](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools9.example.gif)
A few points:
- To stop the tracking – use
unmonitorEvents(object, [events])
. - We could use
unmonitorEvents(object)
to eliminate the tracking for all events.
Measuring Time
Measuring time for a dedicated action could be performed simply when invoking console.time(text)
before the action and console.timeEnd(text)
thereafter:
![Measuring time for an action](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools10.example.gif)
Styling Console Output
Applying CSS on the output text is performed using the %c
string, which indicates the beginning of the styled text. The second parameter is a string of the specified CSS properties.
Here’s an example:
![Styling text with CSS properties](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools11.example.gif)
Hiding Network Messages
Network messages may appear in the Console in case of an error of a resource, blocking scripts and so on. From time to time, we don’t care about these messages and we wish to hide them:
![Hiding irrelevant network messages](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools12.example.gif)
Editing an Element
We can edit the content of an element directly through the Console:
![Editing the content of a DOM element](http://nitayn.sg-host.com/uploads/2023/12/console-in-chrome-devtools13.example.gif)
Note: The element could be edited as HTML as well.
References
Check out the following links for more information: