Links

• Keyboard shortcuts
  • Sources Panel
  • Become more effective when paused at a breakpoint
• DevTools could do that?
  • Good resource.
• (video) Enabling source maps
• Pause on Exceptions
• Pause on Uncaught Exceptions
• HAR 1.2 Spec
• Tips And Tricks
  • Debug on DOM modifications
    • Right-click an element and enable ‘Break on Subtree Modifications’: whenever a script traverses that element childs and modifies them, the debugger rolls in automatically to let you inspect what’s happening:
  • Prettify minified JS
    • Go to the Sources panel and selected your desired script from the scripts list.  Next, press the "Pretty print" button {} (curly braces) from the bottom of the DevTools window.
  • Conditional breakpoint actions with console.log
• Console
  • String substitution and formatting
  • Styling console output with CSS
    • e.g. console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

Notes

• When you "Inspect Element", you can access that element as $0 in the Console.
  • The Console remembers the last five elements (or heap objects) you've selected and makes them available as properties named $0, $1, $2, $3 and $4. The most recently selected element or object is available as $0, the second most as $1, and so forth
• You can right click on an element log in the Console and choose "Reveal in Elements Panel" (or use inspect(element))
• inspect(element or obj)
  • Takes a DOM element or JS reference and displays the element or object in the appropriate panel (the Elements panel or the Profile panel)
• $$(selector)
  • like document.querySelector()
• $(selector)
  • like document.querySelectorAll().  Returns an array.
• $x(path)
  • Returns an array of DOM elements that match the given XPath expression.  e.g. $x("//p[a]")
• dir(object)
  • Displays an object-style listing of all the properties of the specified object.
  • See also dirxml(object)
• Press Cmd-? to change devtools preferences.
• keys(object)
  • Returns an array containing the names of the properties belonging to the specified object.
• values(object)
  • Returns an array containing the values of all properties belonging to the specified object.
• monitorEvents(object[, events])
  • e.g. monitorEvents(window, ["resize", "scroll"])
• Settings > General > Show rulers and then see the ruler when you hover over an element in the Elements panel.

Keyboard Shortcuts

Ref: Keyboard Shortcuts, Sources Panel, Become more effective when paused at a breakpoint

console.table function

console.table([{a: 1, b:2}, {b:3, c:4}, [123]])

output