Quartz 4

Devtools

3 min read

Devtools

  • Each browser has devtools

Chrome Devtools

  • Elements
    • See the DOM
  • Console
    • Run javascript
  • Sources
    • source code HTML CSS JS and Typescript if using source map
  • Network
    • See all the requests made by browser
  • Application
    • localStorage, sessions, cookies
  • Advanced:
    • Performance/Performance Insights
      • Record performance of page load
    • Record
    • Memory
      • Memory Profiling
    • Security
    • Lighthouse

Console

  • create live expressions
  • filter logs panel on left

Turn on design mode

document.designMode = 'on'

Selecting element in devtools console

  • Select element in Elements tab
  • Go to Console tab
  • Use $0 as the element selected
  • Use $1, $2 etc. to see the previously selected, previous to the previously selected etc. respectively

See password

  • Save the <input> tag in $0 as mentioned above
  • use $0.value to see the password

Running selectors in console

  • $() returns first element that matches the selector
    • shortcut for: document.querySelector()
  • $$() returns the list of all the elements matching the selector
    • shortcut for: document.querySelectorAll()
$('img'); // find the first img tag in the document
$('img', $0); // find the first img tag inside the last selected element
 
$$('svg'); // list of all img tags
$$('svg', $('img')); // list of all svg tags inside first img tag
  • $x(): returns list of elements matching the XPath
$x('//p'); // first p tag
$x('//span[text()="Actions"]'); // first span with text "Actions"
$x('//p', document); // all p tags inside document

console API

  • console.log()
  • console.warn()
  • console.error()
  • console.clear()
    • shortcut: clear()
  • console.table(array) — log array of objects as table
    • shortcut: table()
  • console.dir() — force log objects as JSON
    • shortcut: dir()
  • console.trace() — print stack trace

Retrieve all elements by the constructor you specify

queryObjects(Constructor); // returns all objects created from Constructor function
queryObjects(Promise); // returns all the Promise constructor objects

copy object

copy(obj); // copy object to clipboard

debug function call

debug(fn); // add debugger when fn invoked
undebug(fn); // remove debugger when fn invoked

inspect

inspect(element); // highlight element in elements panel
inspect(fn); // opens function in sources panel

monitor

monitor(fn); // prints when fn is called
unmonitor(fn): // remove monitor on fn
 
monitorEvents(window, 'resize'); // prints when window is resized
unmonitorEvents(window); // remove monitor on window

Get Event Listeners for element

getEventListeners($0); // get event listeners of last selected element

Elements

  • Create breakpoint in DOM
  • Override CSS
  • Copy styles of any HTML node
  • Emulate focus or other state on element
  • Emulate focussed page which does not lose focus
    • Styles > Click :hov > Emulate a focused page
  • See Event Listeners
  • See Accessibility Tree
    • Accessibility > Enable full-page accessibility tree
  • Running Selectors including CSS/XPath
    • Do Cmd+F

Sources

  • Override view — see overridden data
  • Authored view — see only code written by the developer
  • Add breakpoints, logpoints etc.
  • Add source maps manually

Network

  • Enable screenshots
  • Enable Protocol, Domain, Remote Address in the column
  • Enable ConnectionID in the column
    • Check multiple TCP connections and how they are reused
  • Enable Waterfall in the column
    • TTFB: Time to first byte, Time took to get the first byte from the server
    • DNS: lookup time

Devtools Settings

  • Click on top right gear icon
  • Enable: Show user agent shadow DOM

Graph View