Pendule – Neat Chrome Plugin For A Web Developer

Ads by Google

image140   Pendule   Neat Chrome Plugin For A Web DeveloperI do quite a bit of Web development, and Google Chrome is my main browser these days. Chrome is pretty developer-friendly as it is, and you can also set up Firebug on Chrome. But today I wanted to show you a different Chrome extension called Pendule. Pendule supplements Chrome’s built-in Inspect Element feature with some interesting extras.

The Pendule Menu

image141   Pendule   Neat Chrome Plugin For A Web Developer

Pendule’s toolbar button pops out a slick-looking menu, divided into six main areas. First up, the Style Sheets section. The View CSS option may seem redundant – after all, Chrome already lets us view CSS… or does it?

Many websites use compressed CSS, with some compressing it to the point of illegibility. If you’re the only Web developer on your site, you may be able to decide for yourself how much you want to compress the CSS. For me, there is no such luck. One of the websites I work for compresses the CSS using a PHP tool called Minify, so inspecting the CSS with Chrome’s built-in tools shows something like this:

image142   Pendule   Neat Chrome Plugin For A Web Developer

Ads by Google

Not exactly the most readable format imaginable. With Pendule, I can easily beautify the CSS on my side. I just click the Pendule button and click View CSS. I then get something like this:

image143   Pendule   Neat Chrome Plugin For A Web Developer

Still not very readable. But click the Beautify CSS button and watch the magic happen:

image144   Pendule   Neat Chrome Plugin For A Web Developer

Now we’re talking! While you can’t change anything in the CSS view, this is a big improvement when it comes to compressed CSS.

Handling Images

Pendule also offers some interesting image-related utilities:

image145   Pendule   Neat Chrome Plugin For A Web Developer

View images information” takes you to a completely new webpage containing all images from the current page, each with a host of related information:

image146   Pendule   Neat Chrome Plugin For A Web Developer

This is handy because it lets you scroll through all images one by one and audit them individually. For example, some websites serve content from one server and related images from another server (to make things faster). With this view, you can see exactly where each image comes from and easily track down the ones that aren’t served from the right source.

You can also read the Alt text for every image, which can be key for SEO offers. However, if you’re just interested in the Alt text, Pendule lets you easily audit that on-page, using the “Show alt text” option. When enabled, images on your page look like this:

image147   Pendule   Neat Chrome Plugin For A Web Developer

This one happens to be from a lovely post entitled 3 Signs Apple Is Displacing Microsoft To Become The Evil Empire, but the point here is the little “alt=” snippet above the image. It looks like a tooltip, but you don’t have to hover your mouse over it to make it show. With “Show alt text”, you can just scroll through your webpage and see exactly what images have missing or incorrect Alts.

Miscellaneous Utilities

image148   Pendule   Neat Chrome Plugin For A Web Developer

Pendule’s Miscellaneous Utilities menu packs a few interesting goodies. The View JavaScript products a single webpage divided into sections, one section for each script the current page contains. Much like the “View CSS” option we started off with, View JavaScript lets you beautify the code to make it readable. JavaScript is almost always compressed (even more so than CSS), so this is a very handy option if you like reading code to figure out how things work.

The “Display ruler” option dims the page and overlays it with a resizable, draggable frame with a little label that shows its dimensions at any given time. This is very handy for checking to see if elements are correctly aligned, for example.

image149   Pendule   Neat Chrome Plugin For A Web Developer

Final Thoughts

If you’re a Web developer using Chrome, the first thing you should do is get absolutely comfortable with Chrome’s own built-in developer tools. However, once you’ve done that, you will probably be able to find at least one or two tools within Pendule that nicely supplement your workflow.

Ads by Google

7 Comments - Write a Comment



This tool is just AWESOME :3
I’ll be gaining so much time thanks to it.

Thanks a bunch Mr. Zukerman :)

Erez Zukerman

Hey, sure thing! :) I’m glad you like it!

Kresimir Pendic

Hi Erez, do you know maybe is there a way to triger some specific tool from pendule, let’s say, ruler, via kayboard ? thanks

Erez Zukerman

I gotta admit I don’t. You might wanna check out MakeUseOf answers for that. :)


Mahesh Makvana

Though I haven’t used this chrome extension, the screenshot given above are surely forcing me to try out this extensions. Web Developer Chrome Extensions are great, which  I can’t see for the Firefox browser.

Erez Zukerman

Well, Firefox has the absolutely amazing Firebug… I wish Firebug (the full version, not the “lite” one) finally came to Chrome. That’ll probably never happen, though.


cynthia nelson

Thank you very much for good idea. I read it carefully.

Your comment