Six “Chrome Developer Tools” Useful Features

Hey all,
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:

On the network tab make sure the video camera button is selected
Images of the page load progress in time frames

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!

Audits panel specifies suggestions to improve you page load
Some tips are obvious (how did I miss that?!)
And some makes you think (how did I miss that?!)

3. Profile Javascript and Css performance - Profiles tab

Ok now your page loads fast! But it works sloooow in action after load.
You can analyze CPU time and Memory performance of your Javascript and Css in the “Profile” tab.

Many profiling options
You can see CPU time, and which function made your performance go slow

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

5. Timeline

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?

Timeline statisitcs

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,
Omer