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?
Subscribe to:
Post Comments (Atom)
Colin,
ReplyDeleteThanks for exposing us to the developer tools in Chrome. I may have to try this out to finalize my personal project the way i would like it to run. And hey cool videos to watch too, saves me some reading. :-)
Colin,
ReplyDeleteI always enjoy your posts. I haven't been fully converted as a Chrome user but as my job role changes and I'm more involved in web programming I will certainly put this option in my back pocket. Thanks for the wealth of information.
Colin, thats one reason why I really like chrome. They try to stay above the rest. This should be cool for everyone in class since were making webpages.
ReplyDeleteThis is a pretty cool tool Colin. I wonder how long it will take the other web browsers to follow with a tool like this. It seems that what one does the others try to follow.
ReplyDeleteColin, I breezed over this post mainly because I do use firebug and it seems to do what I need and, besides that I don’t like to load a bunch of junk on my pc so I really wasn’t interested in anything new. I am pretty much caught up with things so I decided to read a few blogs that I overlooked. Anyway, after reading what you had to say, I will probably download and try this. The ability to debug code and see where the bottle necks are without having to upload new versions could be very useful. It’s too bad that someone didn’t find this earlier in the semester. It looks like a great tool. I think I will have to go back through the blog and make a list of all the great applications that everyone found.
ReplyDeleteI might be a petty complainer, but it really bugs me that the scrollbar does not appear when Chrome opens a new web site. It only appears when the content grows beyond the length of the visible page. I tried Chrome and it lasted about an hour on my system. Looks pretty but lacked functionality. I might be a wrong, does anyone agree with me here?
ReplyDeleteglucosamine chondroitin