DrasticDebug is a Chrome extension designed to help web developers debug front-end issues by outlining every element on a page, highlighting elements on hover, and displaying detailed element info (tag, classes, ID) when you hold the Ctrl key.
- Outlines every element on the page.
- Highlights elements on hover with dramatic box shadows.
- Displays detailed element information when holding Ctrl.
- Toggle debugging with Alt+I or via the extension's popup UI.
.
├── CONTRIBUTING.md
├── dist
│ └── DrasticDebug.zip
├── extension
│ ├── background.js
│ ├── content.js
│ ├── manifest.json
│ ├── popup.html
│ ├── popup.js
│ └── styles.css
├── index.html
├── README.md
└── website
├── script.js
└── styles.css
4 directories, 12 files
- Download the ZIP file from the
distfolder. - Extract the ZIP to a folder on your computer.
- Open Chrome and navigate to
chrome://extensions/. - Enable Developer Mode in the top-right corner.
- Click Load unpacked and select the extracted folder.
- Toggle the extension on via Alt+I or the extension icon.
A GitHub Actions workflow is set up to automatically build a .zip file from the extension/ folder and place it in the dist/ folder whenever changes are pushed to the main branch.
Contributions are welcome! Please see CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License. See the LICENSE file for details.