diff options
Diffstat (limited to 'files/pt-pt/tools/web_console/helpers/index.html')
| -rw-r--r-- | files/pt-pt/tools/web_console/helpers/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/pt-pt/tools/web_console/helpers/index.html b/files/pt-pt/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..c789f98427 --- /dev/null +++ b/files/pt-pt/tools/web_console/helpers/index.html @@ -0,0 +1,142 @@ +--- +title: Ajuda da Consola da Web +slug: Tools/Consola_da_Web/Ajuda +tags: + - Depuração + - Desenvolvimento da Web + - JavaScript + - consola da Web +translation_of: Tools/Web_Console/Helpers +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Os_comandos">Os comandos</h2> + +<p>The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.</p> + +<dl> + <dt id="$"><code>$(selector, element)</code></dt> + <dd> + <p>Looks up a CSS selector string <code>selector</code> , returning the first node descended from <code>element</code> that matches. If unspecified, <code>element</code> defaults to <code>document</code>. Equivalent to {{ domxref("document.querySelector()") }} or calls the $ function in the page, if it exists.</p> + + <p>See the <a href="/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector">QuerySelector code snippet</a>.</p> + </dd> + <dt id="$$"><code>$$(selector, element)</code></dt> + <dd>Looks up a CSS selector string <code>selector</code>, returning an array of DOM nodes descended from <code>element</code> that match. If unspecified, <code>element</code> defaults to <code>document</code>. This is like for {{ domxref("document.querySelectorAll()") }}, but returns an array instead of a {{ domxref("NodeList") }}.</dd> + <dt id="$0"><code>$0</code></dt> + <dd>The currently-inspected element in the page.</dd> + <dt id="$_"><code>$_</code></dt> + <dd>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.</dd> + <dt id="$x"><code>$x(xpath, element, resultType)</code></dt> + <dd>Evaluates the <a href="/en-US/docs/XPath">XPath</a> <code>xpath</code> expression in the context of <code>element</code> and returns an array of matching nodes. If unspecified, <code>element</code> defaults to <code>document</code>. The resultType parameter specifies the type of result to return; it can be an <a href="https://developer.mozilla.org/en-US/docs/Web/API/XPathResult#Constants">XPathResult constant</a>, or a corresponding string: <code>"number"</code>, <code>"string"</code>, <code>"bool"</code>, <code>"node"</code>, or <code>"nodes"</code>; if not provided, <code>ANY_TYPE</code> is used.</dd> + <dt id="keys"><code>keys()</code></dt> + <dd>Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd> + <dt id="values"><code>values()</code></dt> + <dd>Given an object, returns a list of the values on that object; serves as a companion to <code>keys()</code>.</dd> + <dt id="clear"><code>clear()</code></dt> + <dd>Clears the console output area.</dd> + <dt id="inspect"><code>inspect()</code></dt> + <dd>Given an object, opens the object inspector for that object.</dd> + <dt id="pprint"><code>pprint()</code></dt> + <dd>Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.</dd> + <dt id="help"><code>help()</code>{{Deprecated_Inline(62)}}<br> + <code style="margin-right: 1ch;">:help</code>{{Gecko_MinVersion_Inline(62)}}</dt> + <dd>Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.</dd> + <dt id="cd"><code>cd()</code></dt> + <dd> + <p>Switch JavaScript evaluation context to a different iframe in the page. This helper accepts multiple different ways of identifying the frame to switch to. You can supply any of the following:</p> + + <ul> + <li>a selector string that will be passed to <code>document.querySelector</code> to locate the iframe element</li> + <li>the iframe element itself</li> + <li>the content window inside the iframe</li> + </ul> + + <p>See <a href="/en-US/docs/Tools/Working_with_iframes">working with iframes</a>.</p> + </dd> + <dt id="copy"><code>copy()</code></dt> + <dd><em>New in Firefox 38.</em> Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its <code><a href="/en-US/docs/Web/API/Element/outerHTML">outerHTML</a></code> is copied. Otherwise, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> will be called on the argument, and the result will be copied to the clipboard.</dd> + <dt id="clearHistory"><code>clearHistory()</code></dt> + <dd><em>New in Firefox 39.</em> Just like a normal command line, the console command line <a href="/en-US/docs/Tools/Web_Console#Command_history">remembers the commands you've typed</a>. Use this function to clear the console's command history.</dd> + <dt id="screenshot"><code>:screenshot</code></dt> + <dd><em>New in Firefox 62.</em> Create a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named:<br> + <br> + <code>Screen Shot yyy-mm-dd at hh.mm.ss.png</code><br> + <br> + The command has the following optional parameters:<br> + + <table class="standard-table"> + <tbody> + <tr> + <th>Comando</th> + <th>Tipo</th> + <th>Descrição</th> + </tr> + <tr> + <td><code style="white-space: nowrap;">--clipboard</code></td> + <td>boolean</td> + <td>When present, this parameter will cause the screenshot to be copied to the clipboard.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--delay</code></td> + <td>number</td> + <td>The number of seconds to delay before taking the screenshot.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--dpr</code></td> + <td>number</td> + <td>The device pixel ratio to use when taking the screenshot.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--file</code></td> + <td>boolean</td> + <td>When present, the screenshot will be saved to a file, even if other options (e.g. <code style="white-space: nowrap;">--clipboard</code>) are included.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--filename</code></td> + <td>string</td> + <td>The name to use in saving the file. The file should have a ".png" extension.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--fullpage</code></td> + <td>boolean</td> + <td>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.</td> + </tr> + <tr> + <td><code style="white-space: nowrap;">--selector</code></td> + <td>string</td> + <td>The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<p>Please refer to the <a href="/en-US/docs/Web/API/console">Console API</a> for more information about logging from content.</p> + +<h2 id="Variáveis">Variáveis</h2> + +<dl> + <dt id="tempN">temp<em>N</em></dt> + <dd>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">"Use in Console"</a> option in the Inspector generates a variable for a node named <code>temp0</code>, <code>temp1</code>, <code>temp2</code>, etc. referencing the node.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Looking_at_the_contents_of_a_DOM_node">Looking at the contents of a DOM node</h3> + +<p>Let's say you have a DOM node with the ID "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.</p> + +<p>Let's take a look at the contents of that node by using the <code>$()</code> and <code>inspect()</code> functions:</p> + +<pre class="brush: js; no-line-numbers">inspect($("#title"))</pre> + +<p>This automatically opens up the object inspector, showing you the contents of the DOM node that matches the CSS selector "#title", which is of course the element with ID "title".</p> + +<h3 id="Dumping_the_contents_of_a_DOM_node">Dumping the contents of a DOM node</h3> + +<p>That's well and good if you happen to be sitting at the browser exhibiting some problem, but let's say you're debugging remotely for a user, and need a look at the contents of a node. You can have your user open up the Web Console and dump the contents of the node into the log, then copy and paste it into an email to you, using the <code>pprint()</code> function:</p> + +<pre class="brush: js; no-line-numbers">pprint($("#title"))</pre> + +<p>This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.</p> |