Pendule - Chrome Plugin for Web Developers
Pendule: Enhancing Chrome's Developer Tools
As a web developer, Google Chrome serves as my primary browser due to its inherent developer-friendliness. While Chrome already offers robust tools, including the ability to utilize Firebug, I recently discovered a Chrome extension named Pendule.
Introducing Pendule
Pendule is designed to augment Chrome’s existing Inspect Element functionality. It introduces a range of supplementary features that can be beneficial during the development process.
The extension provides additional capabilities beyond the standard inspection tools. This allows for a more comprehensive analysis of web page elements.
Key Features and Benefits
- Enhanced Inspection: Pendule builds upon the foundation of Chrome’s Inspect Element.
- Supplementary Tools: It delivers extra features not natively available in the browser.
- Developer Workflow: The extension aims to streamline the workflow for web developers.
By integrating with Chrome’s developer tools, Pendule offers a more powerful and versatile debugging experience. It’s a valuable addition for anyone frequently working with web development.
Ultimately, Pendule serves as a useful extension for developers seeking to expand the capabilities of Chrome’s built-in inspection features.
The Pendule Menu
The Pendule toolbar extension introduces a visually appealing menu, categorized into six primary sections. The first of these is the Style Sheets area. The View CSS function might appear to duplicate functionality already present in Chrome’s developer tools – but does it truly?
A significant number of websites employ CSS compression techniques, with some utilizing methods that render the code nearly unreadable. If you are the sole web developer responsible for a site, you may have control over the level of CSS compression. However, this isn’t always the case.
For instance, one of the websites I maintain utilizes a PHP tool named Minify to compress its CSS. Consequently, inspecting the CSS using Chrome’s native tools results in output similar to the following:
This format is far from ideal for quick comprehension. Fortunately, Pendule provides a straightforward solution to beautify the CSS directly within the browser.
Activating the Pendule button and selecting View CSS initiates the process. The initial output may still present some challenges:
However, clicking the Beautify CSS button instantly transforms the code:
This enhanced readability is a substantial benefit when dealing with heavily compressed CSS files. Although direct editing within the CSS view isn’t possible, the improvement in clarity is considerable.
Image Management with Pendule
Pendule provides several useful features for working with images on webpages.
Image Information View
The “View images information” function redirects you to a dedicated page displaying all images present on the currently viewed webpage.
Each image is accompanied by comprehensive details. This functionality is particularly beneficial for conducting thorough image audits.
Auditing Image Sources
It allows for sequential review of each image, enabling identification of potential issues. For instance, some websites utilize different servers for content and images to improve loading speeds.
This view facilitates pinpointing images served from incorrect sources, ensuring consistent delivery. It’s a valuable tool for maintaining website performance and integrity.
Analyzing Alt Text
Alt text is crucial for SEO, and Pendule offers tools to assess it effectively.
Instead of individually inspecting each image’s alt attribute, you can use the “Show alt text” option for a quick on-page audit.
Visualizing Alt Text
When activated, the alt text is displayed directly above each image, resembling a tooltip but without requiring a mouse hover.
This allows for rapid identification of images with missing or inaccurate alt descriptions. For example, even images from posts like “3 Signs Apple Is Displacing Microsoft To Become The Evil Empire” are easily checked.
The “alt=” prefix is clearly visible, streamlining the process of verifying alt text across the entire page.
Miscellaneous Utilities
Pendule provides a collection of useful tools within its Miscellaneous Utilities menu. One notable feature is the View JavaScript function.
This tool presents a webpage’s code in a segmented format, with each script appearing in its own dedicated section.
Similar to the View CSS functionality, View JavaScript offers code beautification for improved readability.
Given that JavaScript is frequently compressed – often to a greater extent than CSS – this feature proves invaluable for developers seeking to understand underlying code logic.
Display Ruler Functionality
The “Display ruler” option provides a visual aid for precise webpage layout assessment.
It subtly dims the page and superimposes a resizable and movable frame, displaying its current dimensions.
This is particularly useful for verifying the accurate alignment of page elements.
Key benefits of the ruler include quick visual checks for alignment and dimension accuracy during web development.
The View JavaScript and Display ruler tools are valuable additions to a web developer’s toolkit, enhancing code comprehension and layout precision.