unslug pt-pt: move

8 files changed, 989 insertions, 0 deletions

diff --git a/files/pt-pt/tools/web_console/console_messages/index.html b/files/pt-pt/tools/web_console/console_messages/index.html
new file mode 100644
index 0000000000..db51be1571
--- /dev/null
+++ b/files/pt-pt/tools/web_console/console_messages/index.html
@@ -0,0 +1,474 @@
+---
+title: Mensagens da Consola
+slug: Tools/Consola_da_Web/Mensagens_consola
+translation_of: Tools/Web_Console/Console_messages
+---
+<div>{{ToolsSidebar}}</div><p>A maior parte da 'Consola da Web' é ocupada pelo painel de exibição de mensagens:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p>
+
+<p>Cada mensgaem é exibida como uma linha separada:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Hora</strong></td>
+   <td>The time the message was recorded. This is not shown by default: you can opt to see timestamps using a <a href="/en-US/docs/Tools_Toolbox#Settings">setting in the Toolbox</a>.</td>
+  </tr>
+  <tr>
+   <td><strong>Categoria</strong></td>
+   <td>
+    <p><strong>Category</strong>: this indicates what sort of message this is:</p>
+
+    <ul style="margin-left: 40px;">
+     <li><strong>Black</strong>: Network request</li>
+     <li><span style="color: #0099ff;"><strong>Blue</strong></span>: CSS warning/error/log</li>
+     <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript warning/error</li>
+     <li><span style="color: #ff0000;"><strong>Red</strong></span>: Security warning/error</li>
+     <li><span style="color: #90b090;"><strong>Green</strong></span>: Server logs</li>
+     <li><span style="color: #a9a9a9;"><strong>Light Gray</strong></span>: <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a> API messages</li>
+     <li><span style="color: #696969;"><strong>Dark Gray</strong></span>: input/output from the interactive <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">command line interpreter</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Tipo</strong></td>
+   <td>For all messages except network requests and interactive input/output an icon indicating whether it is an error(X), a warning(!) or an informational log message (i).</td>
+  </tr>
+  <tr>
+   <td><strong>Mensagem</strong></td>
+   <td>The message itself.</td>
+  </tr>
+  <tr>
+   <td><strong>Número de ocorrências</strong></td>
+   <td>If a line that generates a warning or error is executed more than once, it is only logged once and this counter appears to indicate how many times it was encountered.</td>
+  </tr>
+  <tr>
+   <td><strong>Nome de ficheiro e número da linha</strong></td>
+   <td>
+    <p>For JavaScript, CSS and console API messages the message can be traced to a specific line of code. The console then provides a link to the filename and line number that generated the message.</p>
+
+    <p>From Firefox 36, this includes the column number as well.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>By default, the console is cleared each time you navigate to a new page or reload the current page. To override this behavior, check "Enable persistent logs" in the <a href="/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p>
+
+<h2 id="Categorias_da_mensagem">Categorias da mensagem</h2>
+
+<h3 id="Rede">Rede</h3>
+
+<div class="note">
+<p>Network log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>Network requests are logged with a line that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Hora</strong></td>
+   <td>The time the message was recorded.</td>
+  </tr>
+  <tr>
+   <td><strong>Categoria</strong></td>
+   <td>Indicates that the message is an HTTP request.</td>
+  </tr>
+  <tr>
+   <td><strong>Método</strong></td>
+   <td>
+    <p>The specific HTTP request method.</p>
+
+    <p>If the request was made as an <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, there's an additional note indicating this:</p>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>URI</strong></td>
+   <td>The target URI.</td>
+  </tr>
+  <tr>
+   <td><strong>Resumo</strong></td>
+   <td>The HTTP version, status code, and time taken to complete.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Visualização_dos_detalhes_do_pedido_de_rede">Visualização dos detalhes do pedido de rede</h4>
+
+<p>If you click on the message, you'll be redirected to the <a href="/en-US/docs/Tools/Network_Monitor">Network panel</a> where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.</p>
+
+<p>Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:</p>
+
+<ul>
+ <li><strong>Headers:</strong> request and response headers</li>
+ <li><strong>Response:</strong> the response body</li>
+ <li><strong>Cookies:</strong> any cookies that were sent along with the request</li>
+ <li><strong>Call Stack</strong> (new in Firefox 50): for requests initiated by JavaScript, such as <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, you can see the call stack at the point the request was made.</li>
+</ul>
+
+<p>{{EmbedYouTube("cFlcWzJ9j4I")}}</p>
+
+<h3 id="JS">JS</h3>
+
+<p>JavaScript messages look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Hiperligação_Sbaer_mais">Hiperligação "Sbaer mais"</h4>
+
+<div class="geckoVersionNote">Novo no Firefox 49</div>
+
+<p>JavaScript errors contain a "Learn more" link that takes you to the<a href="/en-US/docs/Web/JavaScript/Reference/Errors"> JavaScript error reference</a> containing additional advice for fixing issues:</p>
+
+<p>{{EmbedYouTube("OabJc2QR6o0")}}</p>
+
+<h4 id="Source_maps">Source maps</h4>
+
+<div class="geckoVersionNote">New in Firefox 50 (but disabled by default)</div>
+
+<p>From Firefox 50, the Web Console understands <a href="http://blog.teamtreehouse.com/introduction-source-maps">source maps</a>. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.</p>
+
+<p>At the moment source map support is disabled by default. To enable it, visit "about:config", find the preference "devtools.source-map.locations.enabled" and set it to <code>true</code>.</p>
+
+<p>Be aware that support is still experimental. It may have bugs and may slow down console output. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1289570">Bug 1289570</a> tracks any work that needs to be done before source map support can be enabled by default.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="note">
+<p>CSS warnings and reflow messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>CSS messages look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Reflow_events">Reflow events</h4>
+
+<p>The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p>
+
+<p>Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p>
+
+<p>Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">toolbar</a> and selecting "Reflows".</p>
+
+<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p>
+
+<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4>
+
+<p>If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.</p>
+
+<p>However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls <code>window.getComputedStyle(thing).height</code>:</p>
+
+<pre class="brush: js">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<p>Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.</p>
+
+<h3 id="Security">Security</h3>
+
+<p>Security warnings and errors look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p>
+
+<p>The complete list of security messages is as follows:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Message</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed active content</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed display content</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) active content on a secure page</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) display content on a secure page</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Pages containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>iframes containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>The site specified an invalid Strict-Transport-Security header.</td>
+   <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
+   </td>
+   <td>
+    <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p>
+
+    <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p>
+
+    <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p>
+
+<h3 id="Logging">Logging</h3>
+
+<div class="note">
+<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Web console supports the following <a href="/en-US/docs/Web/API/Console">Console API</a> messages:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></li>
+ <li><code><a href="/en-US/docs/Web/API/Console/clear">clear()</a></code> (new in Firefox 48)</li>
+ <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li>
+ <li><code>exception()</code></li>
+ <li><code><a href="/en-US/docs/Web/API/Console.group">group()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Console/groupEnd">groupEnd()</a></code></li>
+ <li><code>info()</code></li>
+ <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li>
+</ul>
+
+<p>The console prints a stack trace for all error messages, like this:</p>
+
+<pre class="brush: js">function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p>
+
+<h3 id="Servidor">Servidor</h3>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<div class="note">
+<p>Server-side log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p>
+
+<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p>
+
+<ul>
+ <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li>
+ <li>your server-side code uses this API to log messages</li>
+ <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li>
+ <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li>
+ <li>the Web Console decodes these headers and displays them</li>
+</ul>
+
+<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p>
+
+<h3 id="Linha_de_comando_-_entradasaída">Linha de comando - entrada/saída</h3>
+
+<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p>
+
+<h2 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h2>
+
+<h3 id="Filtrar_por_categoria">Filtrar por categoria</h3>
+
+<p>You can use the toolbar along the top to constrain the results displayed.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:</p>
+
+<ul>
+ <li>Net
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>XHR</li>
+   <li>Log</li>
+  </ul>
+ </li>
+ <li>CSS
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>Reflows</li>
+  </ul>
+ </li>
+ <li>JS
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+  </ul>
+ </li>
+ <li>Security
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+  </ul>
+ </li>
+ <li>Logging
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>Info</li>
+   <li>Log</li>
+   <li>Shared Workers</li>
+   <li>Service Workers</li>
+   <li>Add-on or Chrome Workers</li>
+  </ul>
+ </li>
+ <li>Server
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>info</li>
+   <li>Log</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Filtrar_por_texto">Filtrar por texto</h3>
+
+<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p>
+
+<h3 id="Limpar_o_registo_de_eventos">Limpar o registo de eventos</h3>
+
+<p>Finally, you can use this toolbar to clear the log. Before Firefox 48, this is a button labeled "Clear" on the right of the toolbar. From Firefox 48 it's a trashcan icon on the left.</p>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Switch languages"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option selected value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Listen to the translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copy translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch"> </div>
+
+    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Font size"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Help"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Pin pop-up bubble"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">Text-to-speech function is limited to 200 characters</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Show Translator's button 3 second(s)"> </div>
+   </td>
+   <td><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation History">History</a> : <a class="SL_options" title="ImTranslator Feedback">Feedback</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Make a small contribution">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Close">Close</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
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 &lt;enter&gt;", then "$_ &lt;enter&gt;", 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>
diff --git a/files/pt-pt/tools/web_console/index.html b/files/pt-pt/tools/web_console/index.html
new file mode 100644
index 0000000000..e0f34f8069
--- /dev/null
+++ b/files/pt-pt/tools/web_console/index.html
@@ -0,0 +1,48 @@
+---
+title: Consola da Web
+slug: Tools/Consola_da_Web
+tags:
+  - Depuração
+  - Desenvolvimento da Web
+  - Ferramentas
+  - Ferramentas Desenvolvimento Web
+  - Guía
+  - Segurança
+  - consola da Web
+  - 'l10n:priority'
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><strong>A Consola da Web</strong>:</p>
+
+<ol>
+ <li>Regista a informação associada com a página da Web: pedidos de rede, JavaScript, CSS, erros de segurança e avisos, bem como erro, aviso e mensagens de informação explicitamente registadas pelo código de JavaScript executado no contexto da página</li>
+ <li>Permite-lhe interagir com a página da Web, ao executar as expressões de JavaScript no contexto da página</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Abertura_Consola_Web">Abrir a Consola da </a> <a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">Web</a></dt>
+ <dd>Como utilizar a <strong>Consola da Web</strong>.</dd>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/O_interprete_da_linha_de_comandos">Intérprete da linha de comando</a></dt>
+ <dd>Como interagir com um documento, utilizando a <strong>Consola</strong>.</dd>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Dividir_consola">Dividir consola</a></dt>
+ <dd>Utilize a <strong>Consola </strong>com outras ferramentas.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Mensagens_consola">Mensagens da consola</a></dt>
+ <dd>Detalhes das mensagens dos registos da <strong>Consola</strong>.</dd>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Rich_output">Informação Detalhada</a> (Rich Output)</dt>
+ <dd>Ver e interagir com objetos registados pela <strong>Consola</strong>.</dd>
+ <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Atalhos_teclado">Atalhos do teclado</a></dt>
+ <dd>Referência de atalho.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/pt-pt/tools/web_console/keyboard_shortcuts/index.html b/files/pt-pt/tools/web_console/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..11e3017557
--- /dev/null
+++ b/files/pt-pt/tools/web_console/keyboard_shortcuts/index.html
@@ -0,0 +1,14 @@
+---
+title: Atalhos de teclado da consola da Web
+slug: Tools/Consola_da_Web/Atalhos_teclado
+translation_of: Tools/Web_Console/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "web-console") }}</p>
+
+<h2 id="Atalhos_globais">Atalhos globais</h2>
+
+<article>
+<p>{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
+</article>
diff --git a/files/pt-pt/tools/web_console/rich_output/index.html b/files/pt-pt/tools/web_console/rich_output/index.html
new file mode 100644
index 0000000000..591a4cd624
--- /dev/null
+++ b/files/pt-pt/tools/web_console/rich_output/index.html
@@ -0,0 +1,77 @@
+---
+title: Informação Detalhada
+slug: Tools/Consola_da_Web/Rich_output
+translation_of: Tools/Web_Console/Rich_output
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Quando a consola da Web imprime objetos, esta inclui um conjunto de informação mais rico do que apenas o nome do objeto. Em particular, esta:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">provides extra information for certain types</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">enables detailed examination of the object's properties</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">provides richer information for DOM elements, and enables you to select them in the Inspector</a></li>
+</ul>
+
+<h2 id="Type-specific_rich_output">Type-specific rich output</h2>
+
+<p>The Web Console provides rich output for many object types, including the following:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Object</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Array</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Date</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Promise</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 36</p>
+    </div>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>RegExp</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Window</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Document</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Element</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Event</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examining_object_properties">Examining object properties</h2>
+
+<p>When an object is logged to the console it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press <kbd>Esc</kbd>..</p>
+
+<h2 id="Highlighting_and_inspecting_DOM_nodes">Highlighting and inspecting DOM nodes</h2>
+
+<p>If you hover the mouse over any DOM element in the console output, it's highlighted in the page:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">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 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p>
diff --git a/files/pt-pt/tools/web_console/split_console/index.html b/files/pt-pt/tools/web_console/split_console/index.html
new file mode 100644
index 0000000000..9092beeae0
--- /dev/null
+++ b/files/pt-pt/tools/web_console/split_console/index.html
@@ -0,0 +1,20 @@
+---
+title: Dividir consola
+slug: Tools/Consola_da_Web/Dividir_consola
+translation_of: Tools/Web_Console/Split_console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Pode utilizar a consola com outras ferramentas. Enquanto estiver noutra ferramenta na «Caixa de Ferramentas», basta pressionar <kbd>Esc</kbd> ou clicar no botão "Mostrar dividir consola" na <a href="/pt-PT/docs/Tools/Tools_Toolbox#Barra_de_Ferramentas">Barra de Ferramentas</a>. A caixa de ferramentas irá aparecer agora dividida, com a ferramenta original por cima e a consola da Web por baixo.</p>
+
+<p>Pode fechar o "dividir consola" pressionando novamente <kbd>Esc</kbd> , ou selecioando o comando do menu "Ocultar dividir consola".</p>
+
+<p><img src="https://mdn.mozillademos.org/files/16106/split-console.png"></p>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Como normalmente, <code>$0</code> funciona como taquigrafia para o elemento atualmente selecionado no Inspetor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png">Quando utilizar "dividir consola" com o depurador, o escopo da consola é a execução atual de <em>stack frame</em>. Então, se encontrar um ponto de interrupção numa função, o escopo será a intenção da função. Irá ter o "auto completar" para objetos definidos na função, e pode modificá-los facilmente na hora:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png"></p>
diff --git a/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html b/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..16554ff278
--- /dev/null
+++ b/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,187 @@
+---
+title: O intérprete de inserção (entrada) de JavaScript
+slug: Tools/Consola_da_Web/O_interprete_da_linha_de_comandos
+tags:
+  - Depuração
+  - Desenvolvimento da Web
+  - consola da Web
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.</p>
+
+<h2 id="Modo_de_linha_única">Modo de linha única</h2>
+
+<p>For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the <strong>&gt;&gt;</strong> prompt.</p>
+
+<p><img alt="The Web Console, showing single-line mode" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p>
+
+<p>To enter expressions in single-line mode, type at the prompt and press <kbd>Enter</kbd>. To enter multi-line expressions, press <kbd>Shift</kbd>+<kbd>Enter</kbd> after typing each line, then <kbd>Enter</kbd> to run all the entered lines.</p>
+
+<p>The expression you type is echoed under the input prompt, followed by the result.</p>
+
+<p>If your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p>
+
+<p>For example, if you type:</p>
+
+<pre class="brush: js">function foo() {</pre>
+
+<p>and then <kbd>Enter</kbd>, the Console does not immediately execute the input, but behaves as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p>
+
+<h2 id="Modo_de_múltiplas_linhas">Modo de múltiplas linhas</h2>
+
+<p>For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press  <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). The multi-line editing pane opens on the left side the of Web Console.</p>
+
+<p><img alt="Web Console in multi-line mode" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p>
+
+<p>You can enter multiple lines of JavaScript by default in this mode, pressing <kbd>Enter</kbd> after each one. To execute the snippet that is currently in the editing pane, click the <strong>Run</strong> button or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> (or <kbd>Cmd</kbd>+<kbd>Return</kbd> on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.</p>
+
+<p>Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.</p>
+
+<p>You can open files when in multi-line mode, and save the current contents of the editing pane to a file.</p>
+
+<ul>
+ <li>To open a file, press <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> on MacOS). A file dialog box opens so you can select the file to open.</li>
+ <li>To save the contents of the editing pane, press <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> on MacOS). A file dialog box opens so you can specify the location to save to.</li>
+</ul>
+
+<p>To switch back to single-line mode, click the <strong>X</strong> icon at the top of the multi-line editing pane, or press  <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p>
+
+<h2 id="Aceder_às_variáveis">Aceder às variáveis</h2>
+
+<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript libraries like <em>jQuery</em>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Auto_completar">Auto completar</h2>
+
+<p>The editor has autocomplete: enter the first few letters and a popup appears with possible completions:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>
+
+<p>Press  <kbd>Enter</kbd>, <kbd>Tab</kbd>, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p>
+
+<p>Console autocomplete suggestions are case-insensitive.</p>
+
+<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p>
+
+<p>You get autocomplete suggestions for array elements, as well:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Enable Autocompletion</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p>
+
+<h2 id="Avaliação_instantânea">Avaliação instantânea</h2>
+
+<div class="blockIndicator note">
+<p>This feature is available in Firefox Nightly, in versions labeled 74 and later.</p>
+</div>
+
+<p>When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.</p>
+
+<p>You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Instant Evaluation</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p>
+
+<h2 id="Contexto_de_execução">Contexto de execução</h2>
+
+<p>Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click <strong>Run</strong>, you can switch to single-line mode and still use your function.</p>
+
+<h2 id="Sintaxe_realçada">Sintaxe realçada</h2>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>
+
+<p>The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".</p>
+
+<p>The output is highlighted as well where appropriate.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Syntax highlighting is not visible in your browser if Accessibility features have been enabled.</p>
+</div>
+
+<h2 id="Histórico_de_execução">Histórico de execução</h2>
+
+<p>The interpreter remembers expressions you've typed. To move back and forward through your history:</p>
+
+<ul>
+ <li>In single-line mode, use the up and down arrows. </li>
+ <li>In multi-line mode, use the  <strong>⋀</strong> and <strong>⋁ </strong>icons in the editing panel's toolbar.</li>
+</ul>
+
+<p>The expression history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p>
+
+<p>You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press <kbd>F9</kbd>. On Mac press <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>note:</strong> not <kbd>Cmd</kbd>+<kbd>R</kbd>!) to initiate the reverse search.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>
+
+<p>Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing <kbd>F9</kbd> on Windows and Linux ( <kbd>Ctrl</kbd>+<kbd>R</kbd> on Mac) cycles backwards through the matches.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Once you  have initiated the reverse search, you can use <kbd>Shift</kbd> + <kbd>F9</kbd> on Windows or Linux ( <kbd>Ctrl</kbd>+<kbd>S</kbd> on Mac) to search forward in the list of matches. You can also use the  <strong>⋀</strong> and <strong>⋁ </strong>icons in the expression search bar.</p>
+
+<p>When you find the expression you want, press <kbd>Enter</kbd> (<kbd>Return</kbd>) to execute the statement.</p>
+
+<h2 id="Trabalhar_com_iframes">Trabalhar com iframes</h2>
+
+<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p>
+
+<p>You can pass the iframe DOM element:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>You can pass a CSS selector that matches the iframe:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>You can pass the iframe's global window object:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>For example, suppose we have a document that embeds an iframe:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The iframe defines a new function:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>You can switch context to the iframe like this:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Now you'll see that the global window's document is the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">And you can call the function defined in the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Comando_da_Ajuda">Comando da Ajuda</h2>
+
+<p>{{ page("docs/Tools/Consola_da_Web/Ajuda", "Os comandos") }}</p>
diff --git a/files/pt-pt/tools/web_console/ui_tour/index.html b/files/pt-pt/tools/web_console/ui_tour/index.html
new file mode 100644
index 0000000000..e997885daf
--- /dev/null
+++ b/files/pt-pt/tools/web_console/ui_tour/index.html
@@ -0,0 +1,27 @@
+---
+title: Abrir a Consola da Web
+slug: Tools/Consola_da_Web/Abertura_Consola_Web
+tags:
+  - consola da Web
+translation_of: Tools/Web_Console/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Para abrir a 'Consola da Web':</p>
+
+<ul>
+ <li>either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li>
+ <li>or press the <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> on OS X) keyboard shortcut.</li>
+</ul>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p>
+
+<p>A interface da 'Consola da Web' é dividida em três secções horizontais:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing two buttons. Click the garbage can button to clear the contents of the console. Click the funnel icon to filter the message that are displayed in the console</li>
+ <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>: the command line starts with double angle brackets (&gt;&gt;). Use it to enter JavaScript expressions</li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>: the messages generated by the code in the page and by the commands entered on the command line are displayed following each command</li>
+</ul>