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
- Console
-
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.
Top comments (0)