diff --git a/microsoft-edge/devtools/dom/properties.md b/microsoft-edge/devtools/dom/properties.md new file mode 100644 index 0000000000..a249e09be5 --- /dev/null +++ b/microsoft-edge/devtools/dom/properties.md @@ -0,0 +1,184 @@ +--- +title: View the properties of DOM objects +description: View the properties of DOM objects. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 07/15/2026 +--- + +# View the properties of DOM objects + + +Use the **Properties** tab in the **Elements** tool to browse and filter properties of DOM objects. + +Detailed contents: +* [Open the Properties tab](#open-the-properties-tab) +* [Spot own properties](#spot-own-properties) +* [Find the origin of an inherited property](#find-the-origin-of-an-inherited-property) +* [Filter properties](#filter-properties) +* [Show all properties](#show-all-properties) +* [Understand properties](#understand-properties) + * [Simple properties](#simple-properties) + * [Objects and arrays](#objects-and-arrays) + * [Properties that correspond to DOM nodes](#properties-that-correspond-to-dom-nodes) + * [Own and inherited properties](#own-and-inherited-properties) + * [Enumerable and non-enumerable properties](#enumerable-and-non-enumerable-properties) + * [Methods](#methods) + + + +## Open the Properties tab + + +To open the **Properties** tab: + +1. Open DevTools. By default, the Elements panel opens. + +1. In the DOM tree, select a node. + +1. Click the **Properties** tab. If the tab isn't displayed, click ![More double_arrow] todo png, and then select **Properties** from the dropdown menu. + + ![The Properties tab in the Elements tool] todo png + + + +## Spot own properties + + +The **Properties** tab sorts and displays the object's own properties first and in bold font. + +![alt text] todo png + + + +## Find the origin of an inherited property + + +The **Properties** tab evaluates accessors on built-in elements and displays them on the object as inherited and in regular font. + +To find the origin of an inherited property, expand an object, then its [[Prototype]], then the nested [[Prototype]], and so on. + +![Tracing the size property up to its getter on the prototype chain] todo png + +In this example, you can trace where the inherited size property came from by locating the original own (bold) property on the prototype chain together with the corresponding getter. + +Additionally, prototype-specific properties are shown only on prototypes, not on objects. This makes it easier to diagnose objects. + +![Prototype-specific properties] todo png + + + +## Filter properties + + +To quickly find a property, start typing its name or value in the Filter input box. + +![Filter] todo png + + + +## Show all properties + + +By default, the **Properties** tab doesn't show properties with null and undefined values. + +To see all properties, select the **Show all** checkbox. + +![Properties with null values] todo png + + + +## Understand properties + + +The **Properties** tab in the **Elements** tool shows various kinds of properties. + + + +#### Simple properties +https://developer.chrome.com/docs/devtools/dom/properties#simple-properties + +Simple properties are pairs of `: `. + +![Simple properties] todo png + + + +#### Objects and arrays + + +Collapsible (arrow_right) properties are objects {} or arrays []. + +![Collapsible properties] todo png + +For more information on inspecting JavaScript objects, see [Inspect object properties] todo link. + + + +#### Properties that correspond to DOM nodes + + +Properties that correspond to DOM nodes are links. To select the relevant node in the DOM tree, click a link. + +![Link to the head DOM node] todo png + + + +#### Own and inherited properties + + +Properties in bold font are the object's own properties; they are defined directly on the object. + +Properties in regular font are inherited from the prototype chain. To display inherited properties, DevTools evaluates relevant accessors on built-in HTML elements. + +![Own and inherited properties] todo png + +DevTools lists own properties first, to make them easier to spot. + + + +#### Enumerable and non-enumerable properties + + +Enumerable properties are bright in color. + +Non-enumerable properties are muted. + +![Enumerable and non-enumerable properties] todo png + +You can iterate over the enumerable properties by using a `for … in` loop or the `Object.keys()` method. + + + +#### Methods + + +Methods are marked with an _f ()_. + +![Method] todo png + +For more information on functions, see [Inspect functions](https://developer.chrome.com/docs/devtools/console/reference#inspect-functions) (todo: add destination section downstream, link to it) in _Console features reference_. + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/dom/properties) and is authored by Sofia Emelianova. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 9ca30eff1c..2cab10387a 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -540,6 +540,10 @@ - name: Get started viewing and changing the DOM href: ./devtools/dom/index.md displayName: Elements tool + + - name: View the properties of DOM objects + href: ./devtools/dom/properties.md + displayName: Elements tool # ----------------------------------------------------------------------------- - name: Console tool items: