tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

index.rst (2748B)


      1 ==========================
      2 Page inspector 3-pane mode
      3 ==========================
      4 
      5 This article explains how to use the Page Inspector's 3-pane mode.
      6 
      7 Feature summary
      8 ***************
      9 
     10 The :doc:`Page Inspector <../index>` has a **3-Pane mode**. When activated, this allows you to see the following simultaneously:
     11 
     12 
     13 - The :doc:`HTML pane <../how_to/examine_and_edit_html/index>` on the left hand side, as usual.
     14 
     15 - The :ref:`CSS Rules <page-inspector-how-to-examine-and-edit-css-examine-css-rules>` in the middle in their own separate pane, rather than as a tab.
     16 
     17 - The other CSS related features — such as :ref:`Computed styles view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`, :doc:`Animations view <../how_to/work_with_animations/index>`, and :doc:`Fonts view <../how_to/edit_fonts/index>` — in tabs on the right hand side, as usual.
     18 
     19 .. image:: 3-pane-view-final.png
     20  :alt: The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right
     21  :class: border
     22 
     23 .. note::
     24 
     25  At narrower browser window widths, the tabs appear below the CSS Rules pane.
     26 
     27 
     28 Having the CSS Rules in their own pane is very useful because it allows you to not only inspect your HTML and edit the CSS applied to it, but also see the effect this has on CSS features such as computed styles and grids in real time. You just need to have the relevant tab open to see the effect.
     29 
     30 A brief walkthrough
     31 *******************
     32 
     33 The 3-pane inspector is disabled by default. It is enabled via a toggle control found in the tabs pane on the left hand side.
     34 
     35 .. image:: toggle-icon-final.png
     36  :alt: a view of the tabs panel, showing the 2 to 3 pane toggle icon
     37  :class: center
     38 
     39 Press the toggle control to toggle between the 2- and 3-pane views.
     40 
     41 .. image:: 2-pane-view-final.png
     42  :alt: The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right
     43  :class: border
     44 
     45 
     46 .. image:: 3-pane-view-final.png
     47 :alt: The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right
     48 :class: border
     49 
     50 
     51 With the 3-pane mode enabled, you can observe live changes in CSS features as you edit the rules applied to the page. For example, you could edit a `CSS Grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout>`_ property and observe the change immediately in the :doc:`Grid Inspector <../how_to/examine_grid_layouts/index>`.
     52 
     53 .. raw:: html
     54 
     55  <iframe width="560" height="315" src="https://www.youtube.com/embed/ELS2OOUvxIw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     56  <br/>
     57  <br/>