Address bar

• @bookmarks
• @history
• @tabs

Extensions

vimium

Visual Mode

v V

c - Caret Mode

o - Swap Anchor

Element

live expression

1
document.activeElement

Sources

Settings -> Preferences -> Sources -> Search in anonymous and content scripts

Automatically pause on any exception

https://developers.google.com/web/updates/2015/05/automatically-pause-on-any-exception

Network

regexp filter

1
/(detail|track)/

Performance

• Loading: Making network requests and parsing HTML
• Scripting: Parsing, compiling, and running JavaScript code, also includes Garbage Collection
• Rendering: Style and layout calculations
• Painting: Painting, compositing, resizing and decoding images

Web Vitals

• LS - Layout Shift

Timings

• DCL - DOMContentLoaded Event
• FP - First Paint
• FCP - First Contentful Paint: how long it takes for content to start appearing on a website
• LCP - Largest Contentful Paint: how quickly does the page render
• L - Onload Event

Setting

Coverage

CSS Overview

Console API

console.log with style

1
console.log("%cYour Log", "css code");

https://developers.google.com/web/tools/chrome-devtools/console/api

Utils

$_ returns the value of the most recently evaluated expression.

$0 - $4

$0 returns the most recently selected element or JavaScript object.

$(selector) - This function is an alias for the document.querySelector() function.
$$(selector) - This command is equivalent to calling document.querySelectorAll().

1
2
// Check JQuery Version
$.fn.jquery

$x(path) returns an array of DOM elements that match the given XPath expression.

1
$x("//p")

clear console:

1
clear()

copies a string representation of the specified object to the clipboard:

1
copy(object)

break the function on the Sources panel:

1
2
debug(function)
// Use undebug(fn) to stop breaking on the function

get the event listeners registered on the specified object:

1
getEventListeners(object)

When the function specified is called, a message is logged to the console that indicates the function name along with the arguments that are passed to the function when it was called:

1
2
3
monitor(function)
monitorEvents(object[, events])
// unmonitor(fn)

https://developers.google.com/web/tools/chrome-devtools/console/utilities

ShortCuts

Ctrl + T - new Tab
Ctrl + L - Edit Url

Visit DevTools

Global Shortcuts

Panel Shortcuts

Elements

Sources

Ctrl + P

? - See available commands
: - Go to line
@ - Go to symbol
> - Run Command

https://developers.google.com/web/tools/chrome-devtools/shortcuts