5 chrome utilities of DevTools you may not know

Tram Ho

Here are 5 utilities that DevTools supports for debugging are very well used by the author for its convenience

$ and $$

Here are two other ways to retrieve the selector of an element:

The first way returns an element and the second returns a collection. Note that if you are using the Jquery library, the $ character will be overwritten, ie everything will follow jQuery.

Inspect () function

This function can be combined using the above way. You know our HTML document is very big and we want to select a button in that HTML document from the browser console log . Suppose we have the following HTML:

If we write the following:

After you press Enter, DevTools will switch from the Console tab to the Element tab and highlight the selected HTML element. In the above case, DevTools will get the first button.

You can use $$ if you want to remove all button selectors

It displays a list of buttons in the Console and when clicking on an element, it will jump to that element in the Element tab.

Monitor and Unmonitor

If we want to track when a method is called on our site, we can use the monitor() function. See the code below:

If we want to track the applyUgly() function when it’s called, like this:

Now, whenever applyUgly is called, DevTools will log out

And when we want to stop tracking the function, we just need to call unmonitor

Keys / values

This utility is useful for retrieving keys or values of an object. The example for an object is as follows:

Using keys() and values() , we can retrieve keys and values ​​by calling the object directly as follows:

This is actually an abbreviation for Object.keys(myObj) and Object.values(myObj)


This is the last thing I want to introduce but equally important is the table() function. Reuse the myObj object above, if we include it as a parameter of the table function, we get the following result on the console:

Reference source: https://medium.com/dailyjs/5-chrome-devtools-utilities-you-need-to-know-5bfe58c75773

Share the news now

Source : Viblo