SuperDev ·

An Open-source Swiss Army Toolbox for Web Designers, Developers, and Founders That Minimises the Development/Designing Time and Provides Various Tools to Debug the Web Without Any Hassle. List of Features Below -

• Text Editor - Edit Any Website's Text Easily
• Page Ruler - Measure Distance Between Two Points
• Color Picker - Pick Site Colors, Even From Images in RGB/HEX
• Color Palette - Website's Colors Palette in RGB/HEX
• Page Guideline - Check Alignments in Real-time With Guidelines
• Page Highlight - Highlight Page Elements With Different Colors
• Move Element - Move Any Element Within the Page
• Delete Element - Delete Any Element From the Page
• Export Element - Export HTML + Used CSS of Any Page Element
• Clear All Cache - Clear Cache/Cookie/LocalStorage

4.mov

Privacy Note

• It Does Not Collect Any Data at All and is Fully Offline Except for Two Fetch Requests.
• Those Fetch Requests Are Used to Fetch the Site's External Stylesheets by Export Element Feature.

Additional Features

• Dark/Light Mode - Choose Between Dark and Light Mode
• Minimise Popup - Manual/Auto Minimise Popup
• Move Popup - Move Popup Anywhere on the Page
• Customise Settings - Choose From Multiple Settings

About Export Element

• It Removes All Unused CSS From the Exported Element, So Only Used CSS Will Be Included in the Results.
• It Converts All Relative Urls to Absolute, It Means All href, src, srcset or CSS url() Will Work Perfectly After Export.
• It Works Perfectly Well With @media, @font-face, @supports, @imports and @keyframes and Retains Only the Used Ones.
• It Works Perfectly Well With CSS vars(), and Converts CSS Variable Values to Actual Value.
• It Removes Comments From CSS, Add Browser Prefixes Such as -moz, -webkit Wherever Necessary.
• It Removes Overridden, Discarded, Unused CSS Rules Completely.
• It Converts to Shorthands Wherever Necessary and Formats Everything Before Export.
• It's Algorithm (500+ Lines) is Second to None Except CSS Scan's (Paid) That Too With a Negligible 5-10% Difference in Precision.

Install On

• Google Chrome - Working Perfectly
• Microsoft Edge - Working Perfectly
• Brave Browser - Working Perfectly
• Mozilla Firefox - Coming Really Soon
  

Built With

• ReactJS - Used by Superdev Popup
• TailWindCSS - Used by Superdev Popup
• PostCSS - Used by Export Element
• JSBeautify - Used by Export Element

Troubleshooting

• This is a Very Active Project, and Bug Reports Are Most Welcome.
• If It's Not Working on a Site, Try Turning It Off and/or Refreshing the Page.
• If It's Still Not Working, Uninstall and Reinstall the Extension.
• Make Sure You're Running the Latest Version of Superdev + the Browser.
• If None of This Work, Submit an Issue Here.

Important Note

• Page Ruler and Color Picker Both Takes Page Screenshots, Process That Image to Find the Distance Between Two Objects and the Color of That Area. It Means It Won't Work Properly on Sliders and Moving Elements of the Page.
• Export to Codepen Functionality of Export Element Features Won't Work on Some Super Secure Sites Because of CSP (Form Action) Header, Save to File Instead in That Case. Due to Issues in Chrome Api MV3, CSP Header Can't Be Modified Programmatically, and Disabling CSP Will Be a Major Security Risk, That's Why I Am Leaving It as It is.
• Export Element Feature Currently Disables CORS on All Fonts, Images, and Media Files Across All Websites. This is to Ensure All Fonts, Images, and Media Files Load Correctly on Codepen and Exported Files on the User's Device. However, I Still Need to Figure Out Whether to Retain This Feature or Remove It.
• Superdev is Saving You and Your Team a Good Amount of Time and Effort? Buy Me a Coffee ☕

Manual Install

You Can Run Superdev Locally Without Having to Install It From the Chrome Store. Here's How:

• Download the Code. In the Web Version of Github, You Can Do That by Clicking the Green "Code" Button, and Then "Download Zip".
• Go to chrome://extensions/ in Your Browser, and Enable Developer Mode
• Unzip First and Drag the Build Folder or Click on the "Load Unpacked" Button and Locate the Build Folder.
• That's It, You Will Now Be Able to Use Superdev Locally. Make Sure You Pin It on the Toolbar by Clicking the "Puzzle" Icon in the Toolbar (Top Right) and Pinning Superdev.

Coming in Pro

• CSS Inspector and Viewer
• Padding/Margin Visualiser
• Add Custom JS and CSS
• Fonts Inspector and Fonts List
• Website Font Changer
• Extract Media/Images/SVGs
• Take Full Site Screenshots
• Responsive Site Viewer
• Quick Source Code Viewer
• Site Info + Technology Lookup
• And More ++

Todo:

• Document Codebase Properly
• Optimise Export Element Algorithm
• Optimise Code Performance & Design
• Add Support for Mozilla Firefox
• Translate to Other Languages
• Move Codebase to TypeScript

Feel Free to Reach Out to Me Through Email at [email protected] or Linkedin if You Have Any Questions or Feedback! Hope You Find This Useful 😀