aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/tools/web_console/helpers/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/tools/web_console/helpers/index.html')
-rw-r--r--files/pt-br/tools/web_console/helpers/index.html55
1 files changed, 55 insertions, 0 deletions
diff --git a/files/pt-br/tools/web_console/helpers/index.html b/files/pt-br/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..2ef39bc366
--- /dev/null
+++ b/files/pt-br/tools/web_console/helpers/index.html
@@ -0,0 +1,55 @@
+---
+title: Web Console Helpers
+slug: Tools/Web_Console/Helpers
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div><div>{{ gecko_minversion_header("2.0") }}</div>
+
+<h2 id="Os_comandos">Os comandos</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">A linha de comando</span> <span class="hps">JavaScript</span> <span class="hps">fornecida pelo</span> <span class="hps">Console</span> <span class="hps">Web</span> <span class="hps">oferece algumas</span> <span class="hps">funções auxiliares</span> <span class="hps">embutidos</span> <span class="hps">que tornam certas</span> <span class="hps">tarefas mais fáceis</span><span>.</span></span></p>
+
+<dl>
+ <dt><code>$()</code></dt>
+ <dd><strong><span style="background-color: #ffff00;">FX16</span><span style="background-color: #ffff00;">+</span></strong> <span id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">seqüência de</span> <span class="hps">seletor</span> <span class="hps">CSS</span><span>, retornando o</span> <span class="hps">primeiro elemento</span> <span class="hps">que corresponda</span><span>.</span> <span class="hps">equivalente a</span></span> {{ domxref("document.querySelector()") }} ou <span class="short_text" id="result_box" lang="pt"><span class="hps">chama a</span> <span class="hps">função de $</span> <span class="hps">na página,</span> <span class="hps">se ele existir.</span></span></dd>
+ <dd><strong><span style="background-color: #ffff00;">FX4 to FX16</span></strong> <span class="short_text" id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">string como um</span> <span class="hps">ID</span> <span class="hps">de um nó</span> <span class="hps">DOM</span><span>;</span></span> <span class="short_text" id="result_box" lang="pt"><span class="hps">este</span> <span class="hps">é um atalho para</span></span> {{ domxref("document.getElementById()") }} <span class="short_text" id="result_box" lang="pt"><span class="hps">ou</span> <span class="hps">chama a</span> <span class="hps">função de $</span> <span class="hps">na página,</span> <span class="hps">se ele existir.</span></span></dd>
+ <dt><code>$$()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">seqüência de</span> <span class="hps">seletor</span> <span class="hps">CSS</span><span>, retornando</span> <span class="hps">uma lista de</span> <span class="hps">DOM</span> <span class="hps">nós que correspondem</span><span>.</span> <span class="hps">Este</span> <span class="hps">é um atalho para</span></span> {{ domxref("document.querySelectorAll()") }}.</dd>
+ <dt><code>$0</code></dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">O elemento</span> <span class="hps">atualmente</span> <span class="hps">inspecionados</span> <span class="hps">na página.</span></span></dd>
+ <dt><code>$x()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Avaliar</span> <span class="hps">uma expressão XPath</span> <span class="hps">e</span> <span class="hps">retornar um array de</span> <span class="hps">nós correspondentes</span><span>.</span></span></dd>
+ <dt><code>keys()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">retorna uma lista</span> <span class="hps">de keys</span> <span class="hps">(ou</span> <span class="hps">nomes de propriedade</span><span>)</span> <span class="hps">no objeto.</span> <span class="hps">Este</span> <span class="hps">é um atalho para</span> <span class="hps">object.keys</span><span>.</span></span></dd>
+ <dt><code>values()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">retorna uma lista de</span> <span class="hps">valores</span> <span class="hps">nesse objeto</span><span>,</span> <span class="hps">serve como</span> <span class="alt-edited hps">um complemento para</span> <span class="atn hps">keys (</span><span>)</span><span>.</span></span></dd>
+ <dt><code>clear()</code></dt>
+ <dd><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="Clears the console output area.">Limpa a área de saída do console.</span></span></dd>
+ <dt><code>inspect()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">abre</span> <span class="hps">o inspetor de</span> <span class="hps">objeto</span> <span class="hps">para aquele objeto.</span></span></dd>
+ <dt><code>pprint()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Formata o</span> <span class="hps">valor especificado</span> <span class="hps">de forma</span> <span class="hps">legível</span><span>, o que</span> <span class="hps">é útil</span> <span class="hps">para despejar</span> <span class="hps">o conteúdo de</span> <span class="hps">objetos</span> <span class="hps">e arrays</span><span>.</span></span></dd>
+ <dt><code>help()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Exibe</span> <span class="hps">o texto de ajuda</span><span>.</span> <span class="hps">Na verdade,</span> <span class="hps">em um</span> <span class="hps">exemplo</span> <span class="hps">maravilhoso</span> <span class="hps">de</span> <span class="hps">recursão,</span> <span class="hps">ele vai lhe trazer</span> <span class="hps">a esta página.</span></span></dd>
+</dl>
+
+<h2 id="Exemplos"><span class="short_text" id="result_box" lang="pt"><span class="hps">Exemplos</span></span></h2>
+
+<h3 id="Exemplo_Olhando_para_o_conteúdo_de_um_nó_DOM">Exemplo: <span class="short_text" id="result_box" lang="pt"><span class="hps">Olhando para</span> <span class="hps">o conteúdo de um</span> <span class="hps">nó DOM</span></span></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">Digamos que</span> <span class="hps">você tem</span> <span class="hps">um nó</span> <span class="hps">DOM</span> <span class="hps">com o</span> <span class="atn hps">ID "</span><span>título</span><span>"</span><span>.</span> <span class="hps">Na verdade, esta</span> <span class="hps">página que você está</span> <span class="hps">lendo agora</span> <span class="hps">tem um,</span> <span class="hps">assim você pode</span> <span class="hps">abrir o</span> <span class="hps">Web</span> <span class="hps">Console</span> <span class="hps">e tentar</span> <span class="hps">isso agora.</span><br>
+ <br>
+ <span class="hps">Vamos dar</span> <span class="hps">uma olhada</span> <span class="hps">no conteúdo</span> <span class="hps">desse nó</span><span>, usando as funções</span> <span class="hps">$()</span> <span class="hps">e inspect</span><span class="hps">()</span> <span class="hps">:</span></span></p>
+
+<pre><code>inspect($("#title"))</code></pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Isso abre</span> <span class="hps">automaticamente o</span> <span class="hps">inspetor de</span> <span class="hps">objeto</span><span>,</span> <span class="hps">mostrando-lhe</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">DOM</span> <span class="hps">que coincide com o</span> <span class="hps">CSS</span> <span class="atn hps">selector "</span><span># title</span><span>"</span><span>, que é</span><span>, claro, o</span> <span class="hps">elemento com</span> <span class="atn hps">ID "</span><span>título</span><span>"</span><span>.</span></span></p>
+
+<h3 id="Exemplo_despejar_o_conteúdo_de_um_nó_DOM"><span class="short_text" id="result_box" lang="pt"><span class="hps">Exemplo:</span> <span class="hps">despejar o</span> <span class="hps">conteúdo de um</span> <span class="hps">nó</span> <span class="hps">DOM</span></span></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">Isso é</span> <span class="hps">muito bom</span> <span class="hps">se acontecer de você</span> <span class="hps">estar sentado</span> <span class="hps">no</span> <span class="hps">navegador</span> <span class="hps">exibindo</span> <span class="hps">algum problema</span><span>, mas vamos</span> <span class="hps">dizer que você está</span> <span class="hps">depurando remotamente</span> <span class="hps">para um usuário,</span> <span class="hps">e precisa de um</span> <span class="hps">olhar para</span> <span class="hps">o conteúdo de um</span> <span class="hps">nó.</span> <span class="hps">Você pode ter seu</span> <span class="hps">usuário</span> <span class="hps">abrir o</span> <span class="hps">Web</span> <span class="hps">Console</span> <span class="hps">e despejar</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">para o</span> <span class="hps">registro,</span> <span class="hps">em seguida, copiar</span> <span class="hps">e</span> <span class="hps">colá-lo em</span> <span class="hps">um e-mail</span> <span class="hps">para você,</span> <span class="hps">utilizando a função</span> <span class="hps">pprint</span> <span class="hps">():</span></span></p>
+
+<pre>pprint($("#title"))
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Este</span> <span class="alt-edited hps">expele</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">para que você possa</span> <span class="hps">dar uma olhada.</span> <span class="hps">Claro, isso</span> <span class="hps">pode ser mais útil</span> <span class="hps">com outros</span> <span class="hps">objetos do que</span> <span class="hps">um nó</span> <span class="hps">DOM</span><span>, mas essa é a idéia</span></span><span id="result_box" lang="pt"><span class="hps">.</span></span></p>