Overview
AcID DOM Inspector (aka ADI) is a simple DOM inspector written in JavaScript. It has been created as a school project and doesn't aim to compete with tools such as Firebug or Chrome DevTools.
ADI provides a simple DOM tree overview with an interactive highlighting feature. Simple editing of attributes is available for selected DOM nodes.
How to use
Download the latest version of ADI.
Move the acid-dom folder into your project's root folder.
Add the ADI stylesheet to the <head> tag.
<link rel="stylesheet" href="acid-dom/css/acid_dom.css">
Add the ADI source code before the </body> tag.
<script src="acid-dom/js/acid_dom.min.js"></script>That's it, now you're ready to start using ADI. ;)
Usage notes
Ctrl + Alt + D shortcut is available to open/close ADI.
Drag the horizontal/vertical splitter to resize the view.
Inspecting the DOM
Simplified DOM tree is displayed in the upper part. Hover over DOM nodes for on-page highlighting.
Click on the selected node to activate it. This also allows you to edit the attributes.
Using the lookup tool
Select the lookup tool from the menu panel in the bottom part. Move a mouse cursor over the page and click on the selected element to activate it.
You can click on the lookup tool again for its deactivation whenever you want.
Editing the attributes
You can edit id, class and style attributes for every active element simply by editing the text inputs' values.
If the active element has other attributes than those mentioned above, you can also edit them.
Configuration
Click on the cog icon to open the settings panel, there are several options you can change.
- Saving of settings
- If enabled, ADI will save the options and dimensions of its view in browser's local storage. These are restored with every page refresh.
- Scroll to the active element in DOM View
- DOM view will be scrolled so that the active element's DOM node is always visible.
- Hide empty text nodes
- Empty text nodes (or text nodes containing only whitespace characters) are not displayed by default.
- Fold the text nodes
- DOM nodes which contain only text nodes are folded by default.
- Transparent background
- Since the ADI view is rendered over the page, it might be useful for highlighting elements which lies underneath the ADI view.
Public API
ADI object is attached to the global namespace and provides two public methods.
ADI.toggle() which opens or closes the ADI view.
ADI.getSelectedElement() which returns either the active element's DOM node or null if no element is active.
