Features that you might not expect in the Chrome developer console

(Click the public number above for a quick follow-up)

Compilation: Bole Online/Sun Tenghao

If you have a good article to submit, please click here to learn more

Chrome has built-in developer tools. It has rich features, such as elements (Elements), network, and security. Today, we focus primarily on the JavaScript console.

When I first wrote the code, I only used the JavaScript console to print the server return value or the variable value. But with the passage of time and the help of tutorials, I found that this console can do far more than I imagined.

Now let's talk about what you can do through the console. If you read this article in a Chrome browser (or other browser) on your computer, you can open the Developer tool and try it right away.

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 the class or ID associated with the element.

But when you can't use JQuery in the DOM, you can still do the same thing in the developer console.

$ (' TagName '), $ ('. class '), $ (' #id '), and $ ('. Class #id ') are equivalent to Document.queryselector ("). It returns the first element that the selector matches to in the DOM.

You can use $$ (' tagName ') or $$ ('. class ') to build a special selector to select all the matching elements in the DOM (note that the two $ symbol). This will put the result into an array. You can continue to get a specific element in the array by subscript.

For example, $$ ('. ClassName ') will return you all elements of class className, $$ ('. ClassName ') [0] and $$ ('. ClassName ') [1] giving you the first and second elements, respectively.

2. Turn your browser into an editor

There have been many illusions whether the text can be edited in the browser. The answer is yes, you can turn your browser into an editor. You can add or remove text from the DOM arbitrarily.

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

Document.body.contenteditable=true

This causes the content to become editable. You can edit anything in the DOM.

3. Finding events associated with elements in the DOM

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

Here are some things you can do to find listeners for a particular event:

Geteventlisteners ($ (' selector ')). Eventname[0].listener

This will show the listener associated with the specific event. Eventname[0] is an array that contains all the specific events. Like what:

Geteventlisteners ($ (' firstName ')). Click[0].listener

It will show the listener associated with the Click event with ID "firstname" element.

4. Monitoring Events

You can do this through the console if you want to monitor the execution of events that are bound to specific elements in the DOM. You can use a number of different commands to monitor some or all of the events:

Monitorevents ($ (' selector ')) can monitor all events associated with the element you select, and print them on the console when the event is triggered. For example, monitorevents (' #firstName ') prints all events bound by an element with ID "firstname".

Monitorevents ($ (' selector '), ' EventName ') will print a specific event bound to the element. You can pass the event name as a parameter to the function. It prints specific events that are bound to specific elements. For example, Monitorevents ($ (' #firstName '), ' click ') prints a click event bound to an element with ID "firstname".

Monitorevents ($ (' selector '), [' eventname1′, ' EventName3 ',...]) will print multiple events according to your requirements. The pass parameter contains an array of strings for all events, rather than a single event name. For example, Monitorevents ($ (' #firstName '), [' Click ', ' Focus ']) will print the Click event and focus event that the element with ID "firstname" is bound to.

Unmonitorevents ($ (' selector ')): This will stop monitoring and print events on the console.

5. Query code block execution Time

The JavaScript console has an important function called Console.time (' LabelName '), which takes a tag name as a parameter and then turns on the timer. Another important function is Console.timeend (' LabelName '), which also receives a tag name as a parameter and then ends the timer associated with a particular tag name. As an example:

Console.time (' MyTime '); Starts the timer with Label-mytime

Console.timeend (' MyTime '); Ends the timer with Label-mytime

output:mytime:123.00 ms

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

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

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

output-mytime:12345.00 ms

6. Arrange the values in a variable into a table

For example, we have an array of objects such as the following:

var 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 the variable name in the console, it gives us the return format as an array of objects. This is useful. You can expand the object to view the property values.

But this becomes difficult to understand when attributes are increased. So, to show the variable clearly, we can show it as a table.

Console.table (VariableName) presents the city table structure with variables and all its properties. As shown below:

7. Check the elements in the DOM

You can check the elements directly in the console:

Inspect (' selector ') examines the elements that match the selector and switches the Chrome developer tools to the Elements tab. For example, inspect (' #firstName ') examines an element with an ID of "firstname", and inspect ($ (' a ') [3]) examines the 4th anchor element in the DOM.

$, $, $, and so on can help you get the elements you've checked recently. For example, $ A gives you the last checked DOM element, which returns the DOM element that was last checked.

8. Enumerating the attributes of an element

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

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

9. Retrieving the value of the most recent result

You can think of the console as a calculator. Once you do this, you may need to use the last calculated result in the calculation. Here's how to take the results from memory to the last calculation.

$_

Just like this:

2+3+4

9//-The Answer of the SUM is 9

$_

9//Gives the last Result

$_ * $_