Does anyone know a DOM inspector javascript library or plugin?

Question

Does anyone know of a DOM inspector javascript library or plugin?

I want to use this code inside a website I am creating, I searched a lot but didn't find what I wanted except this one: http://slayeroffice.com/tools/modi/v2.0/modi_help.html

UPDATE: Seems that no one understood my question :( I want to find an example or plug-in which let me implement DOM inspector. I don't want a tool to inspect DOMs with; I want to write my own.

Answer 1

I am also looking for the same thing, and in addition to http://slayeroffice.com/tools/modi/v2.0/modi_help.html i found: http://www.selectorgadget.com/ ( https://github.com/iterationlabs/selectorgadget/ )

Also came across this https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector

Unfortunately I haven't found anything based on jQuery. But "Javascript DOM Inspector" seems to be the right keywords to look for this kind of thing.

Answer 2

I found this one: http://userscripts.org/scripts/review/3006

And this one also is fine:

DOM Mouse-Over Element Selection and Isolation

Which is very simple with few lines of code and give me something good to edit a little and get exactly what i wanted.

Answer 3

How about Firebug Lite - it's like Firebug but you insert it into your page and so you can debug your html, css, Javascript and the DOM on most browsers (including non-FF ones)

Answer 4

Aardvark is a firefox extension officially but you can use that as a javascript library, too. The inline demo in the said website is implemented using javascript. digg into the code & you'll find loader.js which is bootstrapping the Aardvark modules.

Answer 5

Very recently, I needed to develop an application using JavaScript : when any user click on an image of this site, it will send image URL to a specific location. Here is the article that helped me achieve that : AspBoss - Javascript Library for Dom Inspector

And this is the code :

// DOM Inspector
// version 0.1
// 2006-01-25
// Copyright (c) 2006, Onur Mat
//
// --------------------------------------------------------------------
//
// This user script allows you to interact with elements of a web page
// by moving mouse pointer on a web page and clicking on selected elements.
//
// To install for Firefox, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To install for Internet Explorer, you need Turnabout:
// http://www.reifysoft.com/turnabout.php
// See instructions for using Turnabout here:
// http://www.reifysoft.com/turnabout.php
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          DOM Inspector
// @namespace     http://www.dominspector.com/
// @description   Inspect DHTML DOM elements interactively
// @include       *
// ==/UserScript==

function DIOnMouseOver(evt)
{
    element = evt.target;   // not IE

    // set the border around the element
    element.style.borderWidth = '2px';
    element.style.borderStyle = 'solid';
    element.style.borderColor = '#f00';
}


function DIOnMouseOut(evt)
{
    evt.target.style.borderStyle = 'none';
}


function DIOnClick(evt)
{
    var selection = evt.target.innerHTML;

    alert('Element is: ' + evt.target.toString() + '\n\nSelection is:\n\n' + selection);
    return false;
}


document.addEventListener("mouseover", DIOnMouseOver, true);
document.addEventListener("mouseout", DIOnMouseOut, true);
document.addEventListener("click", DIOnClick, true);

Answer 6

Firebug is a good solution for Firefox. You can browse a page's HTML, JavaScript, DOM, network activity, etc. Safari also has fairly good tools built-in (I'm using the Safari 4 beta at present), though I find it's easier to navigate around Firebug.

Answer 7

A coworker recommended me this one: Web X-Ray Goggles https://secure.toolness.com/webxray/

Answer 8

Yes, there are plenty. For example, Firefox has DOM Inspector, Firebug, and X-Ray. I think Firebug is the best of the three, personally.

Answer 9

Developer Tools on IE8

Answer 10

Try Backbase Debugger Application. It also has an I/O inspector.

Answer 11

I used to use Firebug, and Firefox all the time, now thanks to IE8, which has really cool tool called Developer tools --- that allows to see all the Javascript, CSS and also allows to really cool debugging feature. MICROSOFT is getting there !