2009-04-12 26 views
13

¿Alguien sabe de un inspector de DOM javascript library o plugin?¿Alguien conoce una biblioteca o plugin Javascript de inspector DOM?

Quiero utilizar este código dentro de una página web que estoy creando, he buscado mucho, pero no encontró lo que quería excepto éste: http://slayeroffice.com/tools/modi/v2.0/modi_help.html

ACTUALIZACIÓN: parece que nadie entiende mi pregunta :(Quiero encontrar un ejemplo o complemento que me permita implementar el inspector DOM. No quiero una herramienta para inspeccionar los DOMs; Quiero escribir el mío.

+0

¿Encontró algo? –

+0

@SimhachalamGulla en realidad esto fue hace muchos años, y en este momento terminé implementando mi propio camino, en resumen, está usando jquery y jugando con los eventos de mouse, mousemove y hover. –

+0

gracias :), si ve webflow.com, están jugando con elementos de iframe, ¿hay algún tipo de biblioteca disponible? –

Respuesta

5

me encontré éste: http://userscripts.org/scripts/review/3006

Y éste también está muy bien:

DOM Mouse-Over Element Selection and Isolation

que es muy simple, con pocas líneas de código y me dan algo bueno para editar un poco y obtener exactamente lo que quería.

+1

Gracias por compartir lo que encontraste, esto es exactamente lo que necesitaba. El segundo enlace definitivamente se ajustaba mejor a mis necesidades, pero ambos son útiles para fines de investigación. –

5

¿Qué tal Firebug Lite? Es como Firebug pero lo inserta en su página y puede depurar html, css, Javascript y DOM en la mayoría de los navegadores (incluido n en-FF)

2

Firebug es una buena solución para Firefox. Puede explorar la actividad de red, HTML, JavaScript, DOM de una página, etc. Safari también tiene incorporadas herramientas bastante buenas (actualmente estoy usando la versión beta de Safari 4), aunque me parece más fácil navegar por Firebug.

0

Sí, hay muchas. Por ejemplo, Firefox tiene DOM Inspector, Firebug y X-Ray. Creo que Firebug es el mejor de los tres, personalmente.

0

Herramientas de Desarrollo de IE8

+2

sigue usando IE? –

0

Solía ​​usar Firebug, y Firefox todo el tiempo, ahora gracias a IE8, que tiene una herramienta realmente genial llamada Developer Tools --- que permite ver todo el Javascript, CSS y permite una función de depuración realmente genial. ¡MICROSOFT está llegando!

5

Aardvark es oficialmente una extensión de Firefox, pero también se puede usar como una biblioteca de JavaScript. La demostración en línea en dicho sitio web se implementa mediante javascript. digg en el código & encontrará loader.js que está arrancando los módulos Aardvark.

+0

Y este también es muy bonito, pero está por encima de mis necesidades y un montón de código. –

2

Muy recientemente, necesitaba desarrollar una aplicación que utilizara JavaScript: cuando cualquier usuario haga clic en una imagen de este sitio, enviará la URL de la imagen a una ubicación específica.Aquí está el artículo que me ayudó a lograr que: AspBoss - Javascript Library for Dom Inspector

Y esto es 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); 
7

También estoy buscando para el lo mismo, y además de http://slayeroffice.com/tools/modi/v2.0/modi_help.html he encontrado: http://www.selectorgadget.com/ (https://github.com/iterationlabs/selectorgadget/)

también encontramos con este https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector

Lamentablemente no he encontrado nada basado en jQuery. Pero "JavaScript DOM Inspector" parece ser la palabra clave correcta para buscar este tipo de cosas.

+0

+1 http://heinencreative.com/articles/selector-detector-vs-selectorgadget –

+1

El 'Simple Javascript Dom Inspector' parece prometedor. –

Cuestiones relacionadas