It used to be the case that debugging JavaScript, or even figuring out why a page element wasn’t rendering correctly, was a painful process of trawling through source code, changing a value and refreshing a page. These days most browsers allow live editing so you can see the results instantly, but you could be limiting yourself if you think that’s as far as the likes of Chrome and others have progressed.
An article over at Digital Inspiration takes us through a number of features of Google’s browser that can be invaluable for developers — as long as you know they exist! One of the more powerful ones you might have missed is the JavaScript console, which can be accessed by clicking on the three-line icon in the top right-corner of a Chrome window, then selecting Tools -> JavaScript console. You can also just hit Shift+Ctrl+J if you have a keyboard handy (which you probably do).
A basic use is as a calculator, in the sense that you’re just feeding JavaScript simple arithmetic — something any programming console can do. The better aspect is quickly extracting information from a webpage. This is a task that can be accomplished a number of ways — Perl is a popular choice — but being able to do it directly within a browser has its advantages (seeing what you’re doing, for one).
The example provided in the Digital Inspiration article grabs the links from anchor elements and outputs them to the console, but you could easily tweak the code to pull text from the “src” attribute of an image or even more complex operations, such as extracting possible links to RSS feeds.
The great thing about Chrome is its fast upgrade cycle, so be sure to continually check out the developer tools it provides — I’ve been surprised by how much it’s expanded over the last few years and I’d hate to miss a feature.
The Best Feature of Google Chrome You Aren’t Using [Digital Inspiration]
Comments
3 responses to “Get Familiar With Chrome’s Web Development Tools”
I use the JavaScript console religiously and find it awesome. Why can’t IE have such an accessible feature. Debugging code in IE is a PITA!
IE’s developer tools (accessible by pressing F12) have a javascript console as well as most of the functionality found in other browsers.
Yes but it’s not as accessible. It’s a separate window, It’s a number of clicks to get the debug to begin, then you have to reload the page to get it to work etc etc.