JS Tip of the Day: Console $ Utilities

programming web dev
1

Console $ Utilities
Level: Intermediate

When working within the JavaScript console of your browser, a certain set of debugging APIs are made available to you that don’t exist anywhere else. Of those include a set of helper functions and variables using the $ character. They consist of:

  • $(): A shortcut for what is effectively equivalent to document.querySelector()
  • $$(): A shortcut for what is effectively equivalent to document.querySelectorAll()
  • $x(): A shortcut for running an XPath query on the DOM (similar to document.evaluate())
  • $0: A reference to the selected element within the elements panel (which would be selected it you right-clicked on an element and selected “inspect”)
  • $1 - $4: A history of selections (previous values of $0) where $1 is the selection prior to the current $0 and $2 is the selection prior to that, etc.
  • $_: A reference to the last result evaluated in the console
// In JavaScript Console
// HTML: <input value="3">
$('input'); // <ENTER>
// <- <input value="3">
$_.value // <ENTER>
// <- "3"

Browser support for these command line APIs may vary (these specifically reference Chromium implementations), so you may need to check to see what works in your browser.

More info:

2 Likes