Google Chrome Developer Tools

There happens to be a developer tool built into Google Chrome that helps you debug your javascript, manipulate the DOM, and check the performance of a webpage. Of course at this point, most of us are wrapping up our work on our projects, so the discovery of this tool might not help anybody immediately in this class, but some of the features could help you down the road.

The Google Chrome Developer Tool functions a lot like Firebug does for Firefox. With this tool you can breakdown the code of a webpage, manipulate html, css, and javascript codes, and test the speed/latency of your code. Below you can find a video showcasing how to use the developer tool to manipulate your code.




My favorite feature of the devtool is that you can check the speed of your application. They call this feature "Profiling and Optimizing". It allows you to record a page as it loads and then tells you which part of the code is using the most resources or taking the longest. If your code is taking a long time to load, you can use this tool to troubleshoot the problem. You can also create stops in your javascript code to troubleshoot problems as well. Essentially, it functions just like putting an alert box in your code. The benefit of this tool is that you don't have to keep uploading new iterations to the server. You can perform all of your testing without touching your real code, thus saving you from having to rework a page after over-testing it. The video below demonstrates this functionality.



After a bit of use, I like the Chrome Developer Tool more then Firebug. It is easier to work with then Firebug and I find it runs lighter and faster then Firebug too. I think it would be a very useful tool for us to use in our presentations of our projects, since we can display the functionality of the site as well as the underlying code without any hassle. Anybody else agree?