How to use Chrome DevTools like a wizard (part 1)

If are a developer that needs to debug web apps and you spend a lot of time looking for elements, searching, debugging, console.logging this is for you.

1. Using $0

If you need to get an element you selected on the element list inside the console, that’s how you do it.

2. Using copy

A lot of times we need to copy to the clipboard a JSON object, strings, …

3. Using table

Sometimes we need to see either an array or an object in a better view

4. Using monitor

When you need to monitor when a function is called and which arguments it was called with

5. Using monitorEvents

One of the function I like the most is the monitorEvents you can see when an event was triggered.

Thank you.

If you have any feedback please reach out : D