From b946222a47c8a58831fc40f5819da9907a04e6a9 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 15 Jul 2026 12:29:57 -0700 Subject: [PATCH 1/3] draft text --- microsoft-edge/devtools/dom/properties.md | 171 ++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 microsoft-edge/devtools/dom/properties.md diff --git a/microsoft-edge/devtools/dom/properties.md b/microsoft-edge/devtools/dom/properties.md new file mode 100644 index 0000000000..b2c403b450 --- /dev/null +++ b/microsoft-edge/devtools/dom/properties.md @@ -0,0 +1,171 @@ +--- +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 + +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](~). + + + +#### 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. + +You can iterate over the enumerable properties with the for … in loop or 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/) 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). From 710f59ef7e60d44d6bd1750e989a822237ad60d9 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 15 Jul 2026 14:00:57 -0700 Subject: [PATCH 2/3] upstream section urls --- microsoft-edge/devtools/dom/properties.md | 49 ++++++++++++++--------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/microsoft-edge/devtools/dom/properties.md b/microsoft-edge/devtools/dom/properties.md index b2c403b450..a249e09be5 100644 --- a/microsoft-edge/devtools/dom/properties.md +++ b/microsoft-edge/devtools/dom/properties.md @@ -22,26 +22,28 @@ ms.date: 07/15/2026 See the License for the specific language governing permissions and limitations under the License. --> # 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](#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: @@ -56,6 +58,7 @@ To open the **Properties** tab: ## Spot own properties + The **Properties** tab sorts and displays the object's own properties first and in bold font. @@ -64,6 +67,7 @@ The **Properties** tab sorts and displays the object's own properties first and ## 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. @@ -80,6 +84,7 @@ Additionally, prototype-specific properties are shown only on prototypes, not on ## Filter properties + To quickly find a property, start typing its name or value in the Filter input box. @@ -88,6 +93,7 @@ To quickly find a property, start typing its name or value in the Filter input b ## Show all properties + By default, the **Properties** tab doesn't show properties with null and undefined values. @@ -98,38 +104,43 @@ To see all properties, select the **Show all** checkbox. ## 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 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](~). +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 +![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. @@ -142,18 +153,20 @@ 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. +![Enumerable and non-enumerable properties] todo png -You can iterate over the enumerable properties with the for … in loop or Object.keys() method. +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 ()_. @@ -165,7 +178,7 @@ For more information on functions, see [Inspect functions](https://developer.chr > [!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/) and is authored by Sofia Emelianova. +> 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). From 1dab7decdf3448ca693680d0ac822b8e7e4557c6 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 15 Jul 2026 17:03:33 -0700 Subject: [PATCH 3/3] toc entry --- microsoft-edge/toc.yml | 4 ++++ 1 file changed, 4 insertions(+) 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: