Skip to main content

Chrome Dev Tool

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

  • Ctrl-p to get the files
  • Ctrl-Shift-p to get the actions

Console​

  • $() Returns the first element that matches the specified CSS selector. It is a shortcut for document.querySelector().
  • $$() Returns an array of all the elements that match the specified CSS selector. This is an alias for document.querySelectorAll()
  • $x() Returns an array of elements that match the specified XPath. DOM only. https://www.w3schools.com/jsref/dom_obj_all.asp
  • $0 will always point to the last node you selected, while $1 will point to the node you selected before that. Think of it like a stack of most recently selected nodes.
  • $_ property to get the output of the last evaluated expression
  • $r gets the currently selected component react element

Get text​

  1. Right click on the element
  2. Copy JS path
  3. Add .textContent at the end

To get a list of texts, use https://text.deep.institute/

Events​

  • monitorEvents(window, ‘click’)
  • unmonitorEvents(window, ‘change’)
  • getEventListeners()