Some unknown Chrome dev tools tricks you should know

Google Chrome is my favorite browser, not only that it’s fast, but it has an awesome developer tool which is very useful while debugging.

Here’s a list of unknown tricks that’s really useful and can save lots of development time. Let’s open chrome devTools using F12 or CTRL+SHIFT+I.

1) HEX to RGB to HSL

To convert HEX color value to RGB or HSL, place the mouse cursor on the color of any element. Now Convert Color code using SHIFT + MouseClick

2) Coloring console output

Console logs outputs are generally blackNwhite. But you can modify style as per your need like

console.log(“%c Welcome To CoderExample!!!”,”background:#444;color:#0FF;font-size:18px”);

3) Console object as Table

For readability, you can print your object in a table format.

Suppose you have an object

var employee = [
{‘name’:’Arka’,’salary’:’60,000',’age’:43},
{‘name’:’Ramos’,’salary’:’45,000',’age’:33},
{‘name’:’Maria’,’salary’:’42,000',’age’:28}
];

Now instead of console.log(employee), try console.table(employee). Damn Cool, isnt it?

4) Get keys of an object

you have an object like

myObj = {
‘name’:’Arka’,
‘age’:23
}

Now in the console, if you type Object.keys(myObj) and hit enter, you’ll get the keys ‘name’ and ‘age’ respectively.

It’s very useful when you’ll check the keys of window object by Object.keys(window), as you know in javascript every global variable, global function belongs to window object so you can avoid redundant global variable which is cancer!

5) $0, get current selected element in console.

Sometimes we inspect various elements of DOM node through element tab. Now in the console, if you want to get current element’s dom node, just type $0 hit enter. Similarly, you can get last 5 latest histories of the elements by $0, $1, $2, $3 and $4.

6) Selecting DOM Elements in Console

$(“selector”) returns the first occurrence of the matching CSS selector which is an equivalent to document.querySelector(“selector”) something like jQuery().

where $$(“selector”) returns all elements, which is an alias for the document.querySelectorAll() function.

here is an example.

<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
</ul>

$(‘li’) will return

<li> one </li>

$$(‘li’) will return

[<li>​ one ​</li>​, <li>​ two ​</li>​, <li>​ three ​</li>​, <li>​ four ​</li>​]

7) Get registered event names of a specific element

getEventListeners(‘selector’) function in console provides all the events(click,mouseover etc) registered on the specified Dom element in spite of any framework or library like angular, jquery or Vue.

Suppose we have a button and a click event is registered using jQuery.

<button>Click me</button>
<script src=”https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
console.log(“Click event triggered”);
});
});
</script>

Now in console if you call getEventListeners(document.querySelector(“button”)) you’ll find click event within an object.

8) Monitor Events

You can monitor or track all events or a particular events using monitorEvents() in the console.

Suppose we have an input element, if you want to monitor all events , console it with monitorEvents(document.getElementById(“myId”)) you’ll get an events log in console.

or if you want to monitor some particular events like click or keyup console it with monitorEvents(document.getElementById(“myId”),[“keyup”,”click”]);

Get rid of monitoring events using unmonitorEvents(document.getElementById(“myId”))

9) Get script execution time

When you are running a script before start just writeconsole.time(“yourId”) and after the script writeconsole.timeEnd(‘yourId’). After script execution, it will return total execution time.

console.time(“simpleLoop”);
for(var i=0; i<10; i++){
console.log(i);
}
console.timeEnd(“simpleLoop”);

It will log,

0
1
2
3
4
5
6
7
8
9
simpleLoop: 9.000ms

10) Grouping console log

You can group all console statements of a particular code block using console.groupCollapsed(‘your name’). End grouping using console.groupEnd(‘your name’)

Example:

console.groupCollapsed(“My Result”);
for(var i=0; i<10; i++){
console.log(i);
}
console.groupEnd(“My Result”);

11) Inspect element from Console.

Finding a particular element is very tough when you have large set of HTML page if you know the selector you can easily inspect that element by hitting

inspect(document.getElementById(“yourId”))

12) Profiling your script

You can keep a track of JavaScript CPU profiling session usingprofile(‘Your Profile Name’).

profileEnd(‘Your Profile Name’) completes the profile session.

13) Get all properties of a Dom Object.

dir() provides all properties registered of a Dom object.

Example:

dir(document.getElementById(“myId”))

14) $_

$_ provides the value of the most current evaluated expression in the console.

15) Clearing console

Clear all log from console at once using clear() function. Alternatively you can use shortcut CTRL + L

So This is the list of some tips that you probably didn’t know but soon won’t live without. I hope those small tips and tricks will make your coding days easier and speed up your development workflow. Let me know if you have any unknown tips for me.