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.