Mastering the JavaScript Console: Hidden Tricks You Should Know
The JavaScript Console in your browser's DevTools is a powerful tool that goes beyond just logging messages. If you're a developer, you can speed up debugging and DOM manipulation with a few handy shortcuts. Here are some essential JavaScript console tips that will make your workflow smoother.
1. $() – Shorthand for document.querySelector()
If you're tired of writing document.querySelector(), good news: Chrome DevTools provides $() as a shortcut.
Example:
$('h1') // Selects the first <h1> element
This works exactly like document.querySelector('h1'), making it easier to grab elements quickly.
2. $$() – Shorthand for document.querySelectorAll()
Need to select multiple elements? Use $$() instead of document.querySelectorAll(). It returns an array-like NodeList.
Example:
$$('p') // Selects all <p> elements on the page
This is useful for quick debugging when you need to see all elements of a specific type.
3. $0 → $4 – Access Recently Selected Elements
While working with the Elements panel, DevTools keeps track of the last five elements you clicked on. You can access them using:
$0– The most recently selected element.$1– The second last selected element.$2to$4– Older selections.
Example:
console.log($0) // Logs the last selected element
This is incredibly useful when debugging styles or JavaScript interactions without manually reselecting elements.
4. $_ – Access the Last Evaluated Expression Result
Sometimes, you execute a command and realize you need the result again. Instead of retyping, use $_, which stores the last evaluated expression.
Example:
5 + 10
$_ // Returns 15
This is helpful for quickly reusing calculations or function outputs.
5. console.table() – Display Data in a Table Format
If you’re working with arrays or objects, use console.table() for a cleaner display.
Example:
console.table([{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]);
This prints data in a structured table instead of a collapsed object format.
6. copy() – Copy Data to Clipboard
Want to copy text or an object from the console to your clipboard? Use copy().
Example:
copy($0) // Copies the last selected element's HTML to clipboard
This is useful for extracting large text blocks or copying API responses.
7. debug() – Pause Execution in a Function
If you want to inspect a function while it's running, use debug(functionName) to trigger a breakpoint automatically.
Example:
debug(myFunction) // Execution will pause inside `myFunction` when called
This is like manually adding debugger; inside your function but without modifying the code.
8. $x() – Use XPath to Select Elements
If CSS selectors are not enough, you can use XPath via $x().
Example:
$x("//button[text()='Submit']") // Selects the button with text 'Submit'
This is powerful when dealing with complex DOM structures.
Finally
The JavaScript console is more than just console.log(). These shortcuts can significantly improve your debugging speed and efficiency. Try them out in DevTools and start working smarter, not harder!
Do you know any other console tricks? Share them in the comments!
Comments ()