index.rst (5681B)
1 ======= 2 UI Tour 3 ======= 4 5 This article is a quick tour of the main sections of the Page Inspector's user interface. 6 7 It covers the three top-level components of the Inspector's UI: 8 9 - the "Select element" button 10 - the HTML pane 11 - the CSS pane 12 13 14 .. image:: pageinspector.png 15 :alt: The all-new Inspector panel in Firefox 57. 16 17 This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector. 18 19 20 .. _page_inspector_select_element_button: 21 22 Select element button 23 ********************* 24 25 The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection: 26 27 .. image:: select_element_button.png 28 :alt: This is the button in Firefox 57 Inspector you can use to select elements on a web page. 29 :class: center 30 31 Note that it's actually part of the :ref:`main toolbox toolbar <tools-toolbox-toolbar>`, so it's immediately accessible from any tool, not just the Inspector. 32 33 To learn how to select an element, see the guide to :doc:`selecting an element <../how_to/select_an_element/index>`. 34 35 36 .. _page_inspector_ui_tour_html_pane: 37 38 HTML pane 39 ********* 40 41 The Inspector is split into two or three sections, depending on your settings. You can toggle the 3-pane view of the Inspector. The following image shows the 2-pane layout: 42 43 .. image:: inspector_2pane.png 44 :alt: These are the tasty new HTML and CSS panes in Firefox 57. 45 :class: border 46 47 48 In 2-pane mode, the Inspector includes the HTML Pane, and the CSS Pane, which can contain one of six tools: 49 50 - Rules view 51 - Layout view 52 - Computed view 53 - Changes view 54 - Compatibility view (Firefox Developer Edition 77 and later) 55 - Fonts view 56 - Animations view 57 58 The following image shows the 3-pane mode which moves the CSS Rules view into a separate pane in the center of the Inspector: 59 60 .. image:: inspector_tool.png 61 :class: border 62 63 As you can see, the CSS pane has moved into the center of the Inspector. To learn more about the structure of the HTML pane, see the guide to :doc:`examining and editing HTML <../how_to/examine_and_edit_html/index>`. 64 65 66 .. _page_inspector_ui_tour_rules_view: 67 68 Rules view 69 ********** 70 71 The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific. See above. 72 73 .. image:: indpextor_rules.png 74 :alt: The rules view within the Inspector. 75 :class: border 76 77 See :doc:`Examine and edit CSS <../how_to/examine_and_edit_css/index>` for more details. 78 79 80 Layout view 81 *********** 82 83 The Layout view displays the box model of the page. If the page includes any sections using either the Flexbox display model or CSS Grids, this view shows the Flexbox or Grid settings used on the page. 84 85 .. image:: inspector_layout.png 86 :class: border 87 88 To learn more about the Layout view, see :doc:`Examine and edit the box model <../how_to/examine_and_edit_the_box_model/index>`. 89 90 91 Changes view 92 ************ 93 94 When you are editing in the Rules view, you can see the changes you have made in the Changes view. 95 96 .. image:: track_changes.png 97 :class: border 98 99 .. _page_inspector_ui_tour_computed_view: 100 101 Computed view 102 ************* 103 104 The Computed view shows you the complete computed CSS for the selected element (The computed values are the same as what `getComputedStyle <https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle>`_ would return): 105 106 .. image:: inspector_computed.png 107 :alt: The Computed view within the Inspector 108 :class: border 109 110 To learn more about the CSS declarations listed in this view, see :ref:`Examine computed CSS <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`. 111 112 113 .. _page_inspector_ui_tour_compatibility_view: 114 115 Compatibility view 116 ****************** 117 118 Starting with Firefox Developer Edition version 77, the Compatibility view shows CSS compatibility issues, if any, for properties applied to the selected element, and for the current page as a whole. It shows icons for the browsers that *do* support the properties, and notes properties that are experimental or deprecated. 119 120 .. image:: compat_view.png 121 :alt: Screenshot of the Compatibility view 122 :class: center 123 124 125 - Click the name of the property to open the reference article for that property on *MDN Web Docs*. The "Browser compatibility" section of the article gives details of browser support for the property. 126 127 - In the **All Issues** section, click the name of the element that uses the property to select that element in the inspector. If more than one element has a given property applied to it, click the triangle to show all the occurrences. 128 129 - To configure the set of browsers you want the Compatibility view to check for, click **Settings** at the bottom of the panel. 130 131 .. image:: compat_panel_settings.png 132 :alt: Screenshot of the Settings for the Compatibility view 133 134 135 Untick the checkbox for any browser you are not interested in. As new browser versions are released, the version numbers in this list will be updated. 136 137 138 Fonts view 139 ********** 140 141 The Fonts view shows all the fonts in the page along with editable samples. 142 143 .. image:: inspector_fonts.png 144 :alt: The all-new Inspector panel in Firefox 57. 145 :class: border 146 147 See :doc:`View fonts <../how_to/edit_fonts/index>` for more details. 148 149 150 .. _page_inspector_ui_tour_animations_view: 151 152 Animations view 153 *************** 154 155 The Animations view gives you details of any animations applied to the selected element, and a controller to pause them: 156 157 .. image:: animation_detail.png 158 :alt: This is the Animations pane in the Firefox 57 Inspector. 159 :class: border 160 161 See :doc:`Work with animations <../how_to/work_with_animations/index>` for more details.