Browser DevTools Reference

// Currently selected element in Elements panel
$0

// Query selector shortcuts
$('selector')           // document.querySelector()
$$('selector')          // document.querySelectorAll() as array

// XPath (when CSS selectors fail)
$x('//div[contains(@class,"component")]/a')

// Find element by text content
[...document.querySelectorAll('*')].find(el => el.textContent.includes('Search Text'))

// Get all links on page
[...document.querySelectorAll('a')].map(a => a.href)

// Make page editable
document.designMode = 'on'

// Remove annoying overlays/modals
document.querySelectorAll('[class*="modal"], [class*="overlay"]').forEach(el => el.remove())

// Kill fixed/sticky elements blocking scroll
[...document.querySelectorAll('*')]
  .filter(el => getComputedStyle(el).position === 'fixed')
  .forEach(el => el.remove())

// Inject CSS
document.head.insertAdjacentHTML('beforeend', '<style>.ads{display:none!important}</style>')

// All event listeners on element
getEventListeners($0)

// Find click handlers on document
getEventListeners(document).click

// Monitor events on element
monitorEvents($0, 'click')

// Stop monitoring
unmonitorEvents($0)

// Monitor function calls
monitor(functionName)

// Set breakpoint on function
debug(object.method)

// Remove breakpoint
undebug(object.method)

// Trace with stack
console.trace('checkpoint')

// Time execution
console.time('operation')
// ... code ...
console.timeEnd('operation')

// Assert (throws if false)
console.assert(x === 5, 'x should be 5', x)

// Group related logs
console.group('API Calls')
console.log('request 1')
console.log('request 2')
console.groupEnd()

// Table view for arrays/objects
console.table(arrayOfObjects)

// Full object (no truncation)
JSON.stringify(obj, null, 2)

// Copy to clipboard
copy($0.outerHTML)
copy(JSON.stringify(data, null, 2))

// Inspect function source
functionName.toString()

// Get computed styles
getComputedStyle($0).display
getComputedStyle($0).position

// Find all instances of a class (memory debugging)
queryObjects(Promise)

// Intercept all fetch requests
const origFetch = fetch
fetch = (...args) => {
  console.log('FETCH:', args)
  return origFetch(...args)
}

// Intercept XHR
const origOpen = XMLHttpRequest.prototype.open
XMLHttpRequest.prototype.open = function(...args) {
  console.log('XHR:', args)
  return origOpen.apply(this, args)
}

// Dump localStorage
Object.entries(localStorage)

// Dump sessionStorage
Object.entries(sessionStorage)

// Clear all storage and cookies
localStorage.clear()
sessionStorage.clear()
document.cookie.split(';').forEach(c => {
  document.cookie = c.trim().split('=')[0] + '=;expires=Thu, 01 Jan 1970'
})

// Watch all DOM mutations
const observer = new MutationObserver(mutations => {
  mutations.forEach(m => console.log(m.type, m.target))
})
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
})

// Stop observing
observer.disconnect()

status-code:404
status-code:500
larger-than:100k
method:POST
domain:api.example.com
-domain:analytics.com