notzane / red-box-outline

Chrome extension that toggles a red outline around every element on the page

red-box-outline

Overview

red-box-outline is a simple Chrome extension designed to assist developers and designers in debugging layout issues. With a single click, it toggles red outlines around every element on the webpage.

Key Features

• Easy Toggle: Activate or deactivate the red outlines with just one click.
• Universal Application: Works on any webpage, making it a versatile tool for all your layout debugging needs.
• Mobile Scroll Debugging: Pinpoint the exact elements causing horizontal scroll issues on mobile layouts.

Installation

To install red-box-outline, follow these steps:

1. Download the Extension:

   • Navigate to the red-box-outline repository on GitHub.
   • Download the ZIP file of the repository.

2. Unpack the Extension:

   • Unzip the downloaded file to a desired location on your computer.

3. Load the Extension in Chrome:

   • Open Google Chrome.
   • Go to chrome://extensions/ in your browser.
   • Enable 'Developer mode' at the top-right corner of the page.
   • Click on the 'Load unpacked' button.
   • Select the unzipped folder of red-box-outline.

Usage

Once installed, using red-box-outline is straightforward:

1. Open any webpage where you want to debug the layout.
2. Click on the red-box-outline icon in your Chrome toolbar.
3. Toggle the Red Outlines:
   • Click once to display red outlines around every element on the page.
   • Click again to hide the outlines.

Contributing

Contributions to red-box-outline are welcome! If you have suggestions for improvements or encounter any issues, feel free to open an issue or submit a pull request.

License

red-box-outline is open-sourced software licensed under the MIT license.

Happy debugging! 🐞🔍🛠️