Pendule – A Neat Web Developer Plugin [Chrome]
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
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. 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
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:
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:
Still not very readable. But click the Beautify CSS button and watch the magic happen:
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:
“View images information” takes you to a completely new webpage containing all images from the current page, each with a host of related information:
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:
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.
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.
Fri, 07 Oct 2011 22:31:01 GMT
Tags: Browser Tips & Tricks, chrome extensions, css, web development, webdesign, webmaster tools,
Charlotte E-Commerce | Teaneck E-Commerce | Manchester E-Commerce | Tucson E-Commerce | Templeton E-Commerce | Helena E-Commerce | Covina E-Commerce | Fenton E-Commerce | Stockbridge E-Commerce | Seabrook E-Commerce |
Browser Tips & Tricks
How to Turn Off the Photo Viewer in Facebook
New features on popular sites like Facebook can be met with as much excitement as rejection. It’s hard to think of any one change that Facebook has made that hasn’t been criticised in one way or another. The latest of these changes that hasn&#
Make The Web A Better Reading Place With The New Readability
The Internet might be a great source of information, but it’s not always a great place to read that information. Some web owners try too hard to monetize their site that all of the advertisements prevent visitors from having a nice reading experienc
The 10 Coolest Google Chrome Themes
The big three - as far as browsers are concerned - have been making headlines as of late. Microsoft released IE9, which was downloaded nearly 2.5 million times in the first 24 hours of being released. While impressive, Firefox 4 came out clearing some 5 m
chrome extensions
6 Chrome Extensions For Catching The Latest News Headlines
Chrome extensions or search enablers that help to serve news in the browser have one important purpose. They are shortcuts and save you the bother of looking up the news websites individually or searching through it. As these Google Chrome extensions show
css
Create Web Animations Using HTML5, CSS3 & JavaScript With The Help Of Adobe Edge [Windows & Mac]
Flash used to be the king of web animation, but now it's been slowly abandoned because of the possible future ruler: a combination of HTML5, CSS3, and JavaScript. Even though Adobe is still strongly supporting Flash, it is also beginning to embrace the n
Create A Full Page News Ticker Display With CSS & RSS Widgets
If you're a news blogger, the importance of staying up to date on breaking news is critical. Ever since I started covering more news-related events on my own blog, I realized how important it was to constantly monitor real-time news. Since I use two scre
Need E-commerce Design? Check out our member profiles:
Developing custom eCommerce and eBusiness solutions since 2005. Bespoke software applications builders for web, desktop and mobile platforms.
Athens, Attica GR
We deliver advanced and affordable designs for small/mid size-business. Our goal is to bring more businesses for your company and gain popularity to your market. We provide great customer service!
Richland-Kennewick, Washington US
We provide web & graphic design, programming, marketing and business consulting services throughout the globe.
Hampton, Georgia US
Hi, my name is Lisa Ewing. I am a freelance website designer who is passionate about website design! My goal, create a custom virtual store front that conveys my clients passion for their business.
Haddon Heights, New Jersey US
We offer professional web design services for personal and small business websites. Our goal is to get our customers the design they need at a price they want. This is unique custom website design.
Mint Hill, North Carolina US
We are a professional custom website design company catering your companies business and marketing needs. We provide a wide range of online solutions to businesses of all sizes, in all industries.
Kenosha, Wisconsin US
Professional website design, web development, and internet marketing. 317-924-3495
Indianapolis, Indiana US
The Best New Features Of Magazine Style Apps For the iPad
I ve been a huge fan of magazine style apps ever since the release of Flipboard followed by Pulse
Apply Instagram-Like Effects To Your Photos On Your Desktop With Perfect Effects 3 [Windows & Mac]
Ever since Instagram was introduced on iOS people have been easily adding filters to their images t
Better Than The Default: 3 Chrome Add-Ons That Claim They Do Things Better
A recent stroll through the Chrome Web Store revealed an interesting trend There are more than a fe
Embed Custom Fonts with Cufón Font Replacement and Google Fonts
Embedding custom fonts on a website has always been a problem but thanks to Javascript and especial
Cool Tech Deals Of The Week – Samsung UN55D6400 55in 3D LED LCD HDTV (1080p, 120Hz) $1299.99 & More!
TigerDirect has the Samsung UN55D6400 55 LED LCD HDTV for a low 1299 99 and free shipping For mor
Smartphone Gamers: We’re Giving Away a Kindle Fire
If you live in the U S and like to play games like Angry Birds on your smartphone iPhone Droid et
Use eXtra Buttons To Completely Control The Windows Of All Applications [Windows]
For quite a long while I was a big Minime enthusiast I ve got some major OCD and I hate having win
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Cool Software Apps (76)
Opinion & Polls (76)
Browser Tips & Tricks (66)
Social Media (66)
iOS (66)
iPhone Apps (59)
Photography (58)
Freebies (58)
geeky fun (58)
iphone (55)
troubleshoot (53)
Google (53)
android (52)
Photoshop (52)
Graphics (51)
How-To Articles (50)
facebook (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
