Pendule – Neat Chrome Plugin For A Web Developer

Erez Zukerman 07-10-2011

I 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 How To Install Firebug on IE, Safari, Chrome & Opera Read More . 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

chrome web development plugins

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:

chrome web development tools

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:


chrome web development tools

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

chrome web development tools

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:

chrome web development

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

chrome web development


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:

chrome web development

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


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.

chrome web development plugins

Related topics: Google Chrome, Web Design, Web Development, Webmaster Tools.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. cynthia nelson
    December 27, 2011 at 6:02 am

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

  2. Mahesh Makvana
    October 8, 2011 at 10:16 am

    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
      October 8, 2011 at 8:05 pm

      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.

  3. Sorans
    October 7, 2011 at 11:01 pm

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

    Thanks a bunch Mr. Zukerman :)

    • Erez Zukerman
      October 8, 2011 at 8:06 pm

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

      • Kresimir Pendic
        December 15, 2011 at 2:05 am

        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
          December 20, 2011 at 8:37 pm

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