有人知道 DOM 检查器 javascript 库或插件吗？答案

【问题标题】：Does anyone know a DOM inspector javascript library or plugin?有人知道 DOM 检查器 javascript 库或插件吗？
【发布时间】：2010-10-19 00:54:39
【问题描述】：

有人知道 DOM 检查器 javascript 库或插件吗？

我想在我正在创建的网站中使用此代码，我搜索了很多但没有找到我想要的，除了这个：http://slayeroffice.com/tools/modi/v2.0/modi_help.html

更新： 似乎没有人理解我的问题:(我想找到一个示例或插件来让我实现 DOM 检查器。我不想要一个工具来检查 DOM；我想自己写。

【问题讨论】：

你找到什么了吗？
@SimhachalamGulla 其实这是很多年前的事了，此时我结束了自己的实现方式，简而言之，它是使用 jquery 并玩悬停、鼠标移动事件。
谢谢 :)，如果你看到 webflow.com，他们正在播放 iframe 元素，有没有这样的库可用？
@SimhachalamGulla 我不确定，但我建议您将此作为 stackoverflow 上的一个新问题提出，一些开发人员可能会更好地帮助您。

标签： javascript jquery html dom

【解决方案1】：

我也在找同样的东西，除了http://slayeroffice.com/tools/modi/v2.0/modi_help.html我找到了：http://www.selectorgadget.com/（https://github.com/iterationlabs/selectorgadget/）

也遇到过这个https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector

不幸的是，我没有找到任何基于 jQuery 的东西。但是“Javascript DOM Inspector”似乎是寻找这种东西的正确关键字。

【讨论】：

Simple Javascript Dom Inspector 看起来很有希望。

【解决方案2】：

Firebug Lite 怎么样 - 就像 Firebug 一样，但是您将其插入到您的页面中，这样您就可以在大多数浏览器（包括非 FF 浏览器）上调试您的 html、css、Javascript 和 DOM

【讨论】：

【解决方案3】：

Aardvark 是官方的 firefox 扩展，但您也可以将其用作 javascript 库。上述网站中的内联演示是使用 javascript 实现的。深入研究代码，您会发现 loader.js 正在引导 Aardvark 模块。

【讨论】：

而且这个也很不错，但它超出了我的需要和大量的代码。

【解决方案4】：

我找到了这个： http://userscripts.org/scripts/review/3006

这个也不错：

DOM Mouse-Over Element Selection and Isolation

这非常简单，只需几行代码，给我一些很好的东西，让我稍微编辑一下，就能得到我想要的东西。

【讨论】：

感谢分享您的发现，这正是我所需要的。第二个链接肯定更适合我的需求，但两者都便于研究。

【解决方案5】：

最近，我需要使用 JavaScript 开发一个应用程序：当任何用户单击该站点的图像时，它会将图像 URL 发送到特定位置。这是帮助我实现这一目标的文章：AspBoss - Javascript Library for Dom Inspector

这是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);

【讨论】：

【解决方案6】：

Firebug 是 Firefox 的一个很好的解决方案。您可以浏览页面的 HTML、JavaScript、DOM、网络活动等。Safari 还内置了相当不错的工具（我目前使用的是 Safari 4 测试版），尽管我发现在 Firebug 中导航更容易。

【讨论】：

【解决方案7】：

是的，有很多。例如，Firefox 有 DOM Inspector、Firebug 和 X-Ray。我个人认为 Firebug 是三者中最好的。

【讨论】：

【解决方案8】：

IE8 上的开发者工具

【讨论】：

【解决方案9】：

试试Backbase Debugger Application。它还有一个 I/O 检查器。

【讨论】：

【解决方案10】：

我以前一直使用 Firebug 和 Firefox，现在感谢 IE8，它有一个非常酷的工具，叫做开发者工具 --- 可以查看所有的 Javascript、CSS 并允许非常酷的调试功能。微软即将到来！

【讨论】：

【解决方案11】：

一位同事向我推荐了这款：Web X-Ray Goggles https://secure.toolness.com/webxray/

【讨论】：