Chrome has built-in developer tools. It has rich features such as Elements, Network, and Security. Today, we’ll focus on the JavaScript console.


When I first wrote the code, I would only use the JavaScript console to print server return values or variable values. But over time and with the help of tutorials, I found that the console could do far more than I had ever imagined.


Now let’s talk about what you can do with the console. If you’re reading this on your computer’s Chrome browser (or any other browser), you can open the developer tools right away and give it a try.




1. Select DOM elements

If you are familiar with jQuery, you should know the importance of the $(‘.class ‘) and $(‘ #id ‘) selectors. They select elements by their associated class or ID.


But if you can’t use jQuery in the DOM, you can still do the same thing in the developer console.


$(” tagName “) and $(‘. ‘class’) and $(‘ # id) and $(‘. The class # id ‘) is equivalent to the document. The querySelector (‘ ‘). It returns the first element in the DOM that the selector matches.


Can you use? (” tagName “) or? (‘.class ‘) builds special selectors to select all matching elements in the DOM (note the two $signs). This puts the result into an array. You can go ahead and get a particular element in the array by subscript.


For example,? (‘.className ‘) will return you all elements whose class is className,? (‘. The className ‘) [0] and? (‘.className ‘)[1] returns you the first and second elements, respectively.



2. Turn your browser into an editor

Have you ever wondered if you can edit text in your browser? The answer is yes, you can turn your browser into an editor. You can add or remove any text you want from the DOM.


You no longer need to check elements and edit HTML. Instead, open the developer console and type the following:

document.body.contentEditable=true

This will make the content editable. You can edit anything in the DOM.


3. Find events associated with elements in the DOM

When debugging, you’re definitely interested in event listeners for constraint elements in the DOM. The developer console makes it easier to find them.


You can do the following to find listeners for specific events:

GetEventListeners ($(' selector ')). EventName [0]. The listener


This shows the listeners associated with a particular event. EventName [0] is an array containing all specific events. Such as:

GetEventListeners ($(" firstName ")). Click [0]. The listener


It shows the listener associated with the click event of the element with the ID “firstName”.


4. Monitor events


If you want to monitor events bound to specific elements in the DOM as they execute, you can do so from the console. You can use many different commands to monitor some or all of the events:


  • MonitorEvents ($(‘ selector ‘)) monitors all events associated with your selected elements and prints them on the console when they fire. For example, monitorEvents($(‘ #firstName ‘)) prints all events bound to the element with ID “firstName”.

  • MonitorEvents ($(‘ selector ‘), ‘eventName’) prints the specific event bound to the element. You can pass the event name as an argument to the function. It prints specific events for specific element bindings. For example, monitorEvents($(‘ #firstName ‘), ‘click’) prints the click event bound to the element with ID “firstName”.

  • MonitorEvents ($(” selector “), [‘ eventName1 ‘, ‘eventName3’,… ) will print multiple events according to your request. Pass an array of strings containing all events, rather than a single event name. For example, monitorEvents($(‘ #firstName ‘),[‘ click ‘, ‘focus’]) prints click events and focus events bound to the element with ID “firstName”.

  • UnmonitorEvents ($(‘ selector ‘)) : This stops monitoring and prints events on the console.


5. Query the execution time of the code block


The JavaScript console has an important function called console.time(‘ labelName ‘), which takes a tag name as an argument and starts a timer. Another important function is console.timeEnd(‘ labelName ‘), which also takes a tag name as an argument and terminates the timer associated with that particular tag name. Here’s an example:


console.time('myTime'); //Starts the timer with label - myTime

console.timeEnd('myTime'); //Ends the timer with Label - myTime

 

/ / the Output: myTime: 123.00 ms


The two lines above show us the interval between the start and end of the timer.

We can improve it to calculate the execution time of code blocks.

For example, if I want to know the execution time of a loop. I can do this:


console.time('myTime'); //Starts the timer with label - myTime

 

for(var i=0; i < 100000; i++){

2 + 4 + 5;

}

 

console.timeEnd('mytime'); //Ends the timer with Label - myTime

 

/ / the Output - myTime: 12345.00 ms


6. Arrange the values in a table


For example, we have an array of objects like this:

ar myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]


When we enter a variable name on the console, it returns us an array of objects. That’s useful. You can expand the object to see the property values.


But as attributes increase, this becomes harder to understand. Therefore, to clearly represent a variable, we can display it as a table.


Console. table(variableName) displays a variable and all its attributes in a city table structure. As follows:




7. Check the elements in the DOM

You can check elements directly in the console:


  • Inspect ($(‘ selector ‘)) checks for elements that match the selector and toggles Chrome Developer Tools to the elements TAB. For example, inspect($(‘ #firstName ‘)) checks for an element with ID “firstName”, and inspect($(‘ a ‘)[3]) checks for the fourth anchor element in the DOM.

  • $0, $1, $2, and so on will help you get to the most recently checked element. For example, $0 returns the last DOM element you checked, and $1 returns the last DOM element you checked.


8. List the attributes of the element


You can do the following in the console to list all the attributes of an element.

Dir ($(‘ selector ‘)) returns an object and all the attributes associated with its DOM element. You can expand it to see the details.


9. Retrieve the value of the last result


You can use the console as a calculator. Once you have done so, you may need to use the results of the previous calculation in your calculations. Here’s how to get the result of the last calculation from memory.

The $_

Like this:


2 + 3 + 4

9 //- The Answer of the SUM is 9

 

The $_

9 // Gives the last Result

 

The $_ * $_

81  // As the last Result was 9

 

Math.sqrt($_)

9 // As the last Result was 81

 

The $_

9 // As the Last Result is 9


10. Clear the console and memory


If you want to clear the console and memory, just type:

clear()


Then hit Enter. That’s it.

Here are a few examples of using the Chrome JavaScript console. I hope these tips will make your life better.