Chrome DevTools Highlights and shortcuts

Matthew Barbara — Sat, 14 Aug 2021 19:05:12 +0000

I’ve decided to list down all the cool features/shortcuts I am either using or hope to use soon in Chrome and DevTools.

These are features/shortcuts that I consider either essential or simply just very handy for my work as a web developer. There are tons of other features/shortcuts that I did not list, because: I don’t find them interesting, or I don’t know they exist, or I did not have the time yet to add them.

If you find any room for improvement in this writing, please do leave a message. Thanks 🙇‍♂️

Table of content

General
- Chrome shortcuts
- DevTools shortcuts
- Command menu
- Full-size screenshot
- Clear storage (cookies, sessions, etc.) ♠
Console
- Copy to clipboard
- Console.log - named variables ♠
- Clear console
- Monitor a function
- Stop monitoring a function
- Monitor event(s)
- Stop monitor event(s)
- Query selector
- Query selector all
- Last evaluated expression
- Get node's event listeners
Performance
- Find unused JavaScript and CSS with the Coverage Tab
- More to come...
Network
- API response as global variables
- More to come...

♠ - added in this article recently
♠♠ - new Chrome DevTools feature

General

Chrome shortcuts

	Mac
Reload:	`cmd + r`
Hard reload	`cmd + shift + r`
Close current tab:	`cmd + w`
Open last closed tab:	`cmd + shift + r`
Open new tab:	`cmd + t`
Open current URL in a new tab:	Click in the address bar and `cmd + enter`
Navigate to next tab:	`alt + cmd + right arrow`
Navigate to previous tab:	`alt + cmd + left arrow`
Navigate to a tab by order `n`:	`cmd + n`
Go back (browsing history):	`cmd + [`
Go forward (browsing history):	`cmd + ]`
Open a new window in incognito:	`cmd + shift + n`

DevTools shortcut

	Mac
Open Devtools and focuses on console:	`alt + cmd + j`
Open Devtools with inspect element mode:	`alt + cmd + c`
DevlTools’ settings:	When in element’s panel, press `?`
Go to the next panel:	`cmd + [`
Go to previous panel:	`cmd + ]`
Toggle console:	`esc`

Command menu

DevTools has a feature similar to the Command Palette (cmd + shift + p) in Visual Studio Code.

Quoting Kayce Basques from Google:

The Command Menu provides a fast way to navigate the Chrome DevTools UI and accomplish common tasks, such as disabling JavaScript.

In the DevTools, press cmd + shift + p to open the Command link and type any command you want to execute:

Full-size Screenshot

while taking a screenshot of the size of your screen might be easy, it certainly is much tricker to take a full-page screenshot when there is scrolling in a web page.

In DevTools, when you execute "capture full size screenshot" from the Command menu, a full-size screenshot is capture and downloaded as .png

Clear storage (cookies, sessions, etc.)

In the Command menu, search for "clear site data".

When clicked, data will be cleared from localStorage, Cookies, Cache, Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Application Cache for the current page you are on.

Console

Copy to clipboard

I find this feature specially useful when I need to copy an API response to my clipboard - copy(data)

Console.log - named variables

I (and believe many others) often do console.log(var) to log var's value. Sometimes, I log multiple values, like console.log(var1, var2, var3).

The problem with this is, especially when you are logging variables with a similar data structure, you need to remember which variable is logged in which order.

Here is an example of this "issue":

This can be resolved by using the variable as key-value in an object like so:

Clear console

clear()

Monitor a function

monitor(fun) - monitors the given function. It also logs with which arguments the function was called.

Stop monitoring a function

unmonitor(func), as it name suggests, stops monitoring a given function.

Monitor event(s)

monitorEvent(object,[event]) Logs to console when a given event(s) passed to it, it's triggered.

Stop monitor event(s)

unmonitorEvents(window, [events]). Will stop monitoring all events if the second argument is not passed.

Query selector

$('#form') is an alias for document.querySelector('#form')

Query selector all

$$('p') is a alias for document.querySelectorAll('p')

Last evaluated expression

$_ gets the value of the last evaluated expression. The special variable $_ changes on each time an expression is evaluated.

Get node's event listeners

Sometimes you might need to check what event listeners a particular DOM node has. This is when getEventListeners(node) comes to the rescue.

Performance

Find unused JavaScript and CSS with the Coverage Tab

If you are seeking to optimise your application I am sure you will appreciate this feature. The Coverage helps you find unused JS/CSS.

Open the Command menu, type "coverage" and click "show coverage".

Then click the reload button and when the page loads, you get a nice report as shown in the follow figure.

You can also click an individual asset file to see which part of the source code is unused, as seen in the following figure.

For more information check out Chrome DevTools' docs

Network

API response as global variables

You might want to play around with an API call response's data. In DevTools, you can store response data into a global variable.

Click on the API call in the network tab and navigate to the "Preview" tab. Then right-click and click "Store object as global variable".

Then variable temp1 containing the data from the response is created and ready to use in the console tab.

DEV Community: Matthew Barbara