DOM Inspector

Last updated
DOM Inspector inspecting Wikipedia's main page DOM Inspector.png
DOM Inspector inspecting Wikipedia's main page

DOM Inspector (DOMi) is a web developer tool created by Joe Hewitt and was originally included in Mozilla Application Suite as well as versions of Mozilla Firefox prior to Firefox 3. It is now included in Firefox, and SeaMonkey. Its main purpose is to inspect and edit the Document Object Model (DOM) tree of HTML and XML-based documents.

A DOM node can be selected from the tree structure, or by clicking on the browser chrome. As well as the DOM tree viewer, other viewers are also available, including Box Model, XBL Bindings, CSS Rules, Style Sheets, Computed Style, JavaScript Object, as well as a number of viewers for document and application accessibility. By default, the DOM Inspector highlights a newly selected non-attribute node with a red flashing border.

Similar tools exist in other browsers, e.g., Opera's Dragonfly, Safari's Web Inspector, the Internet Explorer Developer Toolbar, and Google Chrome's Developer Tools.

See also


Related Research Articles

Document Object Model Convention for representing and interacting with objects in HTML, XHTML and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Firefox Free and open-source web browser by Mozilla

Mozilla Firefox or simply Firefox is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. Firefox uses the Gecko rendering engine to display web pages, which implements current and anticipated web standards. In 2017, Firefox began incorporating new technology under the code name Quantum to promote parallelism and a more intuitive user interface. Firefox is available for Windows 7 and later versions, macOS, and Linux. Its unofficial ports are available for various Unix and Unix-like operating systems, including FreeBSD, OpenBSD, NetBSD, illumos, and Solaris Unix. Firefox is also available for Android and iOS. However, the iOS version uses the WebKit layout engine instead of Gecko due to platform requirements, as with all other iOS web browsers. An optimized version of Firefox is also available on the Amazon Fire TV, as one of the two main browsers available with Amazon's Silk Browser.

DOM Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, ECMAScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

Mozilla Firefox has features that allow it to be distinguished from other web browsers, such as Chrome and Internet Explorer.

Netscape Plugin Application Programming Interface (NPAPI) is an application programming interface (API) of the Web Browsers that allows plugins to be integrated.

Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

A JavaScript engine is a software component that executes JavaScript code. The first JavaScript engines were mere interpreters, but all relevant modern engines use just-in-time compilation for improved performance.

Mozilla Application Suite Discontinued Internet suite

The Mozilla Application Suite is a discontinued cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It was based on the source code of Netscape Communicator. The development was spearheaded by the Mozilla Organization from 1998 to 2003, and by the Mozilla Foundation from 2003 to 2006.

ColorZilla is a Google Chrome and Mozilla extension that assists web developers and graphic designers with color related and other tasks.

A Browser toolbar is a toolbar that resides within a browser's window. All major web browsers provide support to browser toolbar development as a way to extend the browser's GUI and functionality. Browser toolbars are considered to be a particular kind of browser extensions that present a toolbar. Browser toolbars are specific to each browser, which means that a toolbar working on a browser does not work on another one. All browser toolbars must be installed in the corresponding browser before they can be used, and require updates when new versions are released.

Firebug (software) Web development add-on for Firefox

Firebug is now inbuilt in Firefox.

iMacros Browser-based application for macro recording, editing and playback

iMacros is a browser based application for macro recording, editing and playback for web automation and testing. It is provided as a standalone application and extensions for the Mozilla Firefox, Google Chrome, and Internet Explorer web browsers. Developed by iOpus/Ipswitch, It adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. Running strictly JavaScript based macros were removed in later versions of iMacros browser extensions. However, users can use alternative browser like Pale Moon, based on older version of Mozilla Firefox to use JavaScript files for web based automated testing with Moon Tester Tool.

ItsNat Natural AJAX, is an open-source Java component-based Ajax framework.

Web development tools

Web development tools allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

Web storage, sometimes known as DOM storage, provides web apps with methods and protocols for storing client-side data. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information sent in the HTTP request header. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

WebGL JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

PDF.js PDF viewer in JavaScript included in Mozilla Firefox

PDF.js or pdf.js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas. The project is led by the Mozilla Foundation after Andreas Gal launched it in 2011.

Ember.js

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.