Pendule – Neat Chrome Plugin For A Web Developer

Ads by Google

chrome web development pluginsI 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

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

Ads by Google

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

image

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

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.

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Mozilla Firefox Fans
Mozilla Firefox Fans
23 Members
Safari Browser Tips
Safari Browser Tips
12 Members
Internet Explorer (IE) Tips
Internet Explorer (IE) Tips
2 Members
Best Mobile Browsers
Best Mobile Browsers
13 Members
Google Chrome Mastery
Google Chrome Mastery
19 Members
Ads by Google
Comments (7)
  • cynthia nelson

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

  • 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.

  • Sorans

    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. :)

Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.