dbjpanda / div-highlighter

A plugin to highlight all site divs for development and testing.

Website div highlighter

Highlight every div on your website in a unique color. 📕📙📒📗📘

This was created in an effort to simplify web development, by highlighting every div. 💻

❓ How to implement it?

For Google Chrome:

1. Download the chrome-plugin.zip
2. Open chrome://extensions/
3. Enable 'Developer Mode'.
4. Drag and drop chrome-plugin.zip to chrome://extensions/
5. Open your website. eg. this example
6. Click on the extension to highlight divs!
7. Click on the extension again to restore div colours.

For other browsers:

1. Open your website. eg. this example
2. Copy, paste and run the code in your browser javascript scratchpad.

main(); // To run the plugin

or

main(false); // To restore elements

🔼 Features in development.

• Prototype code to add color to every div. ✔️
• Function to revert div colors. ✔️
• Google Chrome browser extension as .zip. ✔️
• Add user interface indicating when extension is active or inactive. ✔️
• Add feature: Restore div elements to their original colours instead of clearing.
• Add feature: Keyboard shortcuts to toggle extension for Windows and MacOS.
• Public listing of Google Chrome browser extension.
• Custom features to Google Chrome browser extension.

❓ What is a javascript scratchpad?

Good question,

A clearer example of how to implement this in Google Chrome:

1. Open your website. eg. this example

2. View page source: Right click anywhere > Inspect

3. In the Inspect menu, go to: 'Sources' tab > 'Snippets' tab > + New snippet >

4. Paste the .js code into the snippet.

5. Save the snippet: eg. On Windows: CTRL + S. On macOS: Command + S.

6. Run the code: eg. On Windows: Ctrl + Enter. On macOS: Command + Enter.

Every div on the website will change to a transparent color with a clear border. 🌈

In development as of 14th December, 2022.