Chrome DevTools Highlights and shortcuts
Tags: webdev, chrome, devtools, todayilearned
Published: 2021-08-14 19:05:12

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] (#general)
 * [Chrome shortcuts](#chrome-shortcuts)
 * [DevTools shortcuts](#devtools-shortcuts)
 * [Command menu] (#command-menu)
 * [Full-size screenshot] (#screenshots)
 * [Clear storage (cookies, sessions, etc.)](#clear-storage) ♠
* [Console](#console)
 * [Copy to clipboard](#copy-clipboard) 
 * [Console.log - named variables](#console-log-pro) ♠
 * [Clear console](#clear-console)
 * [Monitor a function](#monitor-function)
 * [Stop monitoring a function](#unmonitor-function)
 * [Monitor event(s)](#monitor-events)
 * [Stop monitor event(s)](#unmonitor-events)
 * [Query selector](#query-selector)
 * [Query selector all](#query-selector-all)
 * [Last evaluated expression](#$_)
 * [Get node's event listeners](#get-event-listeners)
* [Performance](#performance)
 * [Find unused JavaScript and CSS with the Coverage Tab](#unused-js-css)
 * More to come...
* [Network](#network)
 * [API response as global variables](#api-response-global-var)
 * More to come...

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


## General <a name="general"></a>

#### Chrome shortcuts <a name="chrome-shortcuts"></a>

||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:|<code>alt + cmd + right arrow</code>|
|Navigate to previous tab:|<code>alt + cmd + left arrow</code>|
|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 <a name="devtools-shortcuts"></a>
||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 <a name="command-menu"></a>
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:

![Chrome DevTools - command menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9b14s8ygbl4yaeompyz.png)

## Full-size Screenshot <a name="screenshots"></a>
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](#command-menu), a full-size screenshot is capture and downloaded as .png

#### Clear storage (cookies, sessions, etc.)<a name="clear-storage"></a>
In the [Command menu](#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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks31izb9ra52pd33yxhq.png)


## Console <a name="console"></a>

#### Copy to clipboard <a name="copy-clipboard"></a>
I find this feature specially useful when I need to copy an [API response](#api-response-global-var) to my clipboard - `copy(data)`


#### Console.log - named variables<a name="console-log-pro"></a>
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":

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44c4up2prxjysxy1ru1g.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9ggtvkdcgnc4hgkw0cq.png)


#### Clear console <a name="clear-console"></a>
`clear()`

#### Monitor a function <a name="monitor-function"></a>
`monitor(fun)` - monitors the given function. It also logs with which arguments the function was called.


#### Stop monitoring a function <a name="unmonitor-function"></a>
`unmonitor(func)`, as it name suggests, stops monitoring a given function.


#### Monitor event(s) <a name="monitor-events"></a>
`monitorEvent(object,[event])` Logs to console when a given event(s) passed to it, it's triggered.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhiedfi6rwi72x8rt18e.png)


#### Stop monitor event(s) <a name="unmonitor-events"></a>
`unmonitorEvents(window, [events])`. Will stop monitoring all events if the second argument is not passed. 


#### Query selector <a name="query-selector"></a>

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


#### Query selector all <a name="query-selector-all"></a>
`$$('p')` is a alias for `document.querySelectorAll('p')`


#### Last evaluated expression <a name="$_"></a>
`$_` gets the value of the last evaluated expression. The special variable `$_` changes on each time an expression is evaluated.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf1nmqvabjqx4b8nf74j.png)

#### Get node's event listeners <a name="get-event-listeners"></a>
Sometimes you might need to check what event listeners a particular DOM node has. This is when `getEventListeners(node)` comes to the rescue.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5s4myhs1tasl3gfnm42.png)


## Performance <a name="performance"></a>


#### Find unused JavaScript and CSS with the Coverage Tab <a name="unused-js-css"></a>
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](#command-menu), type "coverage" and click "show coverage".

![Chrome DevTools - coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi5nmtx2darmuozhg34q.png)
Then click the reload button and when the page loads, you get a nice report as shown in the follow figure.

![Chrome DevTools - coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf7tjbrqz18hdh0tx5vz.png)

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

![Chrome DevTools - coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5r0rihapkydsfrfjad1.png)


For more information check out [Chrome DevTools' docs](https://developer.chrome.com/docs/devtools/coverage/)

## Network <a name="network"></a>
#### API response as global variables <a name="api-response-global-var"></a>

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".

![Chrome DevTools - API response as global variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdkbyuxb9hxw19xe60l2.png)

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

![Chrome DevTools - variable in console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e73fbtik386ozyhd3f0v.png)