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.
onClick="SignIn()" onClick="debugger;SignIn()"
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.
