index.rst (8058B)
1 ======== 2 Settings 3 ======== 4 5 .. _tool-toolbox-settings: 6 7 Opening Settings 8 **************** 9 10 The Developer Tools settings can be opened by clicking the ... (ellipsis) icon on the right of the tab. 11 12 .. image:: devtools_layoutmenu.png 13 :class: center 14 15 The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window. 16 17 **Show split console** adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output. 18 19 .. image:: split_console.png 20 :class: center 21 22 The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then: 23 24 25 - click the "Settings" command in the menu: 26 27 .. image:: devtools_menu.png 28 :class: border 29 30 - or press :kbd:`F1` to toggle between the active tool and the Settings pane 31 32 33 The Settings pane looks something like this: 34 35 .. image:: dev_tools_settings.png 36 :alt: Depicts the Toolbox options 37 :class: center 38 39 40 Categories 41 ********** 42 43 Default Firefox Developer Tools 44 ------------------------------- 45 46 This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default. 47 48 49 Available Toolbox Buttons 50 ------------------------- 51 52 This group of checkboxes determines which tools get :ref:`an icon in the Toolbox's toolbar <tools-toolbox-extra-tools>`. 53 54 If the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes. 55 56 57 .. _settings-themes: 58 59 Themes 60 ****** 61 62 This enables you to choose one of two themes. 63 64 - There's a light theme, which is the default: 65 66 .. image:: theme-light.png 67 :alt: Light theme for DevTools 68 :class: border 69 70 - A dark theme (the default on `Firefox Developer Edition <https://www.mozilla.org/en-US/firefox/developer/>`_): 71 72 .. image:: theme-dark.png 73 :alt: Dark theme for DevTools 74 :class: border 75 76 77 .. _settings-common-preferences: 78 79 Common preferences 80 ------------------ 81 82 Settings that apply to more than one tool. There's just one of these: 83 84 *Enable persistent logs* 85 A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page. 86 87 .. note:: 88 89 If Common Preferences is not included in the Settings, Web Console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true 90 91 92 .. _settings-inspector: 93 94 Inspector 95 --------- 96 97 *Show browser styles* 98 A setting to control whether styles applied by the browser (`user-agent styles <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction>`_) should be displayed in the Inspector's :doc:`Rules view <../page_inspector/how_to/examine_and_edit_css/index>`. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's :ref:`Computed view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`. 99 100 *Truncate DOM attributes* 101 By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference ``devtools.markup.collapseAttributes``. To change the threshold at which attributes are truncated, you can edit the about:config preference ``devtools.markup.collapseAttributeLength``. 102 103 *Default color unit* 104 A setting to control how colors are represented in the inspector: 105 106 - Hex 107 - HSL(A) 108 - RGB(A) 109 - HWB 110 - color name 111 - As authored. 112 113 114 *Enable layout panel* 115 Enable the experimental layout panel. This setting only exists in Firefox Nightly. 116 117 118 .. _settings-web-console: 119 120 Web Console 121 ----------- 122 123 *Enable split console* 124 Enables or disables the split console feature, disabling it will remove it from the Toolbar menu and disable its hotkey :kbd:`Esc` 125 126 *Enable timestamps* 127 Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps. 128 129 *Enable new console frontend* 130 Switch to the experimental new console. This setting only exists in Firefox Nightly. 131 132 133 .. _settings-debugger: 134 135 Debugger 136 -------- 137 138 *Enable Source Maps* 139 Enable :doc:`source map support <../debugger/how_to/use_a_source_map/index>` in the debugger. 140 141 *Enable new debugger frontend* 142 Enable the new debugger. This setting only exists in Firefox Nightly. 143 144 145 146 .. _settings-style-editor: 147 148 Style Editor 149 ------------ 150 151 *Show original sources* 152 When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. :ref:`Learn more about Style Editor support for CSS source maps <style-editor-source-map-support>`. With this setting checked, the :ref:`Page Inspector Rules view will also provide links to the original sources <page-inspector-how-to-examine-and-edit-css-link-to-css-file>`. 153 154 *Autocomplete CSS* 155 Enable the Style Editor to offer autocomplete suggestions. 156 157 158 Screenshot Behavior 159 ------------------- 160 161 *Screenshot to clipboard* 162 When you click the icon for the :doc:`Screenshot tool <../taking_screenshots/index>`, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). 163 164 *Play camera shutter sound* 165 When you click the icon for the :doc:`Screenshot tool <../taking_screenshots/index>`, play a shutter sound. 166 167 168 169 .. _settings-editor-preferences: 170 171 Editor Preferences 172 ****************** 173 174 Preferences for the `CodeMirror <https://codemirror.net/>`_ source editor, which is included in Firefox and used by several developer tools, including the :doc:`Style Editor <../style_editor/index>`. 175 176 *Detect indentation* 177 Auto-indent new lines based on the current indentation. 178 179 *Autoclose brackets* 180 Determines whether typing an opening character like ``[`` or ``{`` will cause the editor to insert the matching closing character ``]`` or ``}`` for you. 181 182 *Indent using spaces* 183 When checked, indentation will be performed using spaces, when off, the editor will use tabs instead. 184 185 *Tab size* 186 The frequency of tab stops in the editor. Select 2, 4, or 8. 187 188 *Keybindings* 189 Choose the default CodeMirror keybindings or keybindings from one of several popular editors: 190 191 - Vim 192 - Emacs 193 - Sublime Text 194 195 196 .. _settings_advanced_settings: 197 198 Advanced settings 199 ***************** 200 201 *Show Gecko platform data* 202 A setting to control whether or not profiles should include Gecko platform symbols. 203 204 *Disable HTTP Cache* 205 Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. 206 207 .. note:: 208 209 Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not `Service Workers <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API>`_/the `Cache API <https://developer.mozilla.org/en-US/docs/Web/API/Cache>`_.</div> 210 211 *Disable JavaScript* 212 Reload the current tab with JavaScript disabled. 213 214 *Enable Service Workers over HTTP* 215 Enable Service Worker registrations from insecure websites. 216 217 *Enable browser chrome and add-on debugging toolboxes* 218 Enable you to use developer tools in the context of the browser itself, and not only web content. 219 220 *Enable remote debugging* 221 Enable the developer tools debug remote Firefox instances. 222 223 *Enable custom formatters* 224 Allow websites to define :doc:`custom formatters <../custom_formatters/index>` for JavaScript objects.