Get Familiar With Chrome’s Web Development Tools

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]

The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.


3 responses to “Get Familiar With Chrome’s Web Development Tools”