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:
1 2 3 | $ tương đương với: document.querySelector() $$ tương đương với: document.querySelectorAll() |
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:
1 2 | inspect($'button') |
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
1 2 | inspect($$'button') |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | let app = new Vue({ el: '#app', data: { message: 'super impressive counter', count: 0, isUgly: false, person: { first: 'alex', last: 'ritzcovan' } }, methods: { increment() { this.count++; }, decrement() { this.count--; }, applyUgly() { this.isUgly = !this.isUgly; } } }); |
If we want to track the applyUgly()
function when it’s called, like this:
1 2 | monitor(app.applyUgly) |
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:
1 2 3 4 5 6 | const myObj = { first: 'alex', last: 'ritzcovan', state: 'ny' } |
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)
Table
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