Most of you would already be familiar with Developer Tools in Chrome browser (a.k.a. Chrome DevTools). These tools are a must know for both
1) web-designers, and
2) web-developers (especially javascript developers)
to not only
1) try their ideas out immediately, but also to
2) debug and find out problem areas (like errors, why something is not working, loading time of page and resources like images and other referenced files).
Note: It is not that such functionality is not available in other modern browsers (viz. Internet Explorer, Firefox, Opera etc.), but what makes it interesting and particularly important to talk about chrome browser in this article is to the fact that chrome is the most standards compliant and rapidly evolving browser out there today. So no hard feelings for other browsers, but we’ll be only talking about development tools in chrome here.
Because of these it is inevitable for any web-developer or web-designer to learn the features provided by these Developer Tools in Chrome Browser.
At this point some of you may be thinking that “hey, I already know these and have been using it already“. But for all such friends out there, it has been my observation and experience that there are a lot of features out there in these tools, and we only use part of them, and rather know only fraction of them.
I believe that
“You cannot use a tool/weapon/feature if you don’t know about it”
With that the first thing to do is know all that is available, so that you can pick up appropriate tool/weapon when in need of one. And am sure that you would have faced such situation in your life where in you would have thought “hell, I never knew these were also possible with this tool“.
So it is always a need to get to know the swords and weaponry available in these developer tools (as there are many to be explored), and I truly believe that once you are aware about most of the features (if not all) provided by these Developer Tools, you would always thank yourself that you spared time for this task.
Now coming to the point where you would be asking “Ok, so am ready to put in time to learn and understand these so called ‘Chrome DevTools’ but then what is the best resource of doing it?“.
So to answer that without taking much of your time, below are two great and free resources to learn/understand/explore these Chrome DevTools:
1) Video Tutorials with hands on exercises by CodeSchool
2) Official Chrome DevTools website
Why two resources: because some are more comfortable learning by watching and some by reading. The video tutorials are for the “watching” type of you and the official website material are for the “reading” types of you out there. Also, the video tutorials would be a great quick starter for important features.
Note though that the video tutorials don’t cover all of the functionality available, but they do cover most of the important stuff out there that you would find yourself using the most. So once you are through the video tutorials, for further deeper reference and for other functionality not covered in video tutorials, I highly recommend going through the official website material at your own convenience.
At the end, I also recommend going though all the keyboard shortcuts for a faster and smoother use of these DevTools.
Happy Learning !!
Purnil Soni's TechnologyZen 