Chrome DevTools | 10x Developer

_

Hotkey

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

ALT+CMD+arrow: go to left or right tab
ALT+CMD+0: go to first tab
ALT+CMD+9: go to last tab
ALT+CMD+C: inspect element
ALT+CMD+i: open dev tools

Elements

F2 to edit as HTML, press again to apply the changes.

Network

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

Console

$(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

Debug

Console: print and variable

dir(object)
keys(object)

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

Blackbox: on stack, you can also blackbox the whole script.

Node

debugger;

Chrome Extensions

feedly, evernote