chrome console tips

chrome devtool tricks

  • Global

    • add #development=1 to url and reload to validate Google AMP
  • Elements - dom inspector
    • Ctrl + F search occurence in DOM
    • edit DOM directly
    • change state of Element with right click then select state ( :hover, :active, ... )
  • Console - command line api
    • $_ get last result
    • $(selector) for document.querySelector(selector)
    • $$(selector) for document.querySelectorAll(selector)
    • $x(path) get all element matching the xpath expression
    • table(data) display and format complexe data
    • monitorEvents(element, "click") monitor event on specified element
    • copy(object) copy a string representation of the specified objet to the clipboard
    • console.time('timer'); console.timeEnd('timer') calcul execution time
    • debug(function) open debugger when function is called
  • Source - file editor
    • Ctrl + shift + F search in source code
    • Ctrl + M jump between matching bracket
    • Ctrl + G go to line with
    • Ctrl + click multiple carets & selections
    • Ctrl + alt + click column selection
    • {} beautify your file by using pretty print button at bottom left of editor
    • Ctrl+D select next occurence of selected string
    • Ctrl + P switch file
    • edit local files by drag and drop your projet folder in developer tools
    • create js snippet to reuse/execute on snippet tab on left ( close to source/content scripts )
  • Network
    • read DomContentLoaded and Load times at bottom of tab
    • debug file requests easily
  • Audit
    • audit page performance without external tools
  • Application
    • access to LocalStorage and SessionStorage
    • manage Cookies
    • manage CacheStorage
    • manage ServiceWorker