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.
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
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
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
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
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.
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