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 wa

Answer 1

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 !

Answer 2

Developer Tools on IE8

Answer 3

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 4

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 5

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 6

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.