Developer tools in the browser

Developer tools for Chromium browsers by Christian Heilmann.

My notes:

• Edge has a focus mode for the developer tools
• Use the command menu CMD-Shift-P to reach every dev tool function with the keyboard
• Console tricks
  • $('body') will select and log the body element
  • $$('li') will select and log all li elements
  • $_ will give you the last console output
  • console.log({x}) (with curly braces) will log {x: 1234} (assuming the value of the variable x is 1234). This way you see not only a value in the log, but also the name of the variable that holds the value.
  • filter by the type of logging (info, debug, warn, ...)
  • console.table($$('li'), ['innerHTML']) will log the innerHTML of all li elements in a table. console.table($$('a'), ['href']) will log the href's of all links in a table.
  • console.count('coffee') will count how often 'coffee' has been logged. console.countReset('coffee') will reset the coffee counter.
  • console.group('collapsible coffee') will start grouping all output to the console into a collapsible group until you call console.groupEnd('collapsible coffee')
  • copy($$('a')) will copy the all links on the page to the clipboard. If you did $$('a') before, a subsequent copy($_) will do the same.
  • monitorEvents(document.body, 'keypress') will monitor every keypress on the body and log the event. unmonitorEvents(document.body, 'keypress') will unmonitor the keypress events on the body.
  • Live Expressions (the eye of Sauron) allow to pin an expression to the top of the console. E.g. document.activeElement as a live expression will show the active element without flooding the console window.
• Toggle the device toolbar (device mode) to get a responsive view emulating a touch interface. In the header bar of the responsive view, activate certain screen sizes by clicking on it. With the ... menu in the header you can show rulers and media queries, and capture screenshots. It's also possible to throttle network speed down to an offline situation. You can even use the responsive view to look at a website on desktop and not see as many ads.
• Use the inspector button to get details about any page element when hovering it – including the accessibility status.
• With the elements tool, force the state of any element, set breakpoints for when an element changes and event taking a node screenshot by right-clicking on the element and choosing in the context menu what you want to do.
• In the sources tool you can set logpoints without having access to the real source code. Overrides allow to ignore server source and instead load something from the local overrides folder.
• The flex icon in the elements styles allows to see and change flex settings.