Six “Chrome Developer Tools” Useful Features
I wanted to share with you 6 nice features of Chrome Debugger that can help you improve your site’s performance significantly.
1. Page load progress
Ever wondered what is that video camera near the “record” and “clear” button in the Network tab? Me too!
You can record and then see the screen loading and rendering progress images on the network tab.
Just click on the video camera button and refresh the page:
2. Auto suggestions for page performance improvement - Audits tab
I have never looked what there is beyond the Timeline tab, it was too dark and scary…
So with some guts I found the “Audit”s tab, apparently it gives you suggestions on how to improve your page load!
Ok now your page loads fast! But it works sloooow in action after load.
4. Do not get into third-party code
Do you also hates when you debug, hit F11 and then goes into some dark code of a 3rd party that isn’t yours? No more!
Mark it as “Blackbox script” and you’ll debug it no more (or for every other script you would like)
Right click → Blackbox script
I think it’s the most famous one, but still worth mentioning.
Shows you statistics about page load time.
What made your page load slow? rendering? scripts? which file took the most time?
6. Resources Initiators and Dependencies
While in the network tab, hold shift and hover a resource.
You’ll see that some resources colored green and some colored red.
- The green ones are the resources that initiates the resource you’re hovering on
- The red ones are the dependecies of the hovered resource
I hope you found at least one new thing, otherwise I hope you already use these features. Better sites for a better future.
May the code be with you,