3 Cool Developer Console Tricks you must know! (with code)

The developer console is a powerful tool that allows you to inspect, debug, and interact with your web pages. You can access the console by right-clicking on the page and selecting “Inspect Element” or by using a keyboard shortcut (usually Ctrl+Shift+I or Cmd+Option+I). The console tab in the developer tools window lets you run JavaScript commands, view errors and warnings, and log information.

But did you know that the console can do much more than that? In this article, we will show you some of the hidden features and tricks that can make your life easier

1. How to access the currently selected element in the elements tab as a variable.

While working in the browser, you might right-click on an element and select “Inspect Element” to view it in the elements tab. Then, you might want to assign it to a variable to work with it in JavaScript. You can do this by using the $0 variable in the console. This variable returns the currently selected element in the elements tab.

let image = $0

This will assign the image to the image variable. You can then manipulate it as you wish.

If you select another element, the previous one gets assigned to the $1 variable, while the new one replaces it for the $0 variable. Each time you select another element, the numbers increase by one, allowing you to access a backlog of previously selected elements. For example, if you inspect a heading element after inspecting a paragraph element, you can type:

let prev= $1
let curr= $0

This will assign the paragraph element to the prev variable and the heading element to the curr variable.

2. To measure the time of a fetch request from console

To do this is to use the console.time() and console.timeEnd() methods. These methods allow you to start and stop a timer and display the elapsed time in the console.

Make a fetch call using an async function and then use the 2 specified methods to measure the duration of the fetch call.

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/2');
  const data = await response.json();
  console.log(data);
}

//start timer 
console.time()

// call the async function
getData()

//end timer
console.timeEnd()

Result:

You can also use the Network tab, To do this, you need to open the developer tools (F12 or Ctrl+Shift+I), click on the Network tab, and then make the fetch request in the console. You will see a list of requests in the Network tab, and you can click on any request to see more information about it.

3. JSON to Table

The best method to visualize JSON array is to convert that into tabular form.

This method takes an array or an object as an argument and displays it as a table in the console. This can be useful for visualizing and comparing data.

The console.table() method is a JavaScript function that allows you to display data in a tabular format in the browser’s developer console.

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  // Show data in a Table
  console.table(data);
}


// call the async function
getData()

Results:

These are some of the developer console tricks that all developers should know. They can help you improve your productivity, efficiency, and creativity as a web developer. I hope you found them useful and interesting. If you have any feedback, please let me know in the comments below. Thank you for reading ! 😊