Skip to main content

Chrome DevTools

DevTools Tips:

What's New in DevTools:

Console tab

How to speed up your workflow with Console shortcuts -

$_ gives you the value of the last expression.

$0/$1/$2/$3/$4 hold the element selected at the Elements tab.

$('img') we can use jQuery-like syntax to grab elements, instead of using something like document.querySelector().

$$('svg') gives an array with all the SVG elements.

$$('svg', 'main') gives an array with all the SVG elements that belong to the main element.

queryObjects(Promise) queries objects by constructor.

table(someobject) shows the object in a table. Is a shortcut for console.table().

keys(someobject) prints the object keys.

values(someobject) prints the object values.

copy(values(someobject)) copes the object values. You can then paste it.

getEventListeners($0) shows all event listeners of an element.

monitorEvents(window, 'resize') will print the events to the console. Use unmonitorEvents(window) to stop listening.

monitor(someFunction) will log every function call, along with the arguments. Use unmonitor(someFunction) to stop listening.

clear() clears the console. Is a shortcut for console.clear().

Logpoints - Log messages without console.log() in your code

Have you ever been in a situation where you’re testing an application but you don’t have access to the source code but you still want to debug some part of the code by console logging the variables?

Network tab

Holding the shift key while hovering over a request will highlight the initiator in green and dependencies in red.

Override the content of Fetch/XHR responses: -