Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 14, 2021 07:05 pm GMT

Chrome DevTools Highlights and shortcuts

Ive 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 dont find them interesting, or I dont 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

- added in this article recently
- new Chrome DevTools feature

General

Chrome shortcuts

Mac
Reload:cmd + r
Hard reloadcmd + 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 elements 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:

Chrome DevTools - command menu

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

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 variables like a pro

TL;DR;
instead of console.log(var1, var2),
use the variable as key-value pair in an object - console.log({var1, var2})

Slightly longer version;
I (and believe many others) often console.log(var) to inspect var's value. Sometimes, I inspect 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

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

Alt Text

Clear console

clear()

Monitor a function

monitor(fun) tracks when the given function is executed and it also logs with which arguments it was called

Stop monitoring a function

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

Monitor event(s)

monitorEvent(object,[event]) Logs to console when a given event(s) is passed to it.
Alt Text

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 each time an expression is evaluated.
Alt Text

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.

Alt Text

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

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

Chrome DevTools - coverage

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

Chrome DevTools - coverage

For more information check out Chrome DevTools' docs

Network

API response as global variables

You migh want to play around with API calls responses 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

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

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


Original Link: https://dev.to/metju90/chrome-devtools-highlights-and-shortcuts-5bh7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To