FacebookLinkedInShare

As a web developer, Chrome Dev Tools help you debug your application. Knowing how to use Chrome Dev Tools will help you track down issues. There is some useful advanced options in the Dev Tools that are less known, learning them can improve your workflow in order to track your issues.

This post will presents 14 tips for Chrome Dev Tools regarding to the Console & Elements Tabs.
Note, Most of the tips are for anyone who use Chrome Dev Tools, but some of them are specific to angular developers.

1. console.table

console.log(obj) let you print an object, But when you have an array of objects its hard to read the output. In this case console.table(obj) will print a table which is much easier to read. Read more

2. $0

Lets say you need to select an element in the console, You can use the good old document.getElementById function, but you can also use a much quicker way with $0. In order to use it select an element (In the elements tab) then run $0 from the console. In addition, Dev Tools ‘Remember’ the last 5 elements you choose, In order to access them, use $0 to get the first element and $4 for the 5th element. Read more

3. angular.element($0).scope() – Angular Tip

So you can easily access DOM element using $0, With this power you can also access angular scope. Just choose an element, then run angular.element($0).scope()

4. angular.element($0).scope().REPEATED_ELEMENT_KEY – Angular Tip

When you have a list or table generated by ng-repeat directive, you can debug a specific item in the list and get the model for this item. Just select the item you wish to debug in the element tab, then run angular.element($0).scope().REPEATED_ELEMENT_KEY (Replace the REPEATED_ELEMENT_KEY with the repeated key)

5. angular.element($0).injector() – Angular Tip

You learned how to access angular scope. Access angular service is also possible with the injector function. For example access $http service will be by execute the following code angular.element($0).injector().get('$http')

6. console.group()

When you print large amount of logs, it’s hard to understand the context of each log. You can group multiple logs together by surrounding them with console.group and console.groupEnd.

7. console.time()

When you need to measure time, like how much time a function run, or how much time it took to ajax request to response, you can use console.time function. In order to do that, surround the code you want to measure with console.time and console.timeEnd functions.

8. Console logs Timestamps

Another option to measure time, is to enable timestamps for console.log. Doing that will show the timestamp for each log and help you understand the time difference between each log. In order to enable it go to settings > general > console > Show timestamps.

9. monitorEvents()

If you need to debug any kind of event, dev tools supplies a function called monitorEvents which get an element and event type. Then, every time the event fired you will see the event under the console tab. For example, monitorEvents(document, 'click') will monitor click event on the document.

10. Advanced filters

Using the filter under the network tab is very useful when you search by the request path, There is advanced filters that help you filter by different queries for example ״status-code”, “larger-than”, “is” and more. If you need multiple filters just add space between them. Read more
12

11. Exclude requests

If you have too many requests in the network tab and you wish to clean it, you can exclude request from the list by adding a dash before the name.
11

12. Replay Request

When you want to replay a XHR request you can right click on the request and choose “Replay XHR”. That will trigger the request again without the need to interact with the UI of the application.
13

13. Replay Request with cURL

If you want to save the request and run it later, or maybe modify it a bit and rerun it you can copy the cURL of the request, then paste it in your terminal and run it.
14

14. Throttling

You can emulate the speed connection and check how your site act in a low connection environments by clicking on the throttling option.
15