Chrome DevTools

Hotkey

Remember all chrome related hotkeys are trigger with Option+CMD or ALT+CMD:

filter the network by using -domain:*.com. See full list of filters by typing -.
How to capture network for new popup link? Go to chrome://net-internals/#events
See XHRs in console: settings -> console -> check 'Log XMLHttpRequests'.

$(selector)
- returns the first element, is alias of docuemnt.querySelector()
$$(selector)
- returns NodeList, is alias of docuemnt.querySelectorAll()
- NodeList is not array, to convert to array: Array.prototype.slice.call(div_list) or [...div_list]
$0 is the selected element

Console: print and variable

table(data)

  var names = {
      0: { firstName: "John", lastName: "Smith" },
      1: { firstName: "Jane", lastName: "Doe" }
  };
  table(names);

store as global variable temp1: right click on an object in the console and press “store as global variable”

Find out events:

select element -> Event Listeners: find out existing handler for selected element.
- for example, with unknown web app, you can find out what's happening after clicking a button.
console: monitor(function) outputs when this function is called and what arguments; unmonitor
console: monitorEvents(window, "resize")
sources -> Event Listener Breakpoints: you can add breakpoints for all kinds of events.

Block

Node

Last updated 7 years ago