index.rst (7003B)
1 =================== 2 Web Console Helpers 3 =================== 4 5 The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier. 6 7 $(selector, element) 8 Looks up a CSS selector string ``selector`` , returning the first node descended from ``element`` that matches. If unspecified, ``element`` defaults to ``document``. Equivalent to `document.querySelector() <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>`_ or calls the $ function in the page, if it exists. 9 10 See the `QuerySelector code snippet <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>`_. 11 12 .. _web_console_helpers_$$: 13 14 $$(selector, element) 15 Looks up a CSS selector string ``selector``, returning an array of DOM nodes descended from ``element`` that match. If unspecified, ``element`` defaults to ``document``. This is similar to `document.querySelectorAll() <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll>`_, but returns an array instead of a `NodeList <https://developer.mozilla.org/en-US/docs/Web/API/NodeList>`_. 16 17 .. _web_console_helpers_$$$: 18 19 $$$(selector, element) 20 Looks up a CSS selector string ``selector``, returning an array of DOM nodes descended from ``element`` that match, including elements in the shadow DOM. If unspecified, ``element`` defaults to ``document``. 21 22 .. _web_console_helpers_$0: 23 24 $0 25 The currently-inspected element in the page. 26 27 .. _web_console_helpers_$: 28 29 $_ 30 Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4. 31 32 $x(xpath, element, resultType) 33 Evaluates the `XPath <https://developer.mozilla.org/en-US/docs/Web/XPath>`_ ``xpath`` expression in the context of ``element`` and returns an array of matching nodes. If unspecified, ``element`` defaults to ``document``. The resultType parameter specifies the type of result to return; it can be an `XPathResult constant <https://developer.mozilla.org/en-US/docs/Web/API/XPathResult#constants>`_, or a corresponding string: ``"number"``, ``"string"``, ``"bool"``, ``"node"``, or ``"nodes"``; if not provided, ``ANY_TYPE`` is used. 34 35 :block 36 Followed by an unquoted string, blocks requests where the URL contains that string. In the :doc:`Network Monitor <../../network_monitor/index>`, the string now appears and is selected in the :ref:`Request Blocking sidebar <network_monitor_blocking_specific_urls>`. Unblock with ``:unblock``. 37 38 clear() 39 Clears the console output area. 40 41 clearHistory() 42 Just like a normal command line, the console command line :ref:`remembers the commands you've typed <command_line_interpreter_execution_history>`. Use this function to clear the console's command history. 43 44 .. _web_console_helpers_copy: 45 46 copy() 47 Copies the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its `outerHTML <https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML>`_ is copied. Otherwise, `JSON.stringify <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify>`_ will be called on the argument, and the result will be copied to the clipboard. 48 49 **help()** (deprecated) 50 51 .. _web_console_helpers_help: 52 53 :help 54 Displays help text. Actually, in a delightful example of recursion, it brings you to this page. 55 56 inspect() 57 Given an object, generates:doc:`rich output <../rich_output/index>` for that object. Once you select the object in the output area, you can use the arrow keys to navigate the object. 58 59 keys() 60 Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for `Object.keys <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys>`_. 61 62 pprint() (deprecated) 63 Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays. 64 65 :screenshot 66 Creates a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named with the following format: 67 68 ``Screen Shot yyy-mm-dd at hh.mm.ss.png`` 69 70 The command has the following optional parameters: 71 72 .. list-table:: 73 :widths: 20 20 60 74 :header-rows: 1 75 76 * - Command 77 - Type 78 - Description 79 80 * - ``--clipboard`` 81 - boolean 82 - When present, this parameter will cause the screenshot to be copied to the clipboard. 83 84 * - ``--dpr`` 85 - number 86 - The device pixel ratio to use when taking the screenshot. 87 88 * - ``--file`` 89 - boolean 90 - When present, the screenshot will be saved to a file, even if other options (e.g. ``--clipboard``) are included. 91 92 * - ``--filename`` 93 - string 94 - The name to use in saving the file. The file should have a ".png" extension. 95 96 * - ``--fullpage`` 97 - boolean 98 - 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, ``-fullpage`` will be appended to the file name. 99 100 * - ``--selector`` 101 - string 102 - The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot. 103 104 105 :unblock 106 Followed by an unquoted string, removes blocking for URLs containing that string. In the :doc:`Network Monitor <../../network_monitor/index>`, the string is removed from the :ref:`Request Blocking sidebar <network_monitor_blocking_specific_urls>`. No error is given if the string was not previously blocked. 107 108 values() 109 Given an object, returns a list of the values on that object; serves as a companion to ``keys()``. 110 111 112 Please refer to the `Console API <https://developer.mozilla.org/en-US/docs/Web/API/console>`_ for more information about logging from content. 113 114 115 Variables 116 ********* 117 118 .. _web_console_helpers_tempn: 119 120 temp*N* 121 The :ref:`Use in Console <page_inspector_how_to_examine_and_edit_html_use_in_console>` option in the Inspector generates a variable for a node named ``temp0``, ``temp1``, ``temp2``, etc. referencing the node. 122 123 124 Examples 125 ******** 126 127 Looking at the contents of a DOMnode 128 ------------------------------------ 129 130 Let's say you have a DOMnode with the class"title". In fact, this page you're reading right now has one, so you can open up the Web Console and try this right now. 131 132 Let's take a look at the contents of that node by using the ``$()`` and ``inspect()`` functions: 133 134 .. code-block:: javascript 135 136 inspect($(".title")) 137 138 139 This automatically generates rich output for the object, showing you the contents of the first DOMnode that matches the CSS selector ``".title"``, which is of course the first element with class ``"title"``. You can use the up- and down-arrow keys to navigate through the output, the right-arrow key to expand an item, and the left-arrow key to collapse it. 140 141 142 See also 143 ******** 144 145 - `console <https://developer.mozilla.org/en-US/docs/Web/API/console>`_