Chrome Developer Tools: Overview - Google Chrome Developer Tools - Google Code
Edit
Lately developing an iPad Web App using HTML5 for the company, it needs all those offline features and Web Storage. The PM has sent me an ebook with tips of how to create such an App. The book is quite useful, especially there is a chapter teaching how use the Webkit build-in developer tools (yes, both Safari and Chrome has it). It opens up a new world to me to efficiently and effectively debug my JavaScript code. You must check out the "Scripts" tab in the tools, IMO whose UI layout is much better than firebug.
The Watch panel, call stack panel, scope Variables panel will be a great help when you develop your JavaScript.
Setting breaking point is also available in the tools, not just simple breakpoint. It could sent 'conditioinal breakpoint', so that you can have something like 'break only when i>3', apart from that there is a "Event Listener Breakpoints" panel in the side, so that you can break on a particular DOM event.
There is also a "Pause On Exception" function, and what make it even better is that you can choose only pause on uncatched exception! There is pretty print of code as well!
I would highly recommend you to master the developer tools because apart from the useful "Script" Tab there are "Resources", "Network", "Timeline","Profile" and "Audits" tabs which will help you to improve your page's load speed and your JavaScript code's run speed.
One last thing, remember the powerful search box is always on the top right corner which will change the search context depends which tab you are in!
Here is a well sectioned tutorial provided by google : Chrome Developer Tools: Overview - Google Chrome Developer Tools - Google Code
Chrome Developer Tools: Overview - Google Chrome Developer Tools - Google Code
Reviewed by DF
on
11:55:00 PM
Rating: