A Few Useful Web Development Bookmarklets
On This Page:
I started creating a few bookmarklets (small JavaScript snippets saved as browser bookmarks) when working with a client which involved some 'front-end archeology' looking at a codebase that was 15 years mature and has been worked on since. These tools helped me quickly understand the structure, dependencies, and technical debt without having to dive deep into the codebase first.
The bookmarklets I've created focus on some common web development inspection tasks that aren't always easy to accomplish with standard browser developer tools:
- Toggling between JavaScript and non-JavaScript states.
- Finding inline CSS in the document.
- Identifying elements with inline styles.
- Detecting third-party resources.
- Highlighting design system component usage.
Each of these addresses specific challenges I faced when trying to understand and document legacy front-end code. They've proven particularly valuable when auditing sites with multiple developers' contributions over many years, revealing patterns and issues that could remain hidden.
These bookmarklets don't attempt to replace comprehensive developer tools, but rather complement them by providing quick insights for specific front-end investigation.
JS/No-JS Toggle
This bookmarklet toggles between the js and no-js classes on the HTML element. It's useful for testing how your site behaves with and without JavaScript enabled.
No No No No JSInline CSS Inspector
This bookmarklet displays all inline CSS styles in the document head and style blocks in the page, along with line numbers and formatting.
Inline CSS Inspector
Inline Element Styles Inspector
This bookmarklet scans the entire page for HTML elements that have inline style attributes and displays a comprehensive report.
Inline Style Inspector
Why This Bookmarklet is Useful
This inline styles inspector aids in code audits to identify styles for external stylesheets, debugging layout issues, performance optimization through consolidating redundant styles, and checking for styles that might override accessibility features.
Third-Party Resource Detector
This bookmarklet identifies and lists all external CSS and JavaScript files loaded from domains other than the current one.
External Resources Detector
Why This Bookmarklet is Useful
This external resource detector supports security auditing of third-party scripts, performance optimization, GDPR/privacy compliance checks, dependency management, Content Security Policy development, and assessment of offline capabilities by identifying external resources.
Component Checker
This bookmarklet helps identify which elements use your design system classes. Elements with your design system prefix are highlighted in green, while all others are outlined in red.
Component Checker
Why This Bookmarklet is Useful
This component checker assists with design system compliance verification, legacy code detection, visual auditing of component adoption, refactoring planning, quality assurance of developer practices, and creating visual documentation of component usage patterns.
Customizing the Component Checker
To adapt this bookmarklet for your own design system, simply modify the namespace value at the beginning of the code. Replace vf- with your own design system's class prefix.
Bonus - Ass Morphism
A little fun bookmarklet that makes a dig at the new Liquid Glass or Glassmorphism design and will simply change where it used on a page with a little humour.
Ass Morphism