index.rst (4757B)
1 ======= 2 Toolbox 3 ======= 4 5 The Toolbox provides a single home for most of the developer tools that are built into Firefox. 6 7 There are three main ways to open the Toolbox: 8 9 - Right-click a mouse on any element in the page, and select **Inspect** from the popup menu. 10 11 - Open the Hamburger menu |image1| and select **More tools > Web Developer Tools**. 12 13 - Press :kbd:`Ctrl` + :kbd:`Shift` + :kbd:`I` on Windows and Linux, or :kbd:`Cmd` + :kbd:`Opt` + :kbd:`I` on OS X. See also :doc:`keyboard shortcuts <../keyboard_shortcuts/index>`. 14 15 .. |image1| image:: hamburger.png 16 :width: 20 17 18 19 By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it's docked: 20 21 .. image:: toolbox.png 22 :class: border 23 24 The window itself is split into two parts: a toolbar along the top, and a main pane underneath: 25 26 .. image:: toolbox-labelled.png 27 :class: border 28 29 .. note:: 30 31 You can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish. 32 33 34 .. _tools-toolbox-docking-mode: 35 36 Docking mode 37 ************ 38 39 By default, the Toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using :ref:`buttons in toolbar <tools-toolbox-toolbox-controls>`. 40 41 .. image:: docking-mode.png 42 :class: center 43 44 45 .. _tools-toolbox-toolbar: 46 47 Toolbar 48 ******* 49 50 The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window. 51 52 .. image:: toolbox-toolbar-labelled.png 53 :class: center 54 55 56 Node picker 57 *********** 58 59 On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See :doc:`Selecting elements <../page_inspector/how_to/select_an_element>` 60 61 62 Toolbox-hosted tools 63 ******************** 64 65 Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools: 66 67 - :doc:`Page Inspector <../page_inspector/index>` 68 - :doc:`Web Console <../web_console/index>` 69 - :doc:`JavaScript Debugger <../debugger/index>` 70 - :doc:`Network Monitor <../network_monitor/index>` 71 - :doc:`Style Editor <../style_editor/index>` 72 - :doc:`Performance <../performance/index>` 73 - :doc:`Memory Tool <../memory/index>` 74 - :doc:`Storage Inspector <../storage_inspector/index>` 75 - :doc:`Accessibility Inspector <../accessibility_inspector/index>` 76 - :doc:`Application Tool <../application/index>` 77 - :doc:`DOM Property Viewer <../dom_property_viewer/index>` 78 79 80 Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown). 81 82 83 .. _tools-toolbox-extra-tools: 84 85 Extra tools 86 *********** 87 88 Next there's an array of buttons that can be added or removed in the :ref:`settings <tool-toolbox-settings>`. None of these tools are enabled by default, but you can add them in the :doc:`developer tools settings <../settings/index>` 89 90 91 - :doc:`Select a frame as the currently targeted document <../working_with_iframes/index>` 92 - :doc:`Highlight painted area <../paint_flashing_tool/index>` 93 - :ref:`Take a screenshot of the entire page <taking_screenshots_taking_a_screenshot_of_the_page>`: take a screenshot of the complete web page and saves it in your Downloads directory 94 - :doc:`Toggle rulers for the page <../rulers/index>` 95 - :doc:`Measure a portion of the page <../measure_a_portion_of_the_page/index>`: measure a part of the website by selecting areas within the page 96 97 98 99 .. _tools-toolbox-toolbox-controls: 100 101 Toolbox controls 102 **************** 103 104 Finally there's a row of buttons to: 105 106 - close the window 107 - :doc:`Responsive Design Mode <../responsive_design_mode/index>` 108 109 110 There's also a meatball menu button that consists of following options: 111 112 - A group of options to toggle the toolbox to be docked bottom, right, left or even be a separate window by itself. 113 114 - access :doc:`developer tool settings <../settings/index>` 115 116 - :doc:`Toggle split console <../web_console/split_console/index>` 117 118 - two buttons leading to documentation and community 119 120 121 122 Settings 123 ******** 124 125 :doc:`See the separate page on the Developer Tools Settings <../settings/index>` 126 127 128 Main Pane 129 ********* 130 131 The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected. 132 133 :ref:`Toolbox shortcuts <keyboard-shortcuts-toolbox>` lists the shortcuts that work whenever the toolbox is open, no matter which tool is active. This same page also lists tool-specific keyboard shortcuts.