index.rst (4147B)
1 =========== 2 Rich output 3 =========== 4 5 When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it: 6 7 8 - :ref:`provides extra information for certain types <web_console_rich_output_type_specific>` 9 - :ref:`enables detailed examination of the object's properties <web_console_rich_output_examining_object_properties>` 10 - :ref:`provides richer information for DOM elements, and enables you to select them in the Inspector <web_console_rich_output_highlighting_and_inspecting_dom_nodes>` 11 12 13 .. _web_console_rich_output_type_specific: 14 15 Type-specific rich output 16 ************************* 17 18 The Web Console provides rich output for many object types, including the following: 19 20 21 .. list-table:: 22 :widths: 20 80 23 :header-rows: 0 24 25 * - ``Object`` 26 - .. image:: web-console-object.png 27 28 * - ``Date`` 29 - .. image:: web-console-date.png 30 31 * - ``Promise`` 32 - .. image:: web-console-promise.png 33 34 * - ``RegExp`` 35 - .. image:: web-console-regexp.png 36 37 * - ``Window`` 38 - .. image:: web-console-window.png 39 40 * - ``Document`` 41 - .. image:: web-console-document.png 42 43 * - ``Element`` 44 - .. image:: web-console-element.png 45 46 * - ``Event`` 47 - .. image:: webconsole-events.png 48 49 50 .. _web_console_rich_output_examining_object_properties: 51 52 Examining object properties 53 *************************** 54 55 When an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded. Click on the triangle, and the object will be expanded to show its contents: 56 57 .. image:: console_logobject.png 58 :class: border 59 60 61 You can use the arrow keys on your keyboard to navigate through objects displayed in the console. The right-arrow key opens the details of an object and the left-arrow key closes open objects. 62 63 64 .. _web_console_rich_output_examining_request_details: 65 66 Examining request details 67 ************************* 68 69 70 Similar to examining object details, you can see the details about a network request directly in the console. Click on the arrow next to the request and a details panel will open that is equivalent to the Headers panel in the Network Monitor tool. 71 72 .. raw:: html 73 74 <iframe width="560" height="315" src="https://www.youtube.com/embed/Cj3Pjq6jk9s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 75 <br/> 76 <br/> 77 78 79 Export output to the clipboard 80 ****************************** 81 82 Once you have output in the console window, you can save it to the clipboard by right-clicking on the output and selecting **Export visible messages to clipboard**: 83 84 .. image:: console_export.png 85 :class: center 86 87 88 This will copy all of the output to the clipboard. Then you can paste it into a document. The output will look something like this: 89 90 .. code-block:: 91 92 console.log(todoList) 93 Array(4) [ {…}, {…}, {…}, {…} ] 94 debugger eval code:1:9 95 undefined 96 97 If you expand objects, such as arrays, you get slightly different content. For example, by expanding the array in the above list, I get the following: 98 99 .. code-block:: 100 101 console.log(todoList) 102 (4) […] 103 104 0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 } 105 106 1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 } 107 108 2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 } 109 110 3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 } 111 112 length: 4 113 114 <prototype>: Array [] 115 debugger eval code:1:9 116 undefined 117 118 119 .. _web_console_rich_output_highlighting_and_inspecting_dom_nodes: 120 121 Highlighting and inspecting DOM nodes 122 ************************************* 123 124 If you hover the mouse over any DOM element in the console output, it's highlighted on the page: 125 126 .. image:: commandline-highlightnode.png 127 :class: center 128 129 In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the :doc:`Inspector <../../page_inspector/index>` with that node selected.