Inspecting JS Properties with Firefox DOM Property Viewer

This article provides a comprehensive overview of how the DOM Property Viewer in the Firefox Developer Tools inspects JavaScript properties attached to a selected HTML element. You will learn how the tool bridges the gap between static HTML markup and dynamic JavaScript objects, how to trigger the inspection of a specific node, how the viewer organizes the JavaScript prototype chain, and how it safely evaluates live property values and getters during the debugging process.

Mapping HTML Elements to JavaScript Objects

When a webpage loads, the browser parses the HTML markup and builds the Document Object Model (DOM). Behind the scenes, Firefox’s JavaScript engine (SpiderMonkey) represents every HTML element as a JavaScript object.

When you select an HTML element in the Firefox Inspector, the Developer Tools assign a temporary reference to that element, known as $0. To inspect its JavaScript properties, you can right-click the highlighted HTML node in the Inspector and select Show DOM Properties. This action opens the split console and automatically passes the selected element into the inspection viewer. Instead of showing standard HTML attributes (like class="header"), the viewer queries the JavaScript engine for the underlying object's memory reference and retrieves all keys, values, and methods bound to that specific instance.

Traversing the Prototype Chain

JavaScript uses prototypal inheritance, meaning a single HTML element inherits properties and methods from a hierarchy of parent objects. The Firefox property viewer inspects the selected element by walking up this prototype chain and grouping the properties accordingly.

When you expand the inspected element, you will see its direct properties listed alphabetically, followed by a <prototype> property. Expanding the <prototype> reveals the inheritance hierarchy, which typically follows this exact path:

  1. Element-Specific Prototype: Properties unique to that tag (e.g., HTMLInputElementPrototype or HTMLDivElementPrototype).
  2. HTMLElementPrototype: Properties shared by all HTML elements, such as innerText, offsetHeight, and dataset.
  3. ElementPrototype: General XML/HTML element properties like classList, clientWidth, and getAttribute().
  4. NodePrototype: DOM tree properties such as childNodes, parentNode, and textContent.
  5. EventTargetPrototype: Event-handling methods including addEventListener() and dispatchEvent().
  6. Object: The base JavaScript object methods like hasOwnProperty() and toString().

By segmenting properties into these collapsible prototype levels, Firefox makes it clear whether a property is defined directly on the element by a script or inherited natively from the browser's DOM specification.

Evaluating Live Values and Nested Objects

Unlike the HTML Inspector, which shows the static markup structure, the DOM Property Viewer reads the live state of the element's JavaScript properties at the exact moment of inspection.

  • Primitive Values: Strings, numbers, and booleans (such as an input element's current value, or its scrollTop position) are displayed immediately next to the property name.
  • Nested Objects: Properties that return other objects—such as style (a CSSStyleDeclaration object), dataset (a DOMStringMap), or children (an HTMLCollection)—are rendered with an expandable arrow. Clicking the arrow prompts the viewer to fetch the child properties of that sub-object on demand, saving memory by not loading the entire DOM tree at once.

Safely Handling JavaScript Getters

Many DOM properties are not simple static values; they are "getters"—functions that execute code to calculate and return a value when accessed. To prevent the inspection process from accidentally triggering side effects or altering the state of your web application, the viewer does not always evaluate custom or complex getters automatically.

Instead, it identifies these properties and displays a small Invoke getter button (often represented by a >> icon) next to the property name. When you click this button, Firefox executes the getter function in the context of the selected HTML element and replaces the button with the newly returned value.

Filtering and Interacting with Properties

Because a standard HTML element inherits hundreds of properties and methods, the DOM Property Viewer provides interactive tools to manage the data:

  • Searching: If you use the standalone DOM tab in the Developer Tools toolbar, a filter bar at the top allows you to type a string and dynamically hide any properties that do not match your query.
  • Modifying Values: While most native DOM properties are read-only, custom JavaScript properties attached to the element by your scripts can often be edited directly or manipulated via the console using the $0.propertyName syntax.
  • Context Menu Actions: Right-clicking any inspected property allows you to copy its exact value, copy the property path to your clipboard, or store the specific property as a global variable (e.g., temp0) for further testing in the Web Console.