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:
- Download the chrome-plugin.zip
- Open chrome://extensions/
- Enable 'Developer Mode'.
- Drag and drop chrome-plugin.zip to chrome://extensions/
- Open your website. eg. this example
- Click on the extension to highlight divs!
- Click on the extension again to restore div colours.
For other browsers:
- Open your website. eg. this example
- 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:
-
Open your website. eg. this example
-
View page source: Right click anywhere > Inspect
-
In the Inspect menu, go to: 'Sources' tab > 'Snippets' tab > + New snippet >
-
Paste the .js code into the snippet.
-
Save the snippet: eg. On Windows: CTRL + S. On macOS: Command + S.
-
Run the code: eg. On Windows: Ctrl + Enter. On macOS: Command + Enter.