index.rst (2253B)
1 =================== 2 DOM Property Viewer 3 =================== 4 5 .. container:: block_quote 6 7 The DOM Property Viewer is disabled by default. Enable it in the :ref:`Developer Tools Settings <tool-toolbox-settings>` 8 9 The DOM Property Viewer lets you inspect the properties of the `DOM <https://developer.mozilla.org/en-US/docs/Glossary/DOM>`_ as an expandable tree structure, starting from the `window <https://developer.mozilla.org/en-US/docs/Web/API/Window>`_ object of the current page or the :doc:`selected iframe <../working_with_iframes/index>`. 10 11 .. image:: dom_inspector.png 12 :class: center 13 14 15 Enabling the DOM Property Viewer 16 ******************************** 17 18 The DOM Property Viewer is not enabled by default. To enable it, open the :ref:`developer tools settings <tool-toolbox-settings>` and check the "DOM" box under "Default Firefox Developer Tools". 19 20 21 Opening the DOM Property Viewer 22 ******************************* 23 24 Once enabled, you can select the *DOM* panel in the Web Developer Tools, accessible from the Browser Tools submenu 25 26 The :doc:`Toolbox <../tools_toolbox/index>` will appear at the bottom of the browser window, with the DOM Property Viewer activated. It's just called "DOM" in the Toolbox. 27 28 DOM Property Viewer user interface 29 ********************************** 30 31 DOM tree 32 -------- 33 34 The different properties of the DOM are displayed as an expandable tree. The left-hand side shows the property's name, and the right-hand side shows its value. Up to three properties of an object and items of an array are displayed. If a property has more elements than this, you'll see a "more..." annotation, and will need to click the property to see all elements. A lock icon indicates that a property is not writable. 35 36 Refreshing the display 37 ---------------------- 38 39 If the DOM changes you can hit the *Refresh* button to update the display: 40 41 .. image:: dom_inspector_refresh_button.png 42 :alt: Button to update the DOM Inspector display 43 :class: center 44 45 Filtering 46 --------- 47 48 There is a search box within the toolbar: 49 50 .. image:: dom_inspector_search_box.png 51 :class: center 52 53 This filters the list to show only items which match the search term. Items match the search term if their name contains the search term. Matching is case-sensitive.