index.rst (5371B)
1 ================== 2 Taking screenshots 3 ================== 4 5 You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page. 6 7 .. _taking_screenshots_taking_a_screenshot_of_the_page: 8 9 10 Taking a screenshot of the page 11 ******************************* 12 13 .. |image1| image:: camera-icon.png 14 :width: 20 15 16 17 Use the screenshot icon: |image1| to take a full-page screenshot of the current page. 18 19 By default, the screenshot icon is not enabled. To enable it: 20 21 22 - visit the :doc:`Settings <../settings/index>` page 23 - find the section labeled "Available Toolbox Buttons" 24 - check the box labeled "Take a screenshot of the entire page". 25 26 27 You'll now see the icon in the toolbar: 28 29 .. raw:: html 30 31 <iframe width="560" height="315" src="https://www.youtube.com/embed/KB5V9uJgcS4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 32 <br/> 33 <br/> 34 35 Click the icon to take a screenshot of the current page. The screenshot is saved to your browser's "Downloads" directory: 36 37 .. raw:: html 38 39 <iframe width="560" height="315" src="https://www.youtube.com/embed/HKS6MofdXVE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 40 <br/> 41 <br/> 42 43 44 .. _taking-screenshots-of-an-element: 45 46 Taking a screenshot of an element 47 ********************************* 48 49 To take a screenshot of a single element in the page, activate the context menu on that element in the :ref:`Inspector's HTML pane <page_inspector_ui_tour_html_pane>`, and select "Screenshot Node". The screenshot is saved to the browser's "Downloads" directory: 50 51 .. raw:: html 52 53 <iframe width="560" height="315" src="https://www.youtube.com/embed/p2pjF_BrE1o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 54 <br/> 55 <br/> 56 57 58 Copying screenshots to the clipboard 59 ************************************ 60 61 You can also copy the screenshot to the clipboard. Just check the box in Settings labeled "Screenshot to clipboard": 62 63 .. raw:: html 64 65 <iframe width="560" height="315" src="https://www.youtube.com/embed/AZedFGh6F78" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 66 <br/> 67 <br/> 68 69 Now, whenever you take a screenshot, the screenshot is also copied to the clipboard. 70 71 72 Taking screenshots with the web console 73 *************************************** 74 75 If you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, you can use the ``:screenshot`` helper function in the :doc:`Web Console <../web_console/index>`. 76 77 Type ``:screenshot`` in the Web Console to create a screenshot of the current page. By default, the image file will be named ``Screen Shot yyy-mm-dd at hh.mm.ss.png``. 78 79 .. note:: 80 81 **Tip**: You could type ``:s`` and then hit :kbd:`Tab` to autocomplete ``:screenshot``. 82 83 The command has the following optional parameters: 84 85 .. list-table:: 86 :widths: 20 20 60 87 :header-rows: 1 88 89 * - Command 90 - Type 91 - Description 92 93 * - ``--clipboard`` 94 - boolean 95 - When present, this parameter will cause the screenshot to be copied to the clipboard. Prevents saving to a file unless you use the ``--file`` option to force file writing. 96 97 * - ``--delay`` 98 - number 99 - The number of seconds to delay before taking the screenshot; you can use an integer or floating point number. This is useful if you want to pop open a menu or invoke a hover state for the screenshot. 100 101 * - ``--dpr`` 102 - number 103 - The device pixel ratio to use when taking the screenshot. Values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images. 104 105 * - ``--file`` 106 - boolean 107 - When present, the screenshot will be saved to a file, even if other options (e.g. ``--clipboard``) are included. 108 109 * - ``--filename`` 110 - string 111 - The name to use in saving the file. The file should have a ".png" extension. 112 113 * - ``--fullpage`` 114 - boolean 115 - If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "<span style="white-space: nowrap;">-fullpage</span>" will be appended to the file name. 116 117 * - ``--selector`` 118 - string 119 - A CSS selector that selects a single element on the page. When supplied, only this element and its descendants will be included in the screenshot. 120 121 122 .. note:: 123 If you capture an image to a filename like ``test.png``, and then you capture to that same filename, the new image will overwrite the old image. So if you’re using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to change the filename for each new capture. 124 125 126 .. note:: 127 Thanks to Eric Meyer for his enthusiasm for our screenshot feature, and help! Small portions of this section have been borrowed from his `Firefox’s :screenshot command <https://meyerweb.com/eric/thoughts/2018/08/24/firefoxs-screenshot-command-2018/>`_ article.