Useful features of Chrome dev tools

Google chrome dev tools are used by webdevs on a daily basis. I decided to pick its most used and useful features in a short list. Probably you know some/most of them but keep on reading maybe you will find at least one which you did not try.

Changing name of file directly in DOM

If you misspelled the file name/path to file used in your project this is how you can fix the issue immediately.

Putting debugger inside instructions like onClick

Just make a change in a DOM like below. No need to look up the file in your repo.


You can also set debugger by clicking into line number

Pretty printing of js files

Sometimes you just need to read the code of .js file to wrap your head around the logic – pretty print could be pretty useful 🙂

Blackboxing scripts

There are some scripts which you can omit when debugging logic of your app (.js/.ts files). Just right click on script and choose ‘Blackbox script’. 

Show variables values inline when debugging

It’s checked by default, but it’s worth to know where you should look for it 

Preserving the log

There are times when some of the errors in your console tab will disappear because of automatic web page reload, if you want to see them just check “Preserve the log”

Check state of elements on :hover / :active / :visited

Invaluable if you want to check styles of buttons in clicked/hover state

Audit of the website

Can show you lot of useful information regarding possible improvements of the website

Show how page will look on mobile

It allows you to see how website will look on mobile devices.
Do not believe this view for 100%, there are times that your page will look different in same type of mobile device, so double check it.

Timing of the request

These times (especially TTFB and Content Download) could be useful when working on performance of your website. Check how it helped me here

Quick file opening

Could be very useful when trying to quickly look up code of file in bigger projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top