有誰知道DOM檢查器JavaScript庫或插件？

Question

有誰知道DOM檢查器JavaScript庫或插件？

我想在我正在創建的網站中使用此代碼，我搜索了很多但沒有找到我想要的除了這個： http ： //slayeroffice.com/tools/modi/v2.0/modi_help.html

更新：似乎沒有人理解我的問題:(我想找一個讓我實現DOM檢查器的示例或插件。我不想要一個工具來檢查DOM;我想自己編寫。

Answer 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”似乎是尋找此類事物的正確關鍵詞。

Answer 2

我找到了這個： http ： //userscripts.org/scripts/review/3006

這一個也很好：

DOM鼠標懸停元素選擇和隔離

這幾行代碼很簡單，給我一些很好的編輯功能，並得到我想要的東西。

Answer 3

Firebug Lite怎么樣 - 就像Firebug，但是你把它插入你的頁面，所以你可以在大多數瀏覽器（包括非FF）上調試你的html，css，Javascript和DOM

Answer 4

Aardvark是正式的firefox擴展，但你也可以將它用作javascript庫。 所述網站中的內聯演示使用javascript實現。 挖掘代碼，你會發現loader.js引導Aardvark模塊。

Answer 5

最近，我需要使用JavaScript開發應用程序：當任何用戶點擊此站點的圖像時，它會將圖像URL發送到特定位置。 以下是幫助我實現這一目標的文章： AspBoss - 適用於Dom Inspector的Javascript庫

這是代碼 ：

// 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是Firefox的一個很好的解決方案。 您可以瀏覽頁面的HTML，JavaScript，DOM，網絡活動等.Safari還內置了相當不錯的工具（我目前正在使用Safari 4測試版），盡管我發現在Firebug中導航更容易。

Answer 7

一位同事向我推薦了這個：Web X-Ray Goggles https://secure.toolness.com/webxray/

Answer 8

是的，有很多。 例如，Firefox有DOM Inspector ， Firebug和X-Ray 。 我認為Firebug是三個中最好的，個人而言。

Answer 9

IE8上的開發者工具

Answer 10

嘗試Backbase調試器應用程序 。 它還有一個I / O檢查器。

Answer 11

我曾經一直使用Firebug和Firefox，現在感謝IE8，它有一個非常酷的工具叫做開發工具---它可以讓你看到所有的Javascript，CSS以及真正很酷的調試功能。 MICROSOFT即將到來！