index.rst (7574B)
1 ==== 2 Tips 3 ==== 4 5 General 6 ******* 7 8 Screenshots: 9 10 .. |image1| image:: screenshot_button.png 11 :alt: Button to take screenshots of the entire page 12 :width: 20 13 14 - Entire page: Click the screenshot button (|image1| :ref:`needs to be enabled <tools-toolbox-extra-tools>` first). 15 - Viewport: Click the screenshot button (|image1|) in :ref:`Responsive Design Mode <responsive-design-mode-camera-button>`. 16 - Node: Right-click a node within the Inspector and click :ref:`"Screenshot Node" <taking-screenshots-of-an-element>`. 17 - Via :doc:`Web Console command <../web_console/helpers/index>`: ``screenshot <filename.png> --fullpage``. 18 19 20 Settings: 21 22 - Choose between a :ref:`light and a dark theme <settings-themes>` for the developer tools. 23 - :ref:`Change the keyboard bindings <settings-editor-preferences>` to Vim, Emacs or Sublime Text if you're used to different shortcuts. 24 - Check or uncheck the different tools to enable or disable them. (There are more than the default tools!) 25 26 27 Page Inspector 28 ************** 29 30 In the :ref:`markup view <page_inspector_ui_tour_html_pane>`: 31 32 33 - Press :kbd:`H` with a node selected to hide/show it. 34 - Press :kbd:`Backspace` or :kbd:`Del` with a node selected to delete it. 35 - :kbd:`Alt` + click on a node to expand or collapse it and all its descendants. 36 - Click on the last :ref:`breadcrumb button <page-inspector-how-to-examine-and-edit-html-breadcrumbs>` to scroll the selection into view in the inspector. 37 - Click the "ev" icon besides a node to :doc:`see all event listeners attached to it <../page_inspector/examine_event_listeners/index>`. 38 - Press :kbd:`S` with a node selected to see it in the page (same as right-click a node and click :ref:`Scroll Into View <page_inspector_how_to_examine_and_edit_scroll_into_view>`). 39 - Right-click a node and click :ref:`Use in Console<page_inspector_how_to_examine_and_edit_html_use_in_console>` to :doc:`command line <../web_console/the_command_line_interpreter/index>` as ``tempN`` variable. 40 41 42 When :ref:`selecting elements <page_inspector_select_element_button>`: 43 44 45 - :kbd:`Shift` + click to select an element but keep selecting (picker mode doesn't disengage). 46 - Use :kbd:`←`/:kbd:`→` to navigate to parents/children elements (if they're hard to select). 47 48 49 In the :ref:`rules view <page_inspector_ui_tour_rules_view>`: 50 51 .. |image2| image:: picker.png 52 :width: 20 53 54 .. |image3| image:: filter.png 55 :width: 20 56 57 - Click the inspector icon |image2| next to any selector to highlight all elements that match it. 58 - Click the inspector icon |image2| next to the ``element{}`` rule to lock the highlighter on the current element. 59 - Right-click any property and select "Show MDN Docs" to view the MDN docs for this property. 60 - Click on the filter icon |image3| next to an overridden property to :ref:`find which other property overrides it <page-inspector-how-to-examine-and-edit-css-overridden-declarations>`. 61 - Right-click on a name, value, or rule to copy anything from the name, the value, the declaration or the whole rule to your clipboard. 62 63 64 Web Console 65 *********** 66 67 In all panels: 68 69 - :kbd:`Esc` opens the :doc:`split console <../web_console/split_console/index>`; useful when debugging, or inspecting nodes 70 71 72 In the :doc:`command line <../web_console/the_command_line_interpreter/index>`: 73 74 75 - :ref:`$0 <web_console_helpers_$0>` references the currently selected node. 76 - :ref:`$() <web_console_helpers_$>` is a shortcut to `document.querySelector() <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>`_ 77 - :ref:`$$() <web_console_helpers_$$>` returns an array with the results from `document.querySelectorAll() <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll>`_. 78 - :ref:`$$$() <web_console_helpers_$$$>` returns an array of all the elements matching the selector, even when they are in the shadow DOM. 79 - :ref:`copy <web_console_helpers_copy>` copies anything as a string. 80 - Right-click a node in the Inspector and click :ref:`Use in Console <page_inspector_how_to_examine_and_edit_html_use_in_console>` to create a :ref:`temp*N* <web_console_helpers_tempn>` variable for it. 81 - `console.table() <https://developer.mozilla.org/en-US/docs/Web/API/console/table>`_ displays tabular data as table. 82 - :ref:`help <web_console_helpers_help>` opens the MDN page describing the available commands. 83 - ``:screenshot <filename.png> --fullpage`` saves a screenshot to your downloads directory using the optional file name. If no filename is included, the file name will be in this format: 84 85 .. code-block:: 86 87 Screen Shot date at time.png 88 89 The ``--fullpage`` parameter is optional. If you include it, the screenshot will be of the whole page, not just the section visible in the browser windows. The file name will have ``-fullpage`` appended to it as well. See :doc:`Web Console Helpers <../web_console/helpers/index>` for all parameters. 90 91 92 In the console output: 93 94 95 - Click on the inspector icon |image2| next to an element in the output to :ref:`select it within the Inspector <web_console_rich_output_highlighting_and_inspecting_dom_nodes>`. 96 - Check :ref:`"Enable persistent logs" <settings-common-preferences>` in the settings to keep logged messages from before even after navigation. 97 - Check :ref:`"Enable timestamps" <settings-web-console>` in the settings to show timestamps besides the logged messages. 98 99 100 Debugger 101 ******** 102 103 .. |image4| image:: black_boxing.png 104 :width: 20 105 106 107 - Skip JavaScript libraries in debugging sessions via the black box icon |image4|. 108 - Press :kbd:`Ctrl` + :kbd:`Alt` + :kbd:`F` to search in all scripts. 109 - Press :kbd:`Ctrl` + :kbd:`D` to search for a function definition. 110 - Press :kbd:`Ctrl` + :kbd:`L` to go to a specific line. 111 112 113 Style Editor 114 ************ 115 116 .. |image5| image:: import_button.png 117 :alt: Button to import a style sheet from the file system 118 :width: 20 119 120 .. |image6| image:: create_style_sheet_button.png 121 :alt: Button to create a new style sheet 122 :width: 20 123 124 - The black box icon |image4| in the style sheet pane toggles the visibility of a style sheet. 125 - Click an :ref:`@media rule <style-editor-the-at-rules-sidebar>` to apply it in :doc:`Responsive Design Mode <../responsive_design_mode/index>`. 126 - Click the import button |image5| to import a style sheet or the create button |image6| to create a new one. 127 - Click the options button in the :ref:`style sheet pane <style-editor-the-style-sheet-pane>` and click :ref:`"Show original sources" <style-editor-source-map-support>` to toggle the display of CSS preprocessor files. 128 129 130 Network Monitor 131 *************** 132 133 - Click the request summary to :doc:`compare performance of cache vs. no-cache page loading <../network_monitor/performance_analysis/index>`. 134 - When a request is selected click :ref:`"Edit and Resend" <network-monitor-request-list-edit-and-resend>` to modify its headers and send it again. 135 - Check :ref:`"enable persistent logs" <settings-common-preferences>` in the settings to keep requests from before even after navigation. 136 - Hover the :ref:`"js" icon within the "Cause" column <request-list-requst-list-cause-column>` to see the JavaScript stack trace, which caused the request. 137 - Check :ref:`"Disable HTTP Cache (when toolbox is open)" <settings_advanced_settings>` in the settings to disable the network cache while debugging network issues. 138 139 140 Storage Inspector 141 ***************** 142 143 - Right-click the column headers to open a menu allowing to toggle the display of the columns. 144 - Right-click an entry and click "Delete *name*" to delete it or "Delete All" to delete all entries. 145 - Select an entry to see the parsed value of it in the sidebar.