diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-pt/tools | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-pt/tools')
52 files changed, 7049 insertions, 0 deletions
diff --git a/files/pt-pt/tools/about_colon_debugging/index.html b/files/pt-pt/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..7f246250a7 --- /dev/null +++ b/files/pt-pt/tools/about_colon_debugging/index.html @@ -0,0 +1,250 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +tags: + - Depurador + - Depuração remota + - sobre depuração +translation_of: 'Tools/about:debugging' +--- +<div>{{ToolsSidebar}}</div> + +<p>A página de <code>about:debugging</code> fornece um local único a partir do qual pode anexar as "'Ferramentas de Desenvolvimento" do Firefox para um número de destinos de depuração. De momento este suporta três tipos principais de destinos: extras sem restrições, separadores, e <em>workers</em>.</p> + +<h2 id="Abrir_a_página_de_aboutdebugging">Abrir a página de about:debugging</h2> + +<p>Existem dois modos para abrir <code>about:debugging</code>:</p> + +<ul> + <li>Digite <code>about:debugging</code> na barra de URL do Firefox.</li> + <li>No menu clique em <strong>Ferramentas de Programação </strong>> clique em <strong>Depuração Remota</strong>.</li> +</ul> + +<p>Quando <strong>about:debugging</strong> abrir, no lado esquerdo, irá ver uma barra lateral com duas opções e informação sobre a configuração da depuração remota.</p> + +<dl> + <dt>Configuração</dt> + <dd>Use the Setup tab to configure the connection to your remote device.</dd> + <dt>Este Firefox</dt> + <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png"></p> + +<p>Se a sua página de <code>about:debugging</code> é diferente da exibida aqui, vá para<code>about:config</code>, encontre e defina a opção <code>devtools.aboutdebugging.new-enabled</code> para <strong>true</strong>.</p> + +<h2 id="Configurar_o_separador">Configurar o separador</h2> + +<h3 id="Ligar_a_um_dispositivo_remoto">Ligar a um dispositivo remoto</h3> + +<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> + +<p>Before you connect:</p> + +<ol> + <li>Enable Developer settings on your Android device.</li> + <li>Enable USB debugging in the Android Developer settings.</li> + <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> + <li>Connect the Android device to your computer using a USB cable.</li> +</ol> + +<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> + +<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> +</div> + +<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p> + +<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png"></p> + +<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> + +<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p> + +<p><img alt="The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser." src="https://mdn.mozillademos.org/files/16917/version_warning.png"></p> + +<p>In Firefox 76 and above, the message can look like the following:</p> + +<p><img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png"></p> + +<p>See <a href="https://wiki.developer.mozilla.org/pt-PT/docs/Tools/about:debugging$edit#">Connection for Firefox for Android 68</a> for more information.</p> + +<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16916/remote_debugger.png"></p> + +<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Mozilla Firefox Nightly, on a Moto G(5), as well as the title of the page that you are debugging, and the address of the page.</p> + +<h3 id="Ligar_através_da_Rede">Ligar através da Rede</h3> + +<p>Pode ligar a um servidor de «Depuração» do Firefox na sua rede, ou na sua máquina de depuração utilizando as definições de <strong>Localização da rede </strong>da página <strong>about:debugging</strong>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png"></p> + +<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png"></p> + +<h2 id="Este_Firefox">Este Firefox</h2> + +<p>O separador <strong>Este Firefox</strong> combina as funcionalidades das «Extensões», «Separadores», e «Workers» num único separador com as secções seguintes:</p> + +<dl> + <dt>Extensões temporárias</dt> + <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> + <dt>Extensões</dt> + <dd>This section lists information about the extensions that you have installed on your system.</dd> + <dt>Service Workers, Shared Workers, e Outros Workers</dt> + <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png"></p> + +<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> + +<h2 id="Extensões">Extensões</h2> + +<h3 id="Carregar_uma_extensão_temporária">Carregar uma extensão temporária</h3> + +<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p> + +<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> + +<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> + +<ul> + <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> + <li>You can load an add-on without signing it and without needing to disable signing.</li> +</ul> + +<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> + +<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png"></p> + +<p>You can use the following buttons:</p> + +<dl> + <dt>Inspect</dt> + <dd>Loads the extension in the debugger.</dd> + <dt>Reload</dt> + <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> + <dt>Remove</dt> + <dd>Unloads the temporary extension.</dd> +</dl> + +<p>Other information about the extension is displayed:</p> + +<dl> + <dt>Location</dt> + <dd>The location of the extension's source code on your local system.</dd> + <dt>Extension ID</dt> + <dd>The temporary ID assigned to the extension.</dd> + <dt>Internal UUID</dt> + <dd>The internal UUID assigned to the extension.</dd> + <dt>Manifest URL</dt> + <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> +</dl> + +<h3 id="Atualizar_uma_extensão_temporária">Atualizar uma extensão temporária</h3> + +<p>If you install an extension in this way, what happens when you update the extension?</p> + +<ul> + <li>If you change files that are loaded on demand, like <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>For other changes, click the <strong>Reload</strong> button. This does what it says: + <ul> + <li>Reloads any persistent scripts, such as <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> + </ul> + </li> +</ul> + +<h3 id="Extensões_Instaladas">Extensões Instaladas</h3> + +<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> + +<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png"></p> + +<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> + +<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> +</div> + +<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>This list may include add-ons that came preinstalled with Firefox.</p> +</div> + +<p>If you click <strong>Inspect</strong>, the <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> + +<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> + +<p>See the page on the <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> + +<h2 id="Workers">Workers</h2> + +<p>The Workers page shows your workers, categorised as follows:</p> + +<ul> + <li>All registered <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> + <li>All registered <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> + <li>Other workers, including <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> +</ul> + +<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png"></p> + +<h3 id="Service_worker_state">Service worker state</h3> + +<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> + +<ul> + <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> + <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> + <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> +</ul> + +<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png"></p> + +<div class="blockIndicator note"> +<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +</div> + +<h3 id="Unregistering_service_workers">Unregistering service workers</h3> + +<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> + +<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> + +<p>To debug push notifications, you can set a breakpoint in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> + +<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> + +<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png"></p> + +<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> + +<h2 id="Ligação_ao_Firefox_para_Android_68">Ligação ao Firefox para Android 68</h2> + +<p>Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:</p> + +<ul> + <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox Preview</a>, if your desktop Firefox is the main release or Developer Edition</li> + <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox for Android Nightly</a></li> +</ul> + +<p>If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">Firefox Extended Support Release (ESR)</a>, which is also based on version 68.</p> + +<p>Note that <code>about:debugging</code> is not enabled by default in Firefox ESR. To enable it, open the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> (<code>about:config</code>) and set <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> + +<p>If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">What happens to my profile if I downgrade to a previous version of Firefox?</a></p> diff --git a/files/pt-pt/tools/add-ons/index.html b/files/pt-pt/tools/add-ons/index.html new file mode 100644 index 0000000000..ab408aeb18 --- /dev/null +++ b/files/pt-pt/tools/add-ons/index.html @@ -0,0 +1,15 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p> + +<dl> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>Examine the data exchanged in a WebSocket connection.</dd> + <dd> </dd> +</dl> diff --git a/files/pt-pt/tools/atalhos_de_teclado/index.html b/files/pt-pt/tools/atalhos_de_teclado/index.html new file mode 100644 index 0000000000..fdf9129b59 --- /dev/null +++ b/files/pt-pt/tools/atalhos_de_teclado/index.html @@ -0,0 +1,1156 @@ +--- +title: Todos os atalhos de teclado +slug: Tools/atalhos_de_teclado +tags: + - Ferramentas + - 'I10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>Esta página lista todos os atalhos de teclado utilizados pelas ferramentas de desenvolvimento integradas no Firefox.</p> + +<p>A primeira secção lista o atalho para abrir cada ferramenta e a segunda secção lista os atalhos que são aplicáveis à própria 'Caixa de Ferramentas.' Depois disso, existe uma secção para cada ferramenta, que lista os atalhos que pode utilizar dentro dessa ferramenta.</p> + +<p>Porque as chaves de acesso são dependentes do local, elas não estão documentadas nesta página.</p> + +<h2 id="Abrir_e_fechar_ferramentas">Abrir e fechar ferramentas</h2> + +<p>Estes atalhos funcionam na janela principal do navegador para abrir a ferramenta especificada. Para as ferramentas que estão alojadas na 'Caixa de Ferramentas', elas funcionam para fechar a ferramenta se estiver ativa. Para as ferramentas, tal como a 'Consola do Navegador' que abre numa nova janela, tem de fechar a janela para fechar a ferramenta.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Bring Toolbox to foreground (if the Toolbox is in a separate window and not in foreground)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Close Toolbox (if the Toolbox is in a separate window and in foreground)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Open Web Console <a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Toggle "Pick an element from the page" (opens the Toolbox and/or focus the Inspector tab)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Open Style Editor</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note">*</a></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Open Profiler</th> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note">*</a></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">Open Network Monitor <a href="#opening-closing-network-monitor-note"><strong><sup>2</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Toggle Responsive Design Mode</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">Open Browser Console</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Open Browser Toolbox</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Open Scratchpad</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4 </kbd> <a href="#mac-function-key-note" title="#mac-function-key-note">*</a></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Open WebIDE</th> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note">*</a></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Storage Inspector</th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note">*</a></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row">Open Debugger <strong><sup><a href="#opening-closing-debugger">3</a></sup></strong></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="opening-closing-web-console-note">1. </a>Ao contrário das outras ferramentas hospedadas na caixa de ferramentas, este atalho também não fecha a consola da Web. Em vez disso, este concentra-se na linha de comando da consola da Web. Para fechar a consola, utilize o atalho da caixa de ferramentas global de<a name="opening-closing-web-console-note"> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> num Mac).</a></p> + +<p><a name="opening-closing-network-monitor-note">2. Antes do Firefox 55, o atalho de teclado era <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> num Mac).</a></p> + +<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">3. Até ao Firefox 38, quando uma 'Consola do Navegador' está ocultada por uma janela normal do Firefox, a mesma combinação de teclas fecha a consola. A partir do Firefox 38, se a 'Consola do Navegador' é ocultada por uma janela normal do Windows, esta combinação de teclas volta a apresentar esta consola no topo e foca-se na mesma.</a></p> + +<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">4. A ferramenta está desativada por predefinição, assim o atalho não funcionará até que este seja ativado no 'Painel das Definições'.</a></p> + +<h2 id="Caixa_de_Ferramentas">Caixa de Ferramentas</h2> + +<div id="toolbox-shortcuts"> +<p>Estes atalhos funcionam sempre que a caixa de ferramentas estiver aberta, independentemente da ferramenta ativa.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Cycle through tools left to right</th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row">Cycle through tools right to left</th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>Toggle between active tool and settings</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Toggle between active tool and settings (new in Firefox 43)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>Toggle toolbox between the last 2 <a href="/en-US/docs/Tools/Tools_Toolbox#Docking_mode">docking modes</a> (new in Firefox 41)</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Toggle split console (except if console is the currently selected tool)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<p>Estes atalhos funcionam em todas as ferramentas que estão hospedadas na caixa de ferramentas.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>OS X</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Increase font size</th> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + <td><kbd>Cmd</kbd> + <kbd> + </kbd></td> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + </tr> + <tr> + <th scope="row">Decrease font size</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">Reset font size</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Editor_fonte">Editor fonte</h2> + +<div id="source-editor"> +<p>Esta tabela lista os atalhos predefinidos para o editor fonte.</p> + +<p>Nas secção das '<a href="/pt-PT/docs/Tools/Tools_Toolbox">Preferências do Editor'</a> das configurações das ferramentas de desenvolvimento, pode escolher para utilizar Vim, Emacs, ou combinações de teclas de Sublime Text.</p> + +<p>Para as selecionar, visite <code>about:config</code>, selecione a definição <code>devtools.editor.keymap</code>, e atribua "vim" ou "emacs", ou "sublime" para essa definição. Se fizer isso, as combinações selecionadas serão utilziadas para todas as ferramentas de desenvolvimento que utilziam o editor fonte. Precisa de reabrir o editor para que a alteração seja aplicada.</p> + +<p>A partir do Firefox 33, a preferência de combinação de teclas está exposta na secção de <a href="/pt-PT/docs/Tools/Tools_Toolbox">Preferências do Editor </a>das definições das ferramentas de desenvolvimento, e pode definir isso lá, em vez de <code>about:config</code>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>OS X</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Ir para a linha</th> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Encontrar um ficheiro</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Encontrar novamente</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Selecionar tudo</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Cortar</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">Copiar</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Colar</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Anular</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Refazer</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Indentar</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Remover indentação</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Mover linha(s) para cima</th> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + </tr> + <tr> + <th scope="row">Mover linha(s) para baixo</th> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + </tr> + <tr> + <th scope="row">Comentar/remover comentário linha(s)</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Inspetor_de_Página">Inspetor de Página</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Elemento de Inspeção</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Selecionador_de_Nodo">Selecionador de Nodo</h3> + +<p>Estes atalhos funcionam enquanto o <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Selecionar_um_elemento#Com_o_selecionador_de_nodo">selecionador de nodo</a> estiver ativo.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Select the element under the mouse and cancel picker mode</th> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + </tr> + <tr> + <th scope="row">Select the element under the mouse and stay in picker mode</th> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Painel_HTML">Painel HTML</h3> + +<p>Estes atalhos funcionam enquanto estiver no <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_HTML" title="/en-US/docs/Tools/Page_Inspector#HTML_pane">painel Inspetor HTML</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Delete the selected node</th> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + </tr> + <tr> + <th scope="row">Undo delete of a node</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Redo delete of a node</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Move to next node (expanded nodes only)</th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Move to previous node</th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Expand currently selected node</th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row">Collapse currently selected node</th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row">Step forward through the attributes of a node</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Step backward through the attributes of a node</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Start editing the selected attribute</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Hide/show the selected node</th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row">Focus on the search box in the HTML pane</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Edit as HTML</th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Copy the selected node's outer HTML (new in Firefox 42)</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Scroll the selected node into view (new in Firefox 44)</th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Find the next match in the markup, when searching is active</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Find the previous match in the markup, when searching is active</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Barra_de_Breadcrumbs">Barra de <em>Breadcrumbs</em></h3> + +<p>Este atalhos funcionam quando a <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_HTML#Breadcrumbs_de_HTML">barra de breadcrumbs</a> estiver focada.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Move to the previous element in the breadcrumbs bar </th> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + </tr> + <tr> + <th scope="row">Move to the next element in the breadcrumbs bar </th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row">Focus the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML pane</a></th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Focus the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS pane</a></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Painel_CSS">Painel CSS</h3> + +<p>Estes atalhos funcionam quando estiver no <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_CSS" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">painel de Inspetor CSS</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Focus on the search box in the CSS pane</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Clear search box content (only when the search box is focused, and content has been entered)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Step forward through properties and values</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Step backward through properties and values</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Start editing property or value (Rules view only, when a property or value is selected, but not already being edited)</th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Cycle up and down through auto-complete suggestions (Rules view only, when a property or value is being edited)</th> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Choose current auto-complete suggestion (Rules view only, when a property or value is being edited)</th> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Return</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Increment selected value by 1</th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Decrement selected value by 1</th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Increment selected value by 100</th> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + </tr> + <tr> + <th scope="row">Decrement selected value by 100</th> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + </tr> + <tr> + <th scope="row">Increment selected value by 10</th> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Decrement selected value by 10</th> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Increment selected value by 0.1</th> + <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Opt</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Decrement selected value by 0.1</th> + <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Opt</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Show/hide more information about current property (Computed view only, when a property is selected, new in Firefox 49)</th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Open MDN reference page about current property (Computed view only, when a property is selected, new in Firefox 49)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Open current CSS file in Style Editor (Computed view only, when more information is shown for a property and a CSS file reference is focused, new in Firefox 49)</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Depurador">Depurador</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Open the Debugger</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Search for a string in the current file</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd> </td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Find next in the current file</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd> </td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd> </td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd> </td> + </tr> + <tr> + <th scope="row">Search for function definitions</th> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Search for scripts by name</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> </td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Resume execution when at a breakpoint</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Step over</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Step into</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Step out</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this </a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">guide to using these keys as standard function keys</a>. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use <kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>).</p> + +<p><strong>Note:</strong> Before Firefox 66, the combination <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> on Windows and Linux or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> on macOS would open/close the Debugger. From Firefox 66 and later, this is no longer the case.</p> +</div> + +<h2 id="Consola_da_Web">Consola da Web</h2> + +<div id="old-debugger"> +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Open the Web Console</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Search in the message display pane</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Clear the <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">object inspector pane</a></th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Focus on the command line</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Clear output</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>From Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>From Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Intérprete_da_linha_de_comando">Intérprete da linha de comando</h3> + +<p>Estes atalhos aplicam-se quando estiver no <a href="/pt-PT/docs/Tools/Consola_da_Web#IIntérprete_da_linha_de_comando" title="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">intérprete da linha de comando</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Scroll to start of console output (only if the command line is empty)</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Scroll to end of console output (only if the command line is empty)</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row">Page up through console output</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Page down through console output</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Go backward through <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">command history</a></th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Go forward through command history</th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Move to the beginning of the line</th> + <td><kbd>Home</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Move to the end of the line</th> + <td><kbd>End</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Execute the current expression</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Add a new line, for entering multiline expressions</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Janela_de_Completar_Automaticamente">Janela de 'Completar Automaticamente'</h3> + +<p>Este atalhos aplicam-se enquanto a <a href="/pt-PT/docs/Tools/Consola_da_Web">janela de completar automaticamente</a> estiver aberta:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Choose the current autocomplete suggestion</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Cancel the autocomplete popup</th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Move to the previous autocomplete suggestion</th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Move to the next autocomplete suggestion</th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Page up through autocomplete suggestions</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Page down through autocomplete suggestions</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Scroll to start of autocomplete suggestions</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Scroll to end of autocomplete suggestions</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Editor_de_Estilo">Editor de Estilo</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abrir o Editor de Estilo</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Abrir janela 'Completar Automaticamente'</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> + +<div id="scratchpad"> +<h2 id="Scratchpad"><em>Scratchpad</em></h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Open the Scratchpad</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Run Scratchpad code</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Run Scratchpad code, display the result in the <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">object inspector</a></th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Run Scratchpad code, insert the result as a comment</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Re-evaluate current function</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Reload the current page, then run Scratchpad code</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Save the pad</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Open an existing pad</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Create a new pad</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">Close Scratchpad</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row">Pretty print the code in Scratchpad</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Show autocomplete suggestions</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Show inline documentation</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Eyedropper"><em>Eyedropper</em></h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;"><strong>Comando</strong></th> + <th scope="col"><strong>Windows</strong></th> + <th scope="col"><strong>macOS</strong></th> + <th scope="col"><strong>Linux</strong></th> + </tr> + <tr> + <th scope="row">Selecionar a cor atual</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Rejeitar o <em>Eyedropper</em></th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Mover 1 píxel</th> + <td><kbd>Arrow keys</kbd></td> + <td><kbd>Arrow keys</kbd></td> + <td><kbd>Arrow keys</kbd></td> + </tr> + <tr> + <th scope="row">Mover 10 píxeis</th> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style=""></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"></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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"></div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"></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="Copiar"></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="Tamanho da fonte"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"></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="Fixar a janela de pop-up"></div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result"></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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"></div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/capturas_de_ecra/index.html b/files/pt-pt/tools/capturas_de_ecra/index.html new file mode 100644 index 0000000000..79f19d78ea --- /dev/null +++ b/files/pt-pt/tools/capturas_de_ecra/index.html @@ -0,0 +1,42 @@ +--- +title: Capturas de ecrã +slug: Tools/Capturas_de_ecra +tags: + - Ferramentas +translation_of: Tools/Taking_screenshots +--- +<div>{{ToolsSidebar}}</div><p>You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page.</p> + +<h2 id="Efetuar_capturas_de_ecrã_de_uma_página">Efetuar capturas de ecrã de uma página</h2> + +<p>Use the screenshot icon: <img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> to take a full-page screenshot of the current page.</p> + +<p>By default, the screenshot icon is not enabled. To enable it:</p> + +<ul> + <li>visit the <a href="/en-US/docs/Tools/Settings">Settings</a> page</li> + <li>find the section labeled "Available Toolbox Buttons"</li> + <li>check the box labeled "Take a screenshot of the entire page".</li> +</ul> + +<p>You'll now see the icon in the toolbar:</p> + +<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p> + +<p>Click the icon to take a screenshot of the current page. The screenshot is saved to your browser's "Downloads" directory:</p> + +<p>{{EmbedYouTube("HKS6MofdXVE")}}</p> + +<h2 id="Efetuar_uma_captura_de_ecrã_de_um_elemento">Efetuar uma captura de ecrã de um elemento</h2> + +<p>To take a screenshot of a single element in the page, activate the context menu on that element in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">Inspector's HTML pane</a>, and select "Screenshot Node". The screenshot is saved to the browser's "Downloads" directory:</p> + +<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p> + +<h2 id="Copiar_capturas_de_ecrã_para_a_área_de_transferência">Copiar capturas de ecrã para a área de transferência</h2> + +<p>From Firefox 53, you can also copy the screenshot to the clipboard. Just check the box in Settings labeled "Screenshot to clipboard":</p> + +<p>{{EmbedYouTube("AZedFGh6F78")}}</p> + +<p>Now, whenever you take a screenshot, the screenshot is also copied to the clipboard.</p> diff --git a/files/pt-pt/tools/configurações/index.html b/files/pt-pt/tools/configurações/index.html new file mode 100644 index 0000000000..ec62fb999b --- /dev/null +++ b/files/pt-pt/tools/configurações/index.html @@ -0,0 +1,244 @@ +--- +title: Configurações +slug: Tools/Configurações +translation_of: Tools/Settings +--- +<div>{{ToolsSidebar}}</div><h2 id="Abrir_as_Configurações">Abrir as Configurações</h2> + +<p>Para ver o painel das 'Configurações das Ferramentas de Desenvolviemtno', abra quaisquer 'Ferramentas de Desenvolvimento', e depois:</p> + +<ul> + <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li> + <li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li> + <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li> +</ul> + +<p>The Settings pane looks something like this:</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14703/devtool-settings-squashed.png" style=""></p> + +<h2 id="Categorias">Categorias</h2> + +<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3> + +<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p> + +<h3 id="Botões_Disponíveis_da_Caixa_de_Ferramentas">Botões Disponíveis da Caixa de Ferramentas</h3> + +<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p> + +<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p> + +<h3 id="Temas">Temas</h3> + +<p>This enables you to choose one of three different themes.</p> + +<p>There's a light theme, which is the default:</p> + +<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + +<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p> + +<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p> + +<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<h3 id="Preferências_comuns">Preferências comuns</h3> + +<p>Settings that apply to more than one tool. There's just one of these:</p> + +<dl> + <dt><em>Enable persistent logs</em></dt> + <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd> +</dl> + +<h3 id="Inspetor">Inspetor</h3> + +<dl> + <dt><em>Show browser styles</em></dt> + <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd> + <dt><em>Truncate DOM attributes</em></dt> + <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd> + <dt><em>Default color unit</em></dt> + <dd>A setting to control how colors are represented in the inspector: + <ul> + <li>Hex</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>color name</li> + <li>As authored.</li> + </ul> + </dd> + <dt><em>Enable layout panel</em></dt> + <dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Consola_da_Web">Consola da Web</h3> + +<dl> + <dt><em>Enable timestamps</em></dt> + <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd> + <dt><em>Enable new console frontend</em></dt> + <dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Depurador">Depurador</h3> + +<dl> + <dt><em>Enable Source Maps</em></dt> + <dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd> + <dt><em>Enable new debugger frontend</em></dt> + <dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Editor_de_Estilo">Editor de Estilo</h3> + +<dl> + <dt><em>Show original sources</em></dt> + <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd> + <dt><em>Autocomplete CSS</em></dt> + <dd>Enable the Style Editor to offer autocomplete suggestions.</dd> +</dl> + +<h3 id="Comportamento_da_Captura_de_Ecrã">Comportamento da Captura de Ecrã</h3> + +<dl> + <dt><em>Screenshot to clipboard</em></dt> + <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd> + <dt><em>Play camera shutter sound</em></dt> + <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd> +</dl> + +<h3 id="Preferências_do_Editor">Preferências do Editor</h3> + +<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<dl> + <dt><em>Detect indentation</em></dt> + <dd>Auto-indent new lines based on the current indentation.</dd> + <dt><em>Autoclose brackets</em></dt> + <dt> </dt> + <dt><em>Indent using spaces</em></dt> + <dt> </dt> + <dt><em>Tab size</em></dt> + <dt> </dt> + <dt><em>Keybindings</em></dt> + <dd>Choose the default CodeMirror keybindings, or keybindings from one of several popular editors: + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </dd> +</dl> + +<h3 id="Configurações_avançadas">Configurações avançadas</h3> + +<dl> + <dt><em>Show Gecko platform data</em></dt> + <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd> +</dl> + +<dl> + <dt><em>Disable HTTP Cache</em></dt> + <dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. + <div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div> + </dd> + <dt><em>Disable JavaScript</em></dt> + <dd>Reload the current tab with JavaScript disabled.</dd> + <dt><em>Enable Service Workers over HTTP</em></dt> + <dd>Enable Service Worker registrations from insecure websites.</dd> + <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt> + <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd> + <dt><em>Enable remote debugging</em></dt> + <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd> + <dt><em>Enable worker debugging</em></dt> + <dd>Enable a panel within the debugger to debug workers. + <p class="note">Nota: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p> + </dd> +</dl> + +<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: 1; display: none; left: -8px; top: -25px;"> </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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"> </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="Copiar"> </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="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </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="Fixar a janela de pop-up"> </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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/consola_da_web/abertura_consola_web/index.html b/files/pt-pt/tools/consola_da_web/abertura_consola_web/index.html new file mode 100644 index 0000000000..e997885daf --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/abertura_consola_web/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 (>>). 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> diff --git a/files/pt-pt/tools/consola_da_web/ajuda/index.html b/files/pt-pt/tools/consola_da_web/ajuda/index.html new file mode 100644 index 0000000000..c789f98427 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/ajuda/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> diff --git a/files/pt-pt/tools/consola_da_web/atalhos_teclado/index.html b/files/pt-pt/tools/consola_da_web/atalhos_teclado/index.html new file mode 100644 index 0000000000..11e3017557 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/atalhos_teclado/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/consola_da_web/dividir_consola/index.html b/files/pt-pt/tools/consola_da_web/dividir_consola/index.html new file mode 100644 index 0000000000..9092beeae0 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/dividir_consola/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/consola_da_web/index.html b/files/pt-pt/tools/consola_da_web/index.html new file mode 100644 index 0000000000..e0f34f8069 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/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/consola_da_web/mensagens_consola/index.html b/files/pt-pt/tools/consola_da_web/mensagens_consola/index.html new file mode 100644 index 0000000000..db51be1571 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/mensagens_consola/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&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/consola_da_web/o_interprete_da_linha_de_comandos/index.html b/files/pt-pt/tools/consola_da_web/o_interprete_da_linha_de_comandos/index.html new file mode 100644 index 0000000000..16554ff278 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/o_interprete_da_linha_de_comandos/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>>></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"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>The iframe defines a new function:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></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/consola_da_web/rich_output/index.html b/files/pt-pt/tools/consola_da_web/rich_output/index.html new file mode 100644 index 0000000000..591a4cd624 --- /dev/null +++ b/files/pt-pt/tools/consola_da_web/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/debugger/configurações/index.html b/files/pt-pt/tools/debugger/configurações/index.html new file mode 100644 index 0000000000..bd111e5058 --- /dev/null +++ b/files/pt-pt/tools/debugger/configurações/index.html @@ -0,0 +1,59 @@ +--- +title: Configurações +slug: Tools/Debugger/Configurações +translation_of: Archive/Tools/Debugger_settings +--- +<div>{{ToolsSidebar}}</div><p>O Depurador tem o seu próprio menu de configurações, que pode aceder a partir de um ícone na <a href="/en-US/docs/Tools/Debugger/UI_Tour#toolbar">barra de ferramentas</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12930/debugger-options.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>Cada definição é um comutador simples de lig./desl.:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 40%;"><strong>Auto Prettify Minified Sources</strong></td> + <td>With this option enabled, the debugger will automatically detect minified JS files and <a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">pretty-print</a> them.</td> + </tr> + <tr> + <td><strong>Pause on Exceptions</strong></td> + <td>When this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.</td> + </tr> + <tr> + <td><strong>Ignore Caught Exceptions</strong></td> + <td> + <p>If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.</p> + + <p>This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.</p> + </td> + </tr> + <tr> + <td><strong>Show Panes on Startup</strong></td> + <td>When this option is enabled, the debugger's <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a> is visible when you first start the debugger.</td> + </tr> + <tr> + <td><strong>Show Only Enumerable Properties</strong></td> + <td>Do not display non-enumerable JavaScript properties.</td> + </tr> + <tr> + <td><strong>Show Variables Filter Box</strong></td> + <td>Enabling this option adds a "Filter variables" search box to the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a>, so that you can filter the displayed list of variables.</td> + </tr> + <tr> + <td><strong>Show Original Sources</strong></td> + <td>Enabling this option will make the debugger use <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.</td> + </tr> + <tr> + <td><strong>Automatically Black Box Minified Sources</strong></td> + <td> + <div class="geckoVersionNote"> + <p>New in Firefox 33.</p> + </div> + + <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Automatically <a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">black box</a> sources whose URL ends with ".min.js". Defaults to true.</span></span></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pt-pt/tools/debugger/demonstracao_iu/index.html b/files/pt-pt/tools/debugger/demonstracao_iu/index.html new file mode 100644 index 0000000000..9402c890b7 --- /dev/null +++ b/files/pt-pt/tools/debugger/demonstracao_iu/index.html @@ -0,0 +1,94 @@ +--- +title: Demonstração da IU +slug: Tools/Debugger/Demonstracao_IU +translation_of: Tools/Debugger/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>Este artigo é uma demonstração rápida das secções principais da interface do utilizador do 'Depurador de JavaScript'. A IU está dividida verticalmente em 3 painéis:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Painel da lista fonte</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">Painel fonte</a></li> + <li>Um terceiro painel que está subdividido em quatro secções: + <ul> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">Barra de ferramentas</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Breakpoints list</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack">Call stack</a></li> + <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">Scopes</a></li> + </ul> + </li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<h2 id="Painel_da_lista_fonte">Painel da lista fonte</h2> + +<p>The source list pane lists all the JavaScript source files loaded into the page, and enables you to select one to debug. At the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>You can <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_for_files">search for a file</a> using <kbd>Ctrl</kbd> + <kbd>P</kbd> (<kbd>Cmd</kbd> + <kbd>P</kbd> on a Mac).</p> + +<h2 id="Painel_fonte">Painel fonte</h2> + +<p>This shows the JavaScript file currently loaded.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">When the source pane is focused you can <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">search for a string in the file</a> using <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac).</p> + +<p><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Breakpoints</a> have a blue arrow overlaid on the line number. <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Conditional breakpoints</a> have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:</p> + +<ul> + <li>line 19 has a normal breakpoint</li> + <li>line 40 has a normal breakpoint, and the debugger is paused there</li> + <li>line 22 has a conditional breakpoint.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<h2 id="Barra_de_Ferramentas"><a name="toolbar">Barra de Ferramentas</a></h2> + +<p>No topo do painel à direita, existe uma barra de ferramentas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p>A barra de ferramentas consiste em:</p> + +<ul> + <li>four buttons to <a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">control the debugger's movement through the script</a>: + + <ul> + <li><strong>Play/pause</strong> (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li> + <li><strong>Step over</strong> (F10): steps across the current line of JavaScript code.</li> + <li><strong>Step in</strong> (F11): steps into the function call on the current line of JavaScript code.</li> + <li><strong>Step out</strong> (Shift-F11): runs the script until the current function exits.</li> + </ul> + </li> + <li>a button to control whether to <a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">(1) ignore all exceptions, (2) break on uncaught exceptions, or (3) break on all exceptions</a>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p> + +<h2 id="Lista_de_ponstos_de_quebra">Lista de ponstos de quebra</h2> + +<p>Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">enable/disable it</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p> + +<p> </p> + +<p> </p> + +<h2 id="Call_stack">Call stack</h2> + +<p> </p> + +<p> </p> + +<p>When the debugger's paused, you'll see a call stack:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;">Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.</p> + +<h2 id="Scopes">Scopes</h2> + +<p>In the right-hand pane you'll see a label "Scopes" with a disclosure arrow next to it. When the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">Objects are organized by scope: the most local appears first, and the global scope (Window, in the case of page scripts) appears last.</p> diff --git a/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html b/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html new file mode 100644 index 0000000000..c7e9842588 --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html @@ -0,0 +1,18 @@ +--- +title: Abrir o depurador +slug: Tools/Debugger/How_to/Abrir_o_depurador +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div> + +<p>Existem três maneiras para abrir o depurador:</p> + +<ul> + <li>Selecione "Depurador" no submenu de "Ferramentas de Programação" no Menu do Firefox (ou no menu de Ferramentas se exibe a barra do menu ou está num Mac OS X)</li> + <li> + <p>Pressione <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> no Windows e no Linux, ou <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Z</kbd> no macOS (a partir do Firefox 71; anterior ao Firefox 66, a letra neste atalho era S).</p> + </li> + <li>Clique no botão ( <img alt="new fx menu" class="frameless wiki-image" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;" title=""> ) Menu, selecione "Ferramentas de programação", depois "Depurador".</li> +</ul> + +<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p> diff --git a/files/pt-pt/tools/debugger/how_to/index.html b/files/pt-pt/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html b/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..93144c1b5f --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Utilizar um "source map" +slug: Tools/Debugger/How_to/Use_a_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div> + +<p>As fontes de JavaScript executadas pelo navegador são geralmente transformadas de alguma forma a partir das fontes originais criadas por um programador. Por exemplo:</p> + +<ul> + <li><em>sources</em> são geralmente combinadas e <a href="https://en.wikipedia.org/wiki/Minification_(programming)">reduzidas</a> para tornar mais eficiente a entrega das mesmas a partir do servidor.</li> + <li>O JavaScript em execução numa página é geralmente gerado por máquina, como quando compilado a partir de um idioma como <a href="http://coffeescript.org/">CoffeeScript</a> ou <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> +</ul> + +<p>Nessas situações, é muito mais fácil debugar o fonte original do que o fonte no estado transformado que o navegador obteve. Um <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> é um arquivo que mapea da fonte transformada para a original, permitindo ao navegador reconstruir a fonte original e disponibilizá-la no debugger.</p> + +<p>Para que o navegador trabalhe com um source map, você deve:</p> + +<ul> + <li>gerar o source map</li> + <li>incluir um comentário no arquivo transformado que aponte para o source map. A sintaxe do comentário é assim:</li> +</ul> + +<pre class="brush: js notranslate"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> + +<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> + +<p>No vídeo acima carregamos <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. Essa página carrega um fonte chamado "main.js" que foi originalmente escrito em CoffeeScript e compilado para JavaScript. O fonte compilado contém um comentário assim, que aponta para o source map:</p> + +<pre class="brush: js notranslate"><code>//# sourceMappingURL=main.js.map</code></pre> + +<p>No <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a> do Debugger, o fonte original CoffeeScript agora aparece como "main.coffee", e podemos acessá-lo para debugar como qualquer outra fonte.</p> diff --git a/files/pt-pt/tools/debugger/index.html b/files/pt-pt/tools/debugger/index.html new file mode 100644 index 0000000000..dc6feaf51b --- /dev/null +++ b/files/pt-pt/tools/debugger/index.html @@ -0,0 +1,62 @@ +--- +title: Depurador +slug: Tools/Debugger +tags: + - Depurador + - Depuração + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox OS + - 'l10n:prioridade' +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div> + +<div>O «Depurador» de JavaScript permite-lhe explorar o código de JavaScript e examinar ou modifcar o seu estado para ajudar a rastrear erros (<em>bugs</em>).</div> + +<div></div> + +<div> +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>Pode-o utilizar para depurar código em execução localmente no Firefox ou em execução remotamente, por exemplo num dispositivo Android a executar o Firefox para Android. Consulte <a href="/pt-PT/docs/Tools/Remote_Debugging">depuração remota </a>para saber como ligar o depurador a um destino remoto.</p> + +<p>To find your way around the debugger, here's a <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> +</div> + +<h2 id="Como...">Como...</h2> + +<p>Para saber o que pode fazer com o depurador, consulte os guias seguintes:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/pt-PT/docs/Tools/Debugger/How_to/Abrir_o_depurador">Abrir o depurador</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/Set_a_logpoint">Set a logpoint</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints">Set event listener breakpoints</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Break on exceptions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/Debug_worker_threads">Debug worker threads</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_watchpoints">Use watchpoints</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger/Break_on_DOM_mutation">Break on DOM Mutation</a></li> +</ul> +</div> + +<hr> +<h2 id="Referência">Referência</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/pt-PT/docs/Tools/Debugger/Atalhos_de_teclado">Atalhos de teclado</a></li> + <li><a href="/pt-PT/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li> + <li></li> +</ul> +</div> diff --git a/files/pt-pt/tools/debugger/source_map_errors/index.html b/files/pt-pt/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..4e5dfc450a --- /dev/null +++ b/files/pt-pt/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Depurador + - Depuração + - Ferramentas + - Ferramentas de Desenvolvimento + - Referencia + - Source maps +translation_of: Tools/Debugger/Source_map_errors +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><em>Source maps</em> são ficheiros JSON que fornecem um modo para associar as fontes transformadas, como visto pelo navegador, com as suas fontes originais, conforme escrito pelo programador. Às vezes, pode encontrar problemas ao trabalhar com <em>source maps</em>. Esta página explica os problemas mais comuns e como os corrigir.</p> + +<div class="note"> +<p><strong>Nota</strong>: se é novo para <em>source maps</em>, pode saber mais sobre os mesmo em <a href="/pt-PT/docs/Tools/Debugger/How_to/Use_a_source_map">How to use a source map</a>.</p> +</div> + +<h2 id="Reportar_Source_map_error_geral">Reportar "Source map error" geral</h2> + +<p>If you do see a problem, a message will appear in the webconsole. This message will show an error message, the resource URL, and the source map URL:</p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>Here, the resource URL tells us that <code>bundle.js</code> mentions a source map, and the source map URL tells us where to find the source map data (in this case, relative to the resource). The error tells us that the source map is not JSON data — so we're serving the wrong file.</p> + +<p>There are a few common ways that source maps can go wrong; they are detailed in the following sections.</p> + +<h2 id="Source_map_está_em_falta_ou_inacessível">"Source map" está em falta ou inacessível</h2> + +<p>O recurso <em>source map</em> pode estar em falta ou inacessível.</p> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>The fix here is to make sure the file is being served and is accessible to the browser</p> + +<h2 id="Source_map_inválido">"Source map" inválido</h2> + +<p>The source map data can be invalid — either simply not a JSON file at all, or with an incorrect structure. Typical error messages here are:</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="Source_original_está_em_falta">"Source" original está em falta</h2> + +<p>An original source may be missing. You may encounter this when trying to open one of the original sources in the debugger. The message looks a little different in this case:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>In this case, the error will also be displayed in the source tab in the debugger:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> + +<h2 id="NetworkError_quando_tenta_obter_o_recurso">"NetworkError" quando tenta obter o recurso</h2> + +<p>A bug in Firefox prevents it from loading source maps for web extensions.</p> + +<p>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> for details.</p> + +<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource. + Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js + Source-Map-Adresse: background.js.map</span></span></span></pre> + +<p>The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.</p> diff --git a/files/pt-pt/tools/desempenho/arvore_de_chamada/index.html b/files/pt-pt/tools/desempenho/arvore_de_chamada/index.html new file mode 100644 index 0000000000..d5b2dd2d7f --- /dev/null +++ b/files/pt-pt/tools/desempenho/arvore_de_chamada/index.html @@ -0,0 +1,193 @@ +--- +title: Arvóre de Chamada +slug: Tools/Desempenho/Arvore_de_Chamada +tags: + - Desempenho + - JavaScript + - memoria +translation_of: Tools/Performance/Call_Tree +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>A '<strong>Árvore de Chamada</strong>' (Call Tree) diz-lhe quais as funções de JavaScript que o navegador gastou mais tempo. Ao analisar os resultados, pode encontrar estrangulamentos no seu código - locais onde o navegador está a gastar uma quantidade desproporcionalmente grande de tempo.</p> + +<p>Estes estrangulamentos são locais onde quaisquer otimizações que pode fazer irão ter um grande impacto.</p> +</div> + +<p>The Call Tree is a sampling profiler. It periodically samples the state of the JavaScript engine and records the stack for the code executing at the time. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser spent executing it.</p> + +<div class="note"> +<p>In this article, we'll use the output of a simple program as an example. If you want to get the program to experiment with your profile, you can find it <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/">here</a>. You can find the specific profile we discuss <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json">here</a> - just import it to the performance tool to follow along.</p> + +<p>There's a short page describing the structure of this program <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">here</a>.</p> + +<p>Note that we use the same program - the same profile, in fact - in the documentation page for the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a>.</p> +</div> + +<p>The screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort. To do this, it generates some arrays filled with random integers and sorts them using each algorithm in turn.</p> + +<p>We've <a href="/en-US/docs/Tools/Performance/UI_Tour#Zooming_in">zoomed</a> into the part of the recording that shows a long JavaScript marker:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>The Call Tree presents the results in a table. Each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest.</p> + +<p><em>Samples</em> is the number of samples that were taken when we were executing this particular function.</p> + +<p><em>Self Cost</em> is that number as a percentage of the total number of samples in the selected portion of the recording.</p> + +<p><em>Self Time</em> is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording.</p> + +<p>In the current version of the Call Tree, these are the most important columns. Functions with a relatively high <em>Self Cost</em> are good candidates for optimization, either because they take a long time to run, or because they are called very often.</p> + +<p>This screenshot tells us something we probably already knew: Bubble sort is a very inefficient algorithm. We have about six times as many samples in bubble sort as in selection sort, and 13 times as many as in quicksort.</p> + +<h2 id="Mover-se_na_árvore_de_chamada">Mover-se na árvore de chamada</h2> + +<p>Next to each function name is a disclosure arrow: Click that, and you can see the path back up the call tree, from the function in which the sample was taken, to the root. For example, we can expand the entry for <code>bubbleSort()</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p> + +<p>So we can see the call graph is like this:</p> + +<pre>sortAll() + + -> sort() + + -> bubbleSort()</pre> + +<p>Note also that <em>Self Cost</em> for <code>sort()</code> here is 1.45%, and note that this is the same as for the separate entry for <code>sort()</code> later in the list. This is telling us that some samples were taken in <code>sort()</code> itself, rather than in the functions it calls.</p> + +<p>Sometimes there's more than one path back from an entry to the top level. Let's expand the entry for <code>swap()</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>There were 253 samples taken inside <code>swap()</code>. But <code>swap()</code> was reached by two different paths: both <code>bubbleSort()</code> and <code>selectionSort()</code> use it. We can also see that 252 of the 253 samples in <code>swap() </code>were taken in the <code>bubbleSort()</code> branch, and only one in the <code>selectionSort()</code> branch.</p> + +<p>This result means that bubble sort is even less efficient than we had thought! It can shoulder the blame for another 252 samples, or almost another 10% of the total cost.</p> + +<p>With this kind of digging, we can figure out the whole call graph, with associated sample count:</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<h2 id="Dados_da_plataforma">Dados da plataforma</h2> + +<p>You'll also see some rows labeled <em>Gecko</em>, <em>Input & Events</em>, and so on. These represent internal browser calls.</p> + +<p>This can be useful information too. If your site is making the browser work hard, this might not show up as samples recorded in your code, but it is still your problem.</p> + +<p>In our example, there are 679 samples assigned to <em>Gecko </em>- the second-largest group after <code>bubbleSort()</code>. Let's expand that:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p> + +<p>This result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our <code>sort()</code> call. If we look at the code for <code>sort()</code>, it should be fairly obvious that the high platform data cost is coming from repeated calls to <code>console.log()</code>:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>It would certainly be worthwhile considering more efficient ways of implementing this.</p> + +<p>One thing to be aware of here is that idle time is classified as <em>Gecko</em>, so parts of your profile where your JavaScript isn't running will contribute <em>Gecko</em> samples. These aren't relevant to the performance of your site.</p> + +<div class="note"> +<p>By default, the Call Tree doesn't split platform data out into separate functions, because they add a great deal of noise, and the details are not likely to be useful to people not working on Firefox. If you want to see the details, check "Show Gecko Platform Data" in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Settings</a>.</p> +</div> + +<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: 1; display: none; left: -8px; top: -25px;"> </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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"> </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="Copiar"> </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="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </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="Fixar a janela de pop-up"> </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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/desempenho/cascata/index.html b/files/pt-pt/tools/desempenho/cascata/index.html new file mode 100644 index 0000000000..3977d5d088 --- /dev/null +++ b/files/pt-pt/tools/desempenho/cascata/index.html @@ -0,0 +1,563 @@ +--- +title: Cascata +slug: Tools/Desempenho/Cascata +translation_of: Tools/Performance/Waterfall +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>A '<strong>Cascata</strong>' (Waterfall) mostra-lhe várias coisas que o navegador está a fazer na medida em que este excecuta o seu site ou aplicação. É baseado na ideia de que as coisas que o navegador faz quando executa um site pode ser dividido em vários tipos - executar JavaScript, atualizar a disposição, etc... - e que em qualquer ponto no tempo, o navegador está a fazer essas coisas.</p> + +<p>Assim, se vir um sinal de um problema de desempenho - uma quebra na <em>frame rate</em>, por exemplo - pode ir para a 'Cascata' para ver o que o navegador estava a fazer nesse ponto da gravação.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Along the X-axis is time. Recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution.</p> + +<p>When a marker is selected you'll see more information about it in a sidebar on the right. This includes the marker's duration and some more information that's specific to the <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marker type</a>.</p> + +<h2 id="Marcadores"><a id="timeline-color-coding" name="timeline-color-coding"></a>Marcadores</h2> + +<p>The markers for operations are color-coded and labeled. The following operations are recorded:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 20%;">Nome e descrição</th> + <th scope="col">Cor</th> + <th scope="col">Informação detalhada</th> + </tr> + </thead> + <tbody> + <tr> + <td style="width: 40%;"> + <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>DOM Event</strong></a></p> + + <p>JavaScript code that's executed in response to a DOM event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td style="width: 45%;"> + <dl> + <dt>Event Type</dt> + <dd>For example, "click" or "message".</dd> + </dl> + + <dl> + <dt>Event Phase</dt> + <dd>For example, "Target" or "Capture".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p>JavaScript functions executed in the page are labeled with the reason the function was called:</p> + + <p><strong>Script Tag<br> + setInterval<br> + setTimeout<br> + requestAnimationFrame<br> + Promise Callback<br> + Promise Init<br> + Worker<br> + JavaScript URI<br> + Event Handler</strong></p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Analisar HTML</strong></p> + + <p>Time spent parsing the page's HTML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Analisar XML</strong></p> + + <p>Time spent parsing the page's XML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Recalcular Estilo</strong></p> + + <p>Calculating the computed styles that apply to page elements.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Restyle Hint</dt> + <dd>A string indicating what kind of restyling is needed. The hint may be any of:<br> + Self<br> + Subtree<br> + LaterSiblings<br> + CSSTransitions<br> + CSSAnimations<br> + SVGAttrAnimations<br> + StyleAttribute<br> + StyleAttribute_Animations<br> + Force<br> + ForceDescendants</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Disposição (Layout)</strong></p> + + <p>Calculating the position and size of page elements. This operation is sometimes called "reflow".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Pintura</strong></p> + + <p>Desenhar píxeis para o ecrã.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Coleção de Lixo</strong></p> + + <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection">Garbage collection event</a>. Non-incremental GC events are labeled "(Non-incremental)".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Motivo</dt> + <dd>A string the indicating the reason GC was performed.</dd> + <dt>Motivo Não Incremental</dt> + <dd>If the GC event was non-incremental, the string indicates the reason non-incremental GC was performed.</dd> + </dl> + + <div class="geckoVersionNote"> + <p>New in Firefox 46: if the GC event was caused by allocation pressure, a link appears, labeled "Show Allocation Triggers". Click the link to see the allocation profile leading up to this GC event.</p> + + <p>See <a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations and Garbage Collection</a> for more details.</p> + </div> + </td> + </tr> + <tr> + <td> + <p><strong>Ciclo da Coleção</strong></p> + + <p>Reclaiming C++ reference-counted data structures.</p> + + <p>Like garbage collection, but for C++ objects. See <a href="http://blog.kylehuey.com/post/27564411715/cycle-collection">Kyle Huey's blog post about cycle collection</a>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Tipo</dt> + <dd>Always "Collect".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>CC - Reduçãod e Gráfico</strong></p> + + <p>Preparation/pre-optimization for Cycle Collection.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Tipo</dt> + <dd>Always "ForgetSkippable".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Consola</strong></p> + + <p>The period between matching calls to <code>console.time()</code> and <code>console.timeEnd()</code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Nome do temporizador</dt> + <dd>The argument passed to the <code>console</code> functions.</dd> + <dt>Stack at start</dt> + <dd>Call stack <code>console.time()</code>, with links to functions.</dd> + <dt>Stack at End</dt> + <dd>(New in Firefox 41). Call stack at <code>console.timeEnd()</code>. If this is inside a callback from a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, this will also show the <a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Data/Hora</strong></p> + + <p>A single call to <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Etiqueta</dt> + <dd>The argument passed to <code>timeStamp()</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>DOM - Conteúdo Carregado</strong></p> + + <p>The document's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Carregamento</strong></p> + + <p>The document's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Worker event in main thread</strong></p> + + <p>Shown when the main thread sends a message to a worker, or receives a message from a worker.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td> + <td> + <p>One of:</p> + + <dl> + <dt>Serialize data on the main thread</dt> + <dd>The main thread is serializing a message to be sent to the worker.</dd> + <dt>Deserialize data on the main thread</dt> + <dd>The main thread is deserializing a message received from the worker.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Worker event in worker thread</strong></p> + + <p>Shown when a worker receives a message from the main thread, or sends a message to the main thread.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td> + <td> + <p>One of:</p> + + <dl> + <dt>Serialize data in Worker</dt> + <dd>The worker is serializing a message to be sent to the main thread.</dd> + <dt>Deserialize data in Worker</dt> + <dd>The worker is deserializing a message received from the main thread.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>The markers, and their colors, are the same in the Waterfall tool as in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">Waterfall overview</a>, making is easy to correlate from one to the other.</p> + +<h3 id="Filtrar_marcadores">Filtrar marcadores</h3> + +<p>You can control which markers are displayed using a button in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Padrões_de_cascata">Padrões de cascata</h2> + +<p>Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.</p> + +<h3 id="Renderizar_cascata">Renderizar cascata</h3> + +<p>One pattern that you'll often see in the Waterfall view is something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p> + +<p>This is a visualization of the basic algorithm the browser uses to update the page in response to some event:</p> + +<ol> + <li><strong>JavaScript Function Call</strong>: some event - for example, a DOM event - causes some JavaScript in the page to run. The JavaScript changes some of the page's DOM or CSSOM.</li> + <li><strong>Recalculate Style</strong>: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.</li> + <li><strong>Layout</strong>: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled "layout" but is also sometimes called "reflow".</li> + <li><strong>Paint</strong>: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "Composition".</li> +</ol> + +<p>This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.</p> + +<p>Importantly for responsiveness, the browser doesn't always have to go through every step:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> update the page without having to run any JavaScript.</li> + <li>Not all CSS property changes cause a reflow. Changing properties that can alter an object's geometry and position, such as <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/display">display</a></code>, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, or <code><a href="/en-US/docs/Web/CSS/top">top</a></code>, will cause a reflow. However, changing properties that don't alter geometry or position, such as <code><a href="/en-US/docs/Web/CSS/color">color</a></code> or <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, will not.</li> + <li>Not all CSS property changes cause a repaint. In particular, if you animate an element using the <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.</li> +</ul> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a> article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.</p> + +<h3 id="Bloquear_JavaScript">Bloquear JavaScript</h3> + +<p>By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.</p> + +<p>Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.</p> + +<h3 id="Pinturas_dispendiosas">Pinturas dispendiosas</h3> + +<p>Some paint effects, such as <code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code>, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.</p> + +<h3 id="Coleção_de_lixo">Coleção de lixo</h3> + +<p>Red markers in the Waterfall represent garbage collection (GC) events, in which <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.</p> + +<p>To help reduce the length of pauses, SpiderMonkey implements <em>incremental GC</em>: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.</p> + +<ul> +</ul> + +<p>In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:</p> + +<ul> + <li>GC is needed when a lot of memory is being allocated</li> + <li>non-incremental GC is usually needed when the memory allocation rate is high enough that SpiderMonkey may run out of memory during incremental GC</li> +</ul> + +<p>When the Waterfall records a GC marker it indicates:</p> + +<ul> + <li>whether the GC was incremental or not</li> + <li>the reason the GC was performed</li> + <li>if the GC was non-incremental, the reason it was non-incremental</li> + <li>starting in Firefox 46, if the GC event was caused by allocation pressure, a link appears, labeled "Show Allocation Triggers". Click the link to see the allocation profile leading up to this GC event. See <a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations and Garbage Collection</a> for more details.</li> +</ul> + +<h2 id="Adicionar_marcadores_com_a_API_da_consola">Adicionar marcadores com a API da consola</h2> + +<p>Two markers are directly controlled by <a href="/en-US/docs/Web/API/Console">console API</a> calls: "Console" and "Timestamp".</p> + +<h3 id="Marcadores_da_consola">Marcadores da consola</h3> + +<p>These enable you to mark a specific section of the recording.</p> + +<p>To make a console marker, call <code>console.time()</code> at the start of the section, and <code>console.timeEnd()</code> at the end. These functions take an argument which is used to name the section.</p> + +<p>For example, suppose we have code like this:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + + console.timeEnd("calculating..."); + + return primes; +}</pre> + +<p>The Waterfall's output will look something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p>The marker is labeled with the argument you passed to <code>console.time()</code>, and when you select the marker, you can see the program stack in the right-hand sidebar.</p> + +<h4 id="Async_stack">Async stack</h4> + +<p class="geckoVersionNote">New in Firefox 41.</p> + +<p>Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point <code>console.timeEnd()</code> was called. If <code>console.timeEnd()</code> was called from the resolution of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.</p> + +<p>For example, consider code like this:</p> + +<pre class="brush: js">var timerButton = document.getElementById("timer"); +timerButton.addEventListener("click", handleClick, false); + +function handleClick() { + console.time("timer"); + runTimer(1000).then(timerFinished); +} + +function timerFinished() { + console.timeEnd("timer"); + console.log("ready!"); +} + +function runTimer(t) { + return new Promise(function(resolve) { + setTimeout(resolve, t); + }); +}</pre> + +<p>The Waterfall will display a marker for the period between <code>time()</code> and <code>timeEnd()</code>, and if you select it, you'll see the async stack in the sidebar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p> + +<h3 id="Marcadores_de_datahora">Marcadores de data/hora</h3> + +<p>Timestamps enable you to mark an instant in the recording.</p> + +<p>To make a timestamp marker, call <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. You can pass an argument to label the timestamp.</p> + +<p>For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + + if (i % 10 == 0) { + console.timeStamp(i.toString()); + } + + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + console.timeEnd("calculating..."); + return primes; +}</pre> + +<p>In the Waterfall you'll now see something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p> </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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"> </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="Copiar"> </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="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </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="Fixar a janela de pop-up"> </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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/desempenho/como_fazer/index.html b/files/pt-pt/tools/desempenho/como_fazer/index.html new file mode 100644 index 0000000000..f8e7e99d8d --- /dev/null +++ b/files/pt-pt/tools/desempenho/como_fazer/index.html @@ -0,0 +1,64 @@ +--- +title: Como fazer! +slug: Tools/Desempenho/Como_fazer +translation_of: Tools/Performance/How_to +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Abrir_as_ferramentas_de_«Desempenho»">Abrir as ferramentas de «Desempenho»</h2> + +<p>Para abrir as ferramentas de <strong>Desempenho</strong>:</p> + +<ul> + <li>pressione Shift + F5</li> + <li>selecione "Desempenho" no submenu das "Ferramentas de Programação" no Menu do Firefox (ou no menu das <strong>Ferramenats</strong> se exibir a barra do menu ou está num OS X)</li> + <li>selecione "Desempenho" no botão <strong>Ferramentas</strong>, na «Barra de Ferramentas», se tiver uma:<img alt="" src="https://mdn.mozillademos.org/files/10997/devtools-button.png" style="height: 76px; width: 728px;"></li> +</ul> + +<h2 id="Gravar_um_perfil">Gravar um perfil</h2> + +<p>To start a new recording, press the stopwatch icon in the Recordings pane. To stop, press it again:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13230/perf-record.png" style="display: block; height: 346px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<p>You can also start and stop recording from the Web Console, using <code><a href="/en-US/docs/Web/API/Console/profile">console.profile()</a></code> and <code><a href="/en-US/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code>.</p> + +<h2 id="Guardar_um_perfil">Guardar um perfil</h2> + +<p>To save a profile, click the link labeled "Save" in the Recordings pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13232/perf-save.png" style="display: block; height: 333px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Carregar_um_perfil">Carregar um perfil</h2> + +<p>To load a profile, click "Import..." and choose the file:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13226/perf-load.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Limpar_todos_os_perfis_carregados">Limpar todos os perfis carregados</h2> + +<p>To clear all loaded profiles, click "Clear".</p> + +<div class="note"> +<p>If you do this, you'll lose any loaded profiles that you have not saved.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13224/perf-clear.png" style="display: block; height: 353px; margin-left: auto; margin-right: auto; width: 818px;"></p> + +<h2 id="Selecionar_uma_ferramenta">Selecionar uma ferramenta</h2> + +<p>To switch between the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> tools, use the buttons in the toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13234/perf-select.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Configurar_marcadores_exibidos">Configurar marcadores exibidos</h2> + +<p>To control which markers are shown in the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, use the button in the toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13228/perf-markers.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Zoom">Zoom +</h2> + +<p>To zoom into a slice of the recording, select that slice in the recording overview:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13236/perf-zoom.png" style="display: block; height: 333px; margin-left: auto; margin-right: auto; width: 799px;"></p> diff --git a/files/pt-pt/tools/desempenho/frame_rate/index.html b/files/pt-pt/tools/desempenho/frame_rate/index.html new file mode 100644 index 0000000000..aa1c1c8817 --- /dev/null +++ b/files/pt-pt/tools/desempenho/frame_rate/index.html @@ -0,0 +1,60 @@ +--- +title: Frame rate +slug: Tools/Desempenho/Frame_rate +tags: + - frame rate +translation_of: Tools/Performance/Frame_rate +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p><em>Frame rate</em> é uma medida da reação de um site da Web. Uma <em>frame rate</em> baixa ou inconsistente pode fazer com que um site pareça irrespondível ou <em>janky</em>, criando uma má experiência de utilizador.</p> + +<p><strong>Uma <em>frame rate</em> de 60 imagens por segundo é o ideal para um desempenho suave, proporcionando-lhe um período de tempo de 16.7ms para todas as atualizações necessária na resposta para algum evento.</strong></p> + +<p>O gráfico de <em>frame rate</em> na ferramenta 'Desempenho' mostra-lhe a <em>frame rate</em> durante o curso de uma gravação. Este dá-lhe uma indicação rápida de onde o seu site poderá estar a ter problemas, permitindo-lhe utilizar as outras ferramentas para uma análise mais aprofundada.</p> +</div> + +<h2 id="Frame_rate_e_resposta"><em>Frame rate</em> e resposta</h2> + +<p>Frame rate is the rate at which a video device can produce images (or frames). It's most familiar from film and gaming, but is now widely used as a performance measure for websites and web apps.</p> + +<p>In web performance, a frame encapsulates the work the browser needs to do in order to update and repaint the screen. Frame rate is most obviously applicable to animations: if the frame rate is too low, an animation will have a jerky appearance, while a faster frame rate will be smoother. But frame rate is also useful as a general measure of a site's responsiveness as the user interacts with it.</p> + +<p>For example, if moving the mouse over some page element triggers some JavaScript that changes the element's appearance, and that triggers a reflow and a repaint, then all this work needs to be completed in that frame. If it takes too long for the browser to process the frame, then the browser will appear momentarily unresponsive (janky).</p> + +<p>Similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze.</p> + +<p>In general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging.</p> + +<div class="note"> +<p>A frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event.</p> + +<p>However, consistency is especially important: if you can't deliver 60fps, it's better to deliver lower frame rates more consistently, and avoid sudden dips in the frame rate which cause the site to freeze.</p> +</div> + +<h2 id="Gráfico_da_frame_rate">Gráfico da frame rate</h2> + +<p>The frame rate graph is found in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a> part of the Performance tool. It takes a timestamp when the browser finishes a frame, and uses this to keep track of the frame rate over the course of the recording.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">The x-axis is time over the profile period, and there are three annotations: the maximum frame rate, the average frame rate, and the lowest frame rate.</p> + +<h2 id="Utilização_do_gráfico_de_frame_rate">Utilização do gráfico de <em>frame rate</em></h2> + +<p>The great value of the frame rate graph is that, like the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for more in-depth analysis. For example, here's a screenshot of a performance profile:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>You can see that the average frame rate is reasonably healthy, but there are three spots where frame rate collapses for tens of milliseconds. This would certainly cause a noticeable stutter for any animations that were playing in the page.</p> + +<p>The frame rate graph is correlated with the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">waterfall summary</a> directly above it, and there we can see that the first two drops in the frame rate are correlated with orange bars, which denote time spent executing JavaScript.</p> + +<p>If we select one of these slices of the recording, the main <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall view</a> underneath it is zoomed into it, and we can see the function that's causing the problem:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>We have a JavaScript function from a click event that's blocking the main thread for 170 milliseconds.</p> + +<p>Which function, though? Switch to the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> to see the call stack at that point:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>The offending function is called <code>doPointlessComputations()</code>, and it's defined in "main.js". To fix it, we might consider splitting it into pieces and running the pieces inside <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code>, or even running the entire function in a <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a>. The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how you can use strategies like this to fix responsiveness problems caused by long-running synchronous JavaScript.</p> diff --git a/files/pt-pt/tools/desempenho/index.html b/files/pt-pt/tools/desempenho/index.html new file mode 100644 index 0000000000..7e5f3cdd2b --- /dev/null +++ b/files/pt-pt/tools/desempenho/index.html @@ -0,0 +1,185 @@ +--- +title: Desempenho +slug: Tools/Desempenho +tags: + - Aprender + - Desempenho + - Desempenho da Web + - Ferramentas de Desenvolvimento + - Ferramentas de Programação +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div> + +<p>A ferramenta de <strong>Desempenho</strong> mostra-lhe a resposta geral do seu site, o desempenho da disposição e JavaScript. Com esta ferramenta pode criar um registo, ou perfil, do seu site durante um período do tempo. A ferramenta depois mostra-lhe uma <a href="/pt-PT/docs/Tools/Performance/Guia_da_IU#Resumo_de_Waterfall">sinopse </a>das coisas que o navegador esteve a fazer ao renderizar o seu site sob o perfil, e um gráfico da <em><a href="/pt-PT/docs/Tools/Desempenho/Frame_rate">frame rate</a></em> sob o perfil.</p> + +<p>Tem quatro subferramentas para examinar os aspetos do perfil em mais detalhe:</p> + +<ul> + <li>a <a href="/pt-PT/docs/Tools/Desempenho/Cascata">Waterfall</a> mostra-lhe diferentes operações que o navegador estava a realizar, tais como disposição, JavaScript, <em>repaints</em>, e coleção de lixo</li> + <li>a <a href="/pt-PT/docs/Tools/Desempenho/Arvore_de_Chamada">Árvore de Chamada </a>mostra as funções de JavaScript nas quais o navegador gasta a mior parte do seu tempo</li> + <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li> + <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Iniciação">Iniciação</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Performance/Guia_da_IU">Guia da IU</a></dt> + <dd> + <p>To find your way around the Performance tool, here's a quick tour of the UI.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Como_fazer">Como fazer!</a></dt> + <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Componentes_da_ferramenta_«Desemepenho»">Componentes da ferramenta «Desemepenho»</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><em><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></em></dt> + <dd>Understand your site's overall responsiveness.</dd> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Arvore_de_Chamada">Árvore de Chamada</a></dt> + <dd>Find bottlenecks in your site's JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt> + <dd>See the allocations made by your code over the course of the recording.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Cascata">Cascata</a></dt> + <dd>Understand the work the browser's doing as the user interacts with your site.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd> + <dd></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Cenários">Cenários</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt> + <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd> + <dd></dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt> + <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd> +</dl> +</div> +</div> + + + +<div class="column-half"> +<dl> + <dd></dd> +</dl> +</div> + + + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style=""></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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"></div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"></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="Copiar"></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="Tamanho da fonte"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"></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="Fixar a janela de pop-up"></div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result"></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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"></div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/editor_de_audio_da_web/index.html b/files/pt-pt/tools/editor_de_audio_da_web/index.html new file mode 100644 index 0000000000..bdbbd8e9a4 --- /dev/null +++ b/files/pt-pt/tools/editor_de_audio_da_web/index.html @@ -0,0 +1,68 @@ +--- +title: Editor de Áudio da Web +slug: Tools/Editor_de_audio_da_Web +tags: + - API Áudio Web + - Ferramentas + - Firefox + - Mozilla +translation_of: Tools/Web_Audio_Editor +--- +<div>{{ToolsSidebar}}</div><p>With the <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:</p> + +<ul> + <li>nodes providing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">audio source</a>, such as an oscillator or a data buffer source</li> + <li>nodes performing <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformations</a> such as delay and gain</li> + <li>nodes representing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination of the audio stream</a>, such as the speakers</li> +</ul> + +<p>Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single <code>gain</code> property, while the {{domxref ("OscillatorNode")}} has <code>frequency</code> and <code>detune</code> properties.</p> + +<p>The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.</p> + +<p>The Web Audio Editor examines an audio context constructed in the page and provides a visualization of its graph. This gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. You can then examine and edit the <code>AudioParam</code> properties for each node in the graph. Some non-<code>AudioParam</code> properties, like an <code>OscillatorNode</code>'s <code>type</code> property, are displayed, and you can edit these as well.</p> + +<p>This tool is still experimental. If you find bugs, we'd love it if you <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">filed them in Bugzilla</a>. If you have feedback or suggestions for new features, <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> or <a href="https://twitter.com/firefoxdevtools">Twitter</a> are great places to register them.</p> + +<h2 id="Abrir_o_Editor_de_Áudio_da_Web">Abrir o Editor de Áudio da Web</h2> + +<p>The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a> and check "Web Audio". Now there should be an extra tab in the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">Toolbox toolbar</a> labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:</p> + +<ul> + <li>the <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, which can apply various effects to the microphone input and also provides a visualisation of the result</li> + <li>the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, which changes the pitch and volume of a sine wave as you move the mouse pointer</li> +</ul> + +<h2 id="Visualizar_o_gráfico">Visualizar o gráfico</h2> + +<p>The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10171/web-audio-editor.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;">You can see that it uses three nodes: an {{domxref ("OscillatorNode")}} as the source, a {{domxref ("GainNode")}} to control the volume, and an {{domxref ("GainNode")}} as the destination.</p> + +<h3 id="Ligações_para_Parâmetros_de_Áudio">Ligações para Parâmetros de Áudio</h3> + +<div class="geckoVersionNote"> +<p>Displaying connections to AudioParams is new in Firefox 34.</p> +</div> + +<p>As ligações entre os nodos são exibidas como linhas sólidas. Se, em vez disso, <a href="/pt-PT/docs/Web/API/AudioNode/connect_Parametro_de_Audio">ligou um nodo para uma Parâmetro de Áudio em outro nodo</a>, então a ligação é mostrada como uma linha tracejada entre os nodos, e é etiquetada com o nome de '<code>AudioParam'</code>:<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Inspecionar_e_modificar_Nodos_de_Áudio">Inspecionar e modificar Nodos de Áudio</h2> + +<p>If you click on a node, it's highlighted and you get a node inspector on the right hand side. This list the values of that node's <code>AudioParam</code> properties. For example, here's what the OscillatorNode looks like:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;">With the Violent Theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. However, the value isn't updated in real time: you have to click the node again to see the updated value.</p> + +<p>If you click on a value in the node inspector you can modify it: press <kbd>Enter</kbd> or <kbd>Tab</kbd> and the new value takes effect immediately.</p> + +<h2 id="Ignorar_nodos">Ignorar nodos</h2> + +<div class="geckoVersionNote"> +<p>Novo no Firefox 38.</p> +</div> + +<p>In the pane that shows you the node's details, there's an on/off button:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;">Click it, and the graph will be modified to bypass this node, so it will no longer have any effect. Nodes that are bypassed are shown with a hatched background:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p> diff --git a/files/pt-pt/tools/editor_de_estilo/index.html b/files/pt-pt/tools/editor_de_estilo/index.html new file mode 100644 index 0000000000..63bb52bba4 --- /dev/null +++ b/files/pt-pt/tools/editor_de_estilo/index.html @@ -0,0 +1,111 @@ +--- +title: Editor de Estilo +slug: Tools/Editor_de_estilo +tags: + - CSS + - Desenvolvimento da Web + - 'Desenvolvimento da Web: Ferramentas' + - Ferramentas + - Folhas de estilo +translation_of: Tools/Style_Editor +--- +<div>{{ToolsSidebar}}</div><p>O Editor de Estilo permite-lhe:</p> + +<ul> + <li>view and edit all the stylesheets associated with a page</li> + <li>create new stylesheets from scratch and apply them to the page</li> + <li>import existing stylesheets and apply them to the page</li> +</ul> + +<p>{{EmbedYouTube("7839qc55r7o")}}</p> + +<p>To open the Style Editor choose the "Style Editor" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac). 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 Style Editor activated:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; height: 238px; margin-left: auto; margin-right: auto; width: 816px;"></p> + +<p>O Editor de Estilo está dividido em três secções principais:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">the style sheet pane on the left</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor#The_editor_pane">the editor on the right</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">the media sidebar.</a></li> +</ul> + +<h2 id="O_painel_de_folha_de_estilo">O painel de folha de estilo</h2> + +<p>The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.</p> + +<p>From Firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab.</p> + +<h2 id="O_painel_do_editor">O painel do editor</h2> + +<p>On the right is the editor pane. This is where the source for the selected style sheet is available for you to read and edit. Any changes you make are immediately applied to the page. This makes it easy to experiment with, revise, and test changes. Once you're satisfied with your changes, you can save a copy locally by clicking the Save button on the sheet's entry in the style sheet pane.</p> + +<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of <a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a>.</p> + +<p>The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p> + +<p>The Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">You can switch autocomplete off in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p> + +<h2 id="A_barra_lateral_de_multimédia">A barra lateral de multimédia</h2> + +<p>The Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>. The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. The condition text of the rule is greyed-out if the media query doesn’t currently apply.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">The media sidebar works especially well with <a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> for creating and debugging responsive layouts:</p> + +<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p> + +<p>From Firefox 46 onwards, if an <code>@media</code> rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the Responsive Design View:</p> + +<p>{{EmbedYouTube("XeocxoW2NYY")}}</p> + +<h2 id="Criação_e_importação_das_folhas_de_estilo">Criação e importação das folhas de estilo</h2> + +<p>You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles are applied in real time just like changes to the other sheets.</p> + +<p>You can load a style sheet from disk and apply it to the page by clicking the Import button.</p> + +<h2 id="Source_map_support">Source map support</h2> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p>Web developers often create CSS files using a preprocessor like <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.</p> + +<p>Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.</p> + +<p>This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">For this to work, you must:</p> + +<ul> + <li>use a CSS preprocessor that understands the <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Currently this means <a href="http://sass-lang.com/">Sass</a> 3.3.0 or above or the <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>. Other preprocessors are actively working on adding support, or considering it.</li> + <li>actually instruct the preprocessor to generate a source map, for example by passing the <code>--sourcemap</code> argument to the Sass command-line tool</li> +</ul> + +<h3 id="Visualização_das_fontes_originais">Visualização das fontes originais</h3> + +<p>Now, if you check "Show original sources" in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, the links next to CSS rules in the <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> will link to the original sources in the Style Editor.</p> + +<p>From Firefox 35 onwards original sources are displayed by default.</p> + +<h3 id="Edição_das_fontes_originais">Edição das fontes originais</h3> + +<p>You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.</p> + +<p>First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the <code>--watch</code> option:</p> + +<pre>sass index.scss:index.css --sourcemap --watch</pre> + +<p>Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.</p> + +<p>Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.</p> + +<h2 id="Atalhos_de_teclado">Atalhos de teclado</h2> + +<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p> diff --git a/files/pt-pt/tools/index.html b/files/pt-pt/tools/index.html new file mode 100644 index 0000000000..72720aafb4 --- /dev/null +++ b/files/pt-pt/tools/index.html @@ -0,0 +1,228 @@ +--- +title: Ferramentas de Desenvolvimento do Firefox +slug: Tools +tags: + - Desenvolvendo Mozilla + - Desenvolvimento da Web + - 'Desenvolvimento da Web: Ferramentas' + - Ferramentas + - Guía + - Precisa de Tradução + - 'l10n:priority' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examinar, editar, e depurar HTML, CSS, e JavaScript no PC e nos dispositivos móveis.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Nota</strong>: If you are a beginner to web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="As_Ferramentas_Principais">As Ferramentas Principais</h2> + +<p>The right-hand side of the Developer Tools toolbar, which can be opened with <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on OS X, contains several buttons that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button will only appear when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Inspetor_de_Página">Inspetor de Página</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="" src="https://mdn.mozillademos.org/files/14532/inspector.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Ver e editar conteúdo e apresentação da página. Visualize muitos aspetos da página, incluindo o modelo de caixa, animações e apresentações de grelha.</p> +</div> + +<div class="column-half"> +<h3 id="Consola_da_Web">Consola da Web</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="" src="https://mdn.mozillademos.org/files/14528/console.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Ver mensagens registadas por uma página da Web e interagir com a página utilizando o JavaScript.</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Depurador_de_JavaScript">Depurador de JavaScript</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="" src="https://mdn.mozillademos.org/files/14542/debugger.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Parar, explorar, examinar e modificar o JavaScript em execução numa página.</p> +</div> + +<div class="column-half"> +<h3 id="Monitor_de_Rede">Monitor de Rede</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="" src="https://mdn.mozillademos.org/files/14534/network-monitor.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Ver os pedidos de rede efetuados quando uma página é carregada.</p> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Ferramentas_de_Desempenho">Ferramentas de Desempenho</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analise a reação geral do site, JavaScript, e desempenho da apresentação.</p> +</div> + +<div class="column-half"> +<h3 id="Modo_de_Desenho_Responsivo">Modo de Desenho Responsivo</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="" src="https://mdn.mozillademos.org/files/14538/rdm.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Veja como o seu site da Web ou a aplicação serão apresentados e se comportam nos diferentes dispositivos e tipos de rede.</p> +</div> +</div> + +<div class="note"> +<p><strong>Nota</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="Mais_Ferramentas">Mais Ferramentas</h2> + +<p>Estas ferramentas de desenvolvimento também estão integradas no Firefox. Ao contrário das 'Ferramentas Principais' acima, pode não utilizá-las todos os dias.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Memoria">Memória</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/pt-PT/docs/Tools/Inspetor_de_armazenamento">Inspetor de Armazenamento</a> </dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/pt-PT/docs/Tools/GCLI">Barra de Ferramentas do Programador</a></dt> + <dd>A command-line interface for the developer tools.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></dt> + <dd>View and edit the vertex and fragment shaders used by <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/pt-PT/docs/Tools/Editor_de_audio_da_Web">Editor de Áudio da Web</a></dt> + <dd>Examine the graph of audio nodes in an audio context, and modify their parameters.</dd> + <dt><a href="/pt-PT/docs/Tools/Capturas_de_ecra">Capturas de ecrã</a></dt> + <dd>Efetuar uma captura de ecrã de uma página completa ou de um único elemento.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">Para as ferramentas e recursos mais recentes para os programadores, experimente o Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/pt-PT/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Transferir Edição de Desenviolvimento</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Ligação_das_Ferramentas_de_Desenvolvimento">Ligação das Ferramentas de Desenvolvimento</h2> + +<p>Se abrir as ferramentas de desenvolvimento utilizando os <a href="/pt-PT/docs/Tools/atalhos_de_teclado">atalhos de teclado</a> ou os itens de menu equivalentes, eles irão apontar para o documento hospedado no separador ativo. Mas pode anexar as ferramentas a uma variedades de outros destinos, também, ambos dentro do navegador atual e em navgeadores diferentes ou atém em dispositivos diferentes.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/pt-PT/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Depurar extras, separadores de conteúdo, e <em>workers</em> em execução no navegador.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depurar o navegador</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Consola_do_navegador">Consola do Navegador</a></dt> + <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/pt-PT/docs/Tools/Caixa_de_ferramentas_do_navegador">Caixa de Ferramentas do Navegador</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools" name="Extending_the_devtools">Aumentar as ferramentas de desenvolvimento</h2> + +<p>The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Adicione um novo painel às ferramentas de desenvolvimento</a></dt> + <dd>Write an add-on that adds a new panel to the Toolbox.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Protocolod e Deputação Remoto</a></dt> + <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Editor de Fonte</a></dt> + <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> + <dt><a href="/pt-PT/docs/Tools/Depurador_API">A Interface do Depurador</a></dt> + <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd> + <dt><a href="/pt-PT/docs/Tools/Consola_da_Web/Saida_personalizada">Consola da Web - saída personalizada</a></dt> + <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> + <dt><a href="/pt-PT/docs/Tools/Exemplo_de_extras">Exemplo de extras das ferramentas de desenvolvimento</a></dt> + <dd>Utilize estes exemplos para compreender como implementar um add-on das ferramentas de desenvolvimento.</dd> +</dl> +</div> + +<h2 id="Migração_do_Firebug">Migração do Firebug</h2> + +<p>Firebug is coming to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribuir">Contribuir</h2> + +<p>If you want to help to improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-touch">Participe</a></dt> + <dd>Mozilla wiki page explaining how to get involved.</dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/pt-pt/tools/inspetor_de_armazenamento/index.html b/files/pt-pt/tools/inspetor_de_armazenamento/index.html new file mode 100644 index 0000000000..bc0259b3ca --- /dev/null +++ b/files/pt-pt/tools/inspetor_de_armazenamento/index.html @@ -0,0 +1,192 @@ +--- +title: Inspetor de Armazenamento +slug: Tools/Inspetor_de_armazenamento +tags: + - Armazenamento + - Armazenamento Local + - Armazenamento da Sessão + - BD Indexada + - Cookies + - Ferramentas + - Ferramentas do Programador + - Firefox + - Guia(2) +translation_of: Tools/Storage_Inspector +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>The Storage Inspector is disabled by default. Enable it in the <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +</div> + +<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p> + +<ul> + <li><em>Cache Storage</em> - any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> + <li><em>Cookies</em> - All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li> + <li><em>Local Storage</em> - All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li> + <li><em>Session Storage</em> - All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li> + <li><em>IndexedDB</em> - All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li> +</ul> + +<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p> + +<h2 id="Abrir_o_Inspetor_de_Armazenamento">Abrir o Inspetor de Armazenamento</h2> + +<p>Once enabled, you can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Shift + F9 keyboard shortcut.</p> + +<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 Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p> + +<h2 id="Interface_do_Utilizador_do_Inspetor_de_Armazenamento">Interface do Utilizador do Inspetor de Armazenamento</h2> + +<p>The Storage Inspector UI is split into three main components:</p> + +<ul> + <li><a href="#storage-tree">Árvore de armazenamento</a></li> + <li><a href="#table-widget">Table Widget</a></li> + <li><a href="#sidebar">Barra lateral</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p> + +<h3 id="Árvore_de_armazenamento"><a name="storage-tree">Árvore de armazenamento</a></h3> + +<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p> + +<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p> + +<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p> + +<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p> + +<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> + +<p>The table widget is the place where all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p> + +<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Procura">Procura</h3> + +<p>There's a search box at the top of the Table Widget:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p> + +<p>From Firefox 50 onwards, you can use Ctrl+F (Cmd+F on a Mac) to focus the search box.</p> + +<h3 id="Barra_lateral"><a name="sidebar">Barra lateral</a></h3> + +<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p> + +<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p> + +<ul> + <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li> + <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li> + <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li> +</ul> + +<p>The shown values can also be filtered using the search box at the top of the sidebar.</p> + +<h2 id="Cache_de_Armazenamento">Cache de Armazenamento</h2> + +<p>Under the Cache Storage type you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p> + +<ul> + <li>the URL for the resource</li> + <li>the status code for the request that was made to fetch it.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Cookies">Cookies</h2> + +<p>When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table widget. The table then has the following columns:</p> + +<ul> + <li><em>Name</em> - The name of the cookie</li> + <li><em>Path</em> - The path property of the cookie</li> + <li><em>Domain</em> - The domain of the cookie</li> + <li><em>Expires on</em> - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li> + <li><em>Last accessed on</em> - When the cookie was last read</li> + <li><em>Value</em> - The value of the cookie</li> + <li><em>HostOnly</em> - Is this cookie a domain cookie: that is, the domain value starts with a "."</li> + <li><em>Secure</em> - Is this cookie a secure cookie</li> + <li><em>HttpOnly</em> - Is this cookie HTTP only.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> Before Firefox 51 the columns <em>HostOnly</em>, <em>Secure</em> and <em>HttpOnly</em> were called <em>isDomain</em>, <em>isSecure</em> and <em>isHttpOnly</em>.</p> +</div> + +<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain.</p> + +<p>You can also delete cookies using the context menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="Armazenamento_local_Armazenamento_da_sessão">Armazenamento local / Armazenamento da sessão</h2> + +<p>When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.</p> + +<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p> + +<p>{{EmbedYouTube("oeQzhpoMByw")}}</p> + +<p>You can also delete local storage and session storage entries using the context menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h2 id="BD_Indexada">BD Indexada</h2> + +<p>When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:</p> + +<ul> + <li><em>Database Name</em> - The name of the database</li> + <li><em>Storage</em> - The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database (new in Firefox 53)</li> + <li><em>Origin</em> - Its origin</li> + <li><em>Version</em> - The database version</li> + <li><em>Object Stores</em> - Number of object stores in the database</li> +</ul> + +<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p> + +<ul> + <li><em>Object Store Name</em> - The name of the object store</li> + <li><em>Key</em> - The keyPath property of the object store.</li> + <li><em>Auto Increment</em> - Whether auto increment is enabled</li> + <li><em>Indexes</em> - Array of indexes present in the object store as shown below</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p> + +<p>From Firefox 49 onwards, you can delete an IndexedDB database using the context menu in the Storage tree view:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p> + +<p>From Firefox 50 onwards, you can use the context menu in the table widget to delete all items in an object store, or a particular item:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p> </p> diff --git a/files/pt-pt/tools/memoria/index.html b/files/pt-pt/tools/memoria/index.html new file mode 100644 index 0000000000..b331a5b5b9 --- /dev/null +++ b/files/pt-pt/tools/memoria/index.html @@ -0,0 +1,65 @@ +--- +title: Memória +slug: Tools/Memoria +tags: + - Ferramentas + - Ferramentas de Programador + - Firefox + - Mozilla +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div><p>The Memory tool lets you take a snapshot of the current tab's memory <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">heap</a>. It then provides a number of views of the heap that can show you which objects account for memory usage and exactly where in your code you are allocating memory.</p> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="O_básico">O básico</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">Opening the memory tool</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">Taking a heap snapshot</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Comparing two snapshots</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Deleting snapshots</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Saving and loading snapshots</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Recording call stacks</a></li> +</ul> +</div> + +<hr> +<h3 id="Analisar_capturas_de_ecrã">Analisar capturas de ecrã</h3> + +<div class="geckoVersionNote"> +<p>The Tree map view is new in Firefox 48, and the Dominators view is new in FIrefox 46.</p> +</div> + +<p>Once you've taken a snapshot, there are three main views the Memory tool provides:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">the Tree map view</a> shows memory usage as a <a href="https://en.wikipedia.org/wiki/Treemapping">treemap</a>.</li> + <li><a href="/en-US/docs/Tools/Memory/Aggregate_view">the Aggregate view</a> shows memory usage as a table of allocated types.</li> + <li><a href="/en-US/docs/Tools/Memory/Dominators_view">the Dominators view</a> shows the "retained size" of objects: that is, the size of objects plus the size of other objects that they keep alive through references.</li> +</ul> + +<p>If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.</p> + +<hr> +<h3 id="Conceitos">Conceitos</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Dominators">Dominators</a></li> +</ul> +</div> + +<hr> +<h3 id="Páginas_de_exemplo">Páginas de exemplo</h3> + +<p>Examples used in the Memory tool documentation.</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Monster_example">Monster example</a></li> + <li><a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li> +</ul> +</div> diff --git a/files/pt-pt/tools/modo_de_desenho_adaptavel/index.html b/files/pt-pt/tools/modo_de_desenho_adaptavel/index.html new file mode 100644 index 0000000000..d186013f92 --- /dev/null +++ b/files/pt-pt/tools/modo_de_desenho_adaptavel/index.html @@ -0,0 +1,214 @@ +--- +title: Modo de Desenho Adaptável +slug: Tools/Modo_de_Desenho_Adaptavel +tags: + - Desenho + - Desenho Adaptável + - Desenvolvimento de Web + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox + - Guía + - 'l10n:priority' +translation_of: Tools/Responsive_Design_Mode +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="https://developer.mozilla.org/pt-PT/docs/Web/Apps/Progressiva">Desenho adaptável</a> is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.</p> + +<p>The most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. Responsive Design Mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.</p> + +<h2 id="Alternar_Modo_de_Desenho_Adaptável">Alternar Modo de Desenho Adaptável</h2> + +<p>There are three ways to toggle Responsive Design Mode:</p> + +<ul> + <li>From the Firefox menu: Select "Responsive Design Mode" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li> + <li>From the Developer Tools toolbox: Press the "Responsive Design Mode" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox's toolbar</a>:<img alt="" src="https://mdn.mozillademos.org/files/14339/rdm-button.png" style="display: block; height: 746px; margin-left: auto; margin-right: auto; width: 948px;"></li> + <li>From the keyboard: Press Ctrl + Shift + M (or Cmd + Opt + M on macOS).</li> +</ul> + +<h2 id="Utilizar_Modo_de_Desenho_Adaptável">Utilizar Modo de Desenho Adaptável</h2> + +<p>With Responsive Design Mode enabled, the content area for web pages is set to the screen size for the particular device. Initially, it's set to 320 x 480 pixels.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14947/rdm-open-2.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>You can show or hide the Developer Tools toolbox independently of toggling Responsive Design Mode itself:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14933/rdm-toolbox-2.png" style="display: block; height: 752px; margin-left: auto; margin-right: auto; width: 948px;">While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.</p> + +<h2 id="Seleção_de_dispositivo">Seleção de dispositivo</h2> + +<p>Just above the viewport you'll see a label "no device selected"; click this to see a list of device names. Select a device, and Responsive Design Mode will set the following properties to match the selected device:</p> + +<ul> + <li>Screen size</li> + <li>Device pixel ratio (the ratio of device physical pixels to device-independent pixels)</li> + <li>Touch event simulation</li> +</ul> + +<p>Additionally, Firefox will set the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> HTTP request header to identify itself as the default browser on the selected device. For example, if you've selected an iPhone, then Firefox will identify itself as Safari. The <code><a href="/en-US/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> property will be set to the same value.</p> + +<p>{{EmbedYouTube("JNAyKemudv0")}}</p> + +<p>The devices listed in the drop-down are just a subset of the devices that can be selected. At the end of the drop-down, you'll see an item labeled "Edit list...". Select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. The set of devices, and the values associated with each device, are taken from <span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices.</a></span></p> + +<h3 id="Guardar_dispositivos_personalizados">Guardar dispositivos personalizados</h3> + +<p>Starting in Firefox 54, you can save custom devices in Responsive Design Mode. Each device can have its own:</p> + +<ul> + <li>Size</li> + <li>DevicePixelRatio</li> + <li>User agent</li> + <li>Touch support</li> +</ul> + +<p>Also, you can preview the properties of existing devices by hovering over the name in the device modal where they will display in a tooltip.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Controlos_de_dispositivo">Controlos de dispositivo</h2> + +<p>You can also supply custom values for most device properties.</p> + +<h3 id="Definir_tamanho_do_ecrã">Definir tamanho do ecrã</h3> + +<p>To set screen size, click on the values under the viewport, and edit them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>You can also grab the bottom-left corner of the viewport and drag the viewport to the size you want.</p> + +<p>And from Firefox 59 onward, you can now edit the screen size with the keyboard. When you are focused on (or your caret is within) either of the two dimension values, you can press or hold down the up and down cursor keys to increase or decrease the dimension value by 1 pixel each time.</p> + +<p>If you want to change the dimensions more rapidly, you can hold down the Shift key, then press or hold down the up and down cursor keys to increase or decrease the dimension value by 10 pixels each time.</p> + +<h3 id="Definir_proporção_do_píxel_do_dispositivo">Definir proporção do píxel do dispositivo</h3> + +<p>To set a custom device pixel ratio, click the list box labeled "DPR" and select the value you want:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h3 id="Alternar_simulação_do_evento_de_toque">Alternar simulação do evento de toque</h3> + +<p>To enable/disable touch event simulation, click the icon of a hand with a pointy finger:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;">While touch event simulation is enabled, mouse events are translated into <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p> + +<h3 id="Controlar_o_comportamento_de_recarregar_a_página">Controlar o comportamento de recarregar a página</h3> + +<p>New in Firefox 60 is the <em>Reload when...</em> drop-down menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p> + +<p>Clicking it reveals two options, both of which are disabled by default:</p> + +<ul> + <li>Reload when touch simulation is toggled: Checking this checkbox causes an automatic page reload whenever touch event simulation is enabled.</li> + <li>Reload when user agent is changed: Checking this checkbox causes an automatic page reload whenever the user agent is changed.</li> +</ul> + +<p>Before Firefox 60, such reloads occurred automatically because certain page behaviors would otherwise not be applied. For example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certain features on certain browsers.</p> + +<p>However, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads.</p> + +<p>Now when you change such settings for the first time, you'll be given a warning message that tells you these reloads are no longer automatic, and informed about how you can make them automatic. For example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Alternar_orientação">Alternar orientação</h3> + +<p>To switch the screen orientation between portrait and landscape, click the icon next to the device selector:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Acelerar_a_rede">Acelerar a rede</h2> + +<p>If you do all your development and testing using a very fast network connection, you may see problems with your site as soon as it's accessed using a slower connection. In Responsive Design Mode you can instruct the browser to emulate, very approximately, the characteristics of various different types of networks.</p> + +<p>The characteristics emulated are:</p> + +<ul> + <li>Download speed</li> + <li>Upload speed</li> + <li>Minimum latency</li> +</ul> + +<p>The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Selection</th> + <th scope="col">Download speed</th> + <th scope="col">Upload speed</th> + <th scope="col">Minimum latency (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 KB/s</td> + <td>20 KB/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 KB/s</td> + <td>50 KB/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 KB/s</td> + <td>150 KB/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 KB/s</td> + <td>250 KB/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 MB/s</td> + <td>750 KB/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 MB/s</td> + <td>3 MB/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 MB/s</td> + <td>1 MB/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 MB/s</td> + <td>15 MB/s</td> + <td>2</td> + </tr> + </tbody> +</table> + +<p>To select a network, click the list box that's initially labeled "No throttling":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<h2 id="Capturar_Ecrã">Capturar Ecrã</h2> + +<p>To take a screenshot of the viewport, click the camera icon:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p> + +<p>Screenshots are saved to Firefox's default download location.</p> + +<p>Starting in Firefox 53, if you checked "Screenshot to clipboard" in the Developer Tools <a href="/en-US/docs/Tools/Settings">Settings</a> page, then the screenshot will also be copied to the system clipboard.</p> diff --git a/files/pt-pt/tools/network_monitor/index.html b/files/pt-pt/tools/network_monitor/index.html new file mode 100644 index 0000000000..98f92f932e --- /dev/null +++ b/files/pt-pt/tools/network_monitor/index.html @@ -0,0 +1,693 @@ +--- +title: Monitor de Rede +slug: Tools/Network_Monitor +tags: + - Depuração + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox + - Guía + - Rede + - 'l10n:prioridade' +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>O Monitor de Rede mostra-lhe os pedidos de rede que o Firefox efetua (por exemplo, quand o este carrega uma página, ou ddevido a <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), quanto tempo demora cada pedido, e detalhes de cada pedido.</p> + +<h2 id="Abrir_o_Monitor_de_Rede">Abrir o Monitor de Rede</h2> + +<p>Existem algumas maneiras diferentes de abrir o 'Monitor de Rede':</p> + +<div class="geckoVersionNote"> +<p>Por favor, note que o atalho de teclado foi alterado na versão 55 do Firefox</p> +</div> + +<ul> + <li>Pressione <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> num Mac).</li> + <li>Select "Network" from the Web Developer menu, (which is a submenu in the Tools menu on OS X and Linux).</li> + <li>Click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Network".</li> +</ul> + +<p>The Network Monitor will appear at the bottom of the browser window. Reload the page to see the requests:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;"></p> + +<p>The Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page.</p> + +<h2 id="IU_-_Sinopse">IU - Sinopse</h2> + +<p>A IU é dividida em 4 partes principais:</p> + +<ul> + <li>the main screen contains the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>, the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a>, and the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p> + +<ul> + <li>the <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a> view is a separate screen:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> + +<h2 id="Barra_de_Ferramentas">Barra de Ferramentas</h2> + +<p>From Firefox 47 onwards, the toolbar is at the top of the main window. In earlier versions of Firefox, it's at the bottom.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;">It provides:</p> + +<ul> + <li>an icon to clear the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a></li> + <li>an array of icons to filter the network request list by type: + <ul> + <li>by the content type of the response</li> + <li>XHR requests</li> + <li>(new in Firefox 48) WebSocket upgrades (labeled WS)</li> + </ul> + </li> + <li>an icon to launch <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a></li> + <li>a summary of this page, including the number of requests, total size, and total time</li> + <li>a box enabling you to <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">filter requests by URL</a></li> + <li>an icon to show/hide the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).</p> +</div> + +<h2 id="Lista_de_pedidos_de_rede">Lista de pedidos de rede</h2> + +<p>By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;">By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p> + +<h3 id="Colunas_de_pedido_de_rede">Colunas de pedido de rede</h3> + +<p>From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:</p> + +<ul> + <li><strong>Status</strong>: The HTTP status code returned. This is displayed as a color-coded icon: + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">blue circle for informational (1XX codes). Notably, this includes 101 (switching protocols) for <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> upgrades.</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> green circle for success (2XX codes)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> orange triangle for redirection (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> red square for errors (4XX and 5XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> hollow grey circle for responses that were fetched from the browser cache.</li> + </ul> + The exact code is displayed immediately after the icon.</li> + <li><strong>Method</strong>: The HTTP request method used.</li> + <li><strong>File</strong>: The basename of the file requested.</li> + <li><strong>Protocol:</strong> The network protocol used to transfer the data, this column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Scheme:</strong> The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Domain</strong>: Domain of the path requested. + <ul> + <li>If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. You will be able to see more details about the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</li> + <li>Hover over the domain to see the IP address.</li> + <li>There's an icon next to the domain that gives you extra information about the security status of that request. See <a href="/en-US/docs/Tools/Network_Monitor#Security_icons">Security icons</a>.</li> + </ul> + </li> + <li><strong>Remote IP</strong>: The IP address of the server answering the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Cause</strong>: The reason that the network request occurred, for example XHR request, {{htmlelement("img")}}, script, script requesting an image, etc. This is new in Firefox 49.</li> + <li><strong>Type</strong>: <code>Content-type</code> of the response.</li> + <li><strong>Cookies:</strong> The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Set-Cookies:</strong> The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Transferred</strong>: The number of bytes that were actually transferred to load the resource. This will be less than <strong>Size</strong> if the resource was compressed. From Firefox 47, if the resource was fetched from a <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> cache, then this cell displays "service worker".</li> + <li><strong>Size</strong>: The size of the transferred resource.</li> +</ul> + +<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p> + +<h4 id="Miniaturas_de_imagem">Miniaturas de imagem</h4> + +<p>If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Ícones_de_segurança">Ícones de segurança</h4> + +<p>The Network Monitor displays an icon in the Domain column:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;"></p> + +<p>This gives you extra information about the security status of the request:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Ícone</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>Weak HTTPS (for example, a weak cipher was used)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>Failed HTTPS (for example, a certificate was invalid)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + </tbody> +</table> + +<p>For weak and failed HTTPS requests, you'll see more details of the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</p> + +<h4 id="Cause_column">Cause column</h4> + +<p>The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:</p> + +<ul> + <li>document: The source HTML document.</li> + <li>img: {{htmlelement("img")}} element.</li> + <li>imageset: {{htmlelement("img")}} element.</li> + <li>script: A JavaScript file.</li> + <li>stylesheet: A CSS file.</li> +</ul> + +<div> +<p>When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened. Note that since Firefox 55, stack traces can be found in the <em>Stack Trace</em> tab of the {{anch("Network request details")}} panel instead.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p> + +<p>You can then click on any of the entries in the popup to open up the relevant script in the <a href="/en-US/docs/Tools/Debugger">Debugger</a> pane.</p> +</div> + +<h3 id="Barra_Cronológica">Barra Cronológica</h3> + +<p>The request list also displays a timeline for the different parts of each request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p> + +<p>Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p> + +<p>Starting in Firefox 45, the timeline also contains two vertical lines:</p> + +<ul> + <li>The <span style="color: blue;">blue</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event is triggered.</li> + <li>The <span style="color: red;">red</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event is triggered.</li> +</ul> + +<h3 id="Pedidos_de_filtragem">Pedidos de filtragem</h3> + +<p>You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.</p> + +<h4 id="Filtering_by_content_type">Filtering by content type</h4> + +<p>To filter by content type, use the buttons in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_XHR">Filtering XHR</h4> + +<p>To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_WebSockets">Filtering WebSockets</h4> + +<div class="geckoVersionNote"> +<p>Novo na versão 48 do Firefox</p> +</div> + +<p>To see only WebSocket connections, use the "WS" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>To monitor the data exchanged in WebSocket connections, try the <a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor add-on</a>.</p> + +<h4 id="Filtering_by_URL">Filtering by URL</h4> + +<p>To filter by URL, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. Click in the search box, or press <kbd>Ctrl</kbd> + <kbd>F</kbd> (or <kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.</p> + +<p>From Firefox 45, you can filter requests that <em>don't</em> contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.</p> + +<h4 id="Filtering_by_properties">Filtering by properties</h4> + +<div class="geckoVersionNote"> +<p>Novo na versão 55 do in Firefox</p> +</div> + +<p>To filter by specific request properties, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (<code>-</code>) negates the filter. You can combine different filters together by seperating them with a space.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Palavra-chave</th> + <th scope="col">Significado</th> + <th scope="col">Exemplos</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td>Shows resources that have the specific HTTP status code.</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>Shows resources that have were requested via the specific HTTP request method.</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>Shows resources coming from a specifc domain.</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>Shows resources coming from a server with the specified IP.</td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td>Shows resources matching a specific cause type. The types can be found in the description of the <a href="#Cause_column">cause column</a>.</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>Shows resources having a specific transferred size or a transferred size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td>Shows resources having a specific size (after decompression) or a size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>Shows resources that are larger than the specified size in bytes. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>Shows resources that match the specified MIME type.</td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> and <code>is:from-cache</code> shows only resources coming from cache.<br> + <code>is:running</code> shows only resources, which are currently being transferred.</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>Shows resources transferred via the given scheme.</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>Shows resources that contain the specified HTTP response header.</td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td>Shows the resources that have a <code>Set-Cookie</code> header with a <code>Domain</code> attribute that matches the specified value.</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>Shows the resources that have a <code>Set-Cookie</code> header with a name that matches the specified value.</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>Shows the resources that have a <code>Set-Cookie</code> header with a value that matches the specified value.</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>Shows the resources having a URL that matches the given {{Glossary("regular expression")}}.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="Menu_de_contecto">Menu de contecto</h3> + +<p>Context-clicking on a row in the list displays a context menu with the following options:</p> + +<ul> + <li>Copy URL</li> + <li>Copy URL Parameters (new in Firefox 40)</li> + <li>Copy POST Data (new in Firefox 40, only for POST requests)</li> + <li>Copy as cURL</li> + <li>Copy Request Headers (new in Firefox 40)</li> + <li>Copy Response Headers (new in Firefox 40)</li> + <li>Copy Response (new in Firefox 40)</li> + <li>Copy Image as Data URI (only for images)</li> + <li>Copy All As HAR (new in Firefox 41)</li> + <li>Save All As HAR (new in Firefox 41)</li> + <li>Save Image As (new in Firefox 55, only for images)</li> + <li>Edit and Resend</li> + <li>Open in New Tab</li> + <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> +</ul> + +<h4 id="Edit_and_Resend">Edit and Resend</h4> + +<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p> + +<h4 id="Open_in_New_Tab">Open in New Tab</h4> + +<p>Resends the request in a new tab — very useful for debugging asynchronous requests.</p> + +<div class="note"> +<p><strong>Nota</strong>: Since Firefox 59, POST requests are correctly resent as POST requests ({{bug(1220758)}}), with the expected POST parameters ({{bug(1407515)}}).</p> +</div> + +<h4 id="Copy_as_cURL">Copy as cURL</h4> + +<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>If the method is not GET or POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>For URL encoded request parameters</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>For multipart request parameters</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>If the HTTP version is not 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>If the method is HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>One for each request header.</p> + + <p>From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include <code>--compressed</code> instead of <code>-H "Accept-Encoding: gzip, deflate"</code>. This means that the response will be automatically decompressed.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4> + +<p>These options create an <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.</p> + +<p>Note that as of Firefox 61, we have included a toolbar menu to make these options easier to discover ({{bug(1403530)}}). The new 'HAR' dropdown menu includes both the 'Copy All As HAR' and 'Save All As HAR' commands, as well as an 'Import...' option.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p> + +<h2 id="Detalhes_do_pedido_de_rede">Detalhes do pedido de rede</h2> + +<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p> + +<p>The tabs at the top of this pane enable you to switch between the following pages:</p> + +<ul> + <li><strong>Headers</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Params</strong></li> + <li><strong>Response</strong></li> + <li><strong>Cache</strong></li> + <li><strong>Timings</strong></li> + <li><strong>Security </strong>(only for secure pages)</li> + <li><strong>Stack trace</strong> (only when the request has a stack trace, e.g. a script called by another script). This has been available since Firefox 55.</li> +</ul> + +<p>Clicking the icon at the right-hand end of the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a> closes the details pane and returns you to the list view.</p> + +<h3 id="Cabeçalhos">Cabeçalhos</h3> + +<p>This tab lists basic information about the request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>This includes:</p> + +<ul> + <li>Request URL</li> + <li>Request method</li> + <li>Remote IP address and port <em>(new in Firefox 39)</em></li> + <li>Status code with question mark icon linking to MDN doc for more details (if available)</li> + <li>The HTTP request and response headers that were sent</li> + <li>An <em>Edit and Resend</em> button to <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">edit and resend</a> the request</li> + <li>A <em>Raw headers</em> button to display the raw request and response headers</li> +</ul> + +<p>You can filter the headers that are displayed:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<div class="geckoVersionNote"> +<p>New in Firefox 54</p> +</div> + +<p>From Firefox 54 onwards, you will see a question mark icon next to each header in the <em>Status code</em> row — this is a link to more information about that particular status code, in the MDN <a href="/en-US/docs/Web/HTTP/Headers">documentation of the HTTP headers</a>.</p> + +<h3 id="Cookies">Cookies</h3> + +<p>This tab lists full details of any cookies sent with the request or response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>As with headers, you can filter the list of cookies displayed. The full list of cookie attributes is shown — see the below screenshot from a Response cookies examples with further attributes shown.</p> + +<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> + +<p>The <code>samesite</code> attribute has been shown since Firefox 62 ({{bug("1452715")}}).</p> + +<h3 id="Paramêtros">Paramêtros</h3> + +<p>This tab displays the GET parameters and POST data of a request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Resposta">Resposta</h3> + +<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>If the response is JSON, it will be shown as an inspectable object.</p> + +<p>If the response is an image, the tab displays a preview:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h4 id="Cache">Cache</h4> + +<p>If the response is cached (i.e. a 304), the Cache tab will display details about that cached resource.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16057/cache-panel.png" style="display: block; height: 196px; margin: 0px auto; width: 524px;"></p> + +<p>These details include:</p> + +<ul> + <li>Last fetched: The date the resource was last fetched.</li> + <li>Fetched count: The number of times in the current session that the resource has been fetched.</li> + <li>Data size: The size of the resource.</li> + <li>Last modified: The date the resource was last modified.</li> + <li>Expires: The date the resource expires.</li> + <li>Device: The device the resource was fetched from (e.g. "disk").</li> +</ul> + +<h4 id="HTML_preview">HTML preview</h4> + +<p>From Firefox 59 onwards, if the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15781/response-html-preview.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Timings">Timings</h3> + +<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nome</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td>Blocked</td> + <td> + <p>Time spent in a queue waiting for a network connection.</p> + + <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p> + </td> + </tr> + <tr> + <td>DNS resolution</td> + <td>Time taken to resolve a host name.</td> + </tr> + <tr> + <td>Connecting</td> + <td>Time taken to create a TCP connection.</td> + </tr> + <tr> + <td>Sending</td> + <td>Time taken to send the HTTP request to the server.</td> + </tr> + <tr> + <td>Waiting</td> + <td>Waiting for a response from the server.</td> + </tr> + <tr> + <td>Receiving</td> + <td>Time taken to read the entire response from the server (or cache).</td> + </tr> + </tbody> +</table> + +<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Segurança">Segurança</h3> + +<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p> + +<ol> + <li>Using SSLv3 instead of TLS</li> + <li>Using the RC4 cipher</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Stack_trace">Stack trace</h3> + +<p>Since Firefox 55, stack traces are shown in the <em>Stack Trace</em> tab, for responses that have a stack trace of course.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15782/stack-trace.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Pausing_and_resume_network_traffic_recording">Pausing and resume network traffic recording</h2> + +<p>In Firefox 58 and above, the Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.</p> + +<p>The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p>You can see it here in context:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p>Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.</p> + +<h2 id="Análise_de_desempenho">Análise de desempenho</h2> + +<p>The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.<br> + <br> + To run the performance analysis tool click the stopwatch icon in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p> + +<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> + +<p>The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p> + +<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p> + +<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p> + +<h2 id="Throttling">Throttling</h2> + +<p>In Firefox 61 onwards, the toolbar includes a Throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. Simply choose an option from the menu, and it will persist across reloads.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16058/throttling.png" style="display: block; height: 186px; margin: 0px auto; width: 149px;"></p> + +<p>The characteristics emulated are:</p> + +<ul> + <li>Download speed</li> + <li>Upload speed</li> + <li>Minimum latency</li> +</ul> + +<p>The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Seleção</th> + <th scope="col">Velocidade de transferência</th> + <th scope="col">Velocidade de envio</th> + <th scope="col">Latência mínima (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 KB/s</td> + <td>20 KB/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 KB/s</td> + <td>50 KB/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 KB/s</td> + <td>150 KB/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 KB/s</td> + <td>250 KB/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 MB/s</td> + <td>750 KB/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 MB/s</td> + <td>3 MB/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 MB/s</td> + <td>1 MB/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 MB/s</td> + <td>15 MB/s</td> + <td>2</td> + </tr> + </tbody> +</table> diff --git a/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html b/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html new file mode 100644 index 0000000000..4fb8d75fb7 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html @@ -0,0 +1,93 @@ +--- +title: Atalhos de teclado do inspetor de página +slug: Tools/Page_Inspector/atalhos_de_teclado +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "page-inspector") }}</p> + +<h3 id="Atalhos_globais">Atalhos globais</h3> + +<p>{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "all-toolbox-tools") }}</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%; display: none; opacity: 1; left: -8px; top: -25px;"> </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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"> </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="Copiar"> </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="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </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="Fixar a janela de pop-up"> </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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/page_inspector/guia_de_iu/index.html b/files/pt-pt/tools/page_inspector/guia_de_iu/index.html new file mode 100644 index 0000000000..271798ce5c --- /dev/null +++ b/files/pt-pt/tools/page_inspector/guia_de_iu/index.html @@ -0,0 +1,101 @@ +--- +title: Guia de IU +slug: Tools/Page_Inspector/Guia_de_IU +tags: + - Ferramentas + - Guia(2) + - Inspetor +translation_of: Tools/Page_Inspector/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.</p> + +<p>Esta abrange três componentes de topo da IU do Inspetor:</p> + +<ul> + <li>o botão de "Selecionar elemento"</li> + <li>o painel de HTML</li> + <li>o painel de CSS</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.</p> + +<h2 id="Botão_de_selecionar_elemento">Botão de selecionar elemento</h2> + +<p>The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p> + +<p>Note that it's actually part of the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>, so it's immediately accessible from any tool, not just the Inspector.</p> + +<p>To learn how to select an element, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a>.</p> + +<h2 id="Painel_de_HTML">Painel de HTML</h2> + +<p>The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p> + +<p>To learn more about the structure of the HTML pane, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a>.</p> + +<h2 id="Painel_de_CSS">Painel de CSS</h2> + +<p>The right-hand side of the Inspector is occupied by the CSS pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">The CSS pane is divided into 4 views:</p> + +<ul> + <li>Rules view</li> + <li>Computed view</li> + <li>Fonts view</li> + <li>Animations view</li> +</ul> + +<p>Use the tabs along the top to switch between the different views.</p> + +<h3 id="Visualizar_Regras">Visualizar Regras</h3> + +<p>The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> for more details.</p> + +<h3 id="Visualização_computada">Visualização computada</h3> + +<p>The Computed view shows you the complete computed CSS for the selected element, and an editable visual representation of the box model for the element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13855/computed-shadowed-squashed.png" style="display: block; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>To learn more about the box model view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.</p> + +<p>To learn more about the CSS declarations listed in this view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examine computed CSS</a>.</p> + +<h3 id="Visualizar_tipo_de_letra">Visualizar tipo de letra</h3> + +<div class="warning"> +<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p> + +<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p> +</div> + +<p>The Fonts view shows all the fonts in the page along with editable samples.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p> + +<p>Consultar <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Visualizar tipos de letra</a> para mais detalhes.</p> + +<h3 id="Visualizar_animações">Visualizar animações</h3> + +<p>The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>Consulte <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> para mais detalhes.</p> + +<h3 id="Mostrarocultar_painel_CSS">Mostrar/ocultar painel CSS</h3> + +<p>From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p> diff --git a/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html b/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html new file mode 100644 index 0000000000..43385936ed --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html @@ -0,0 +1,21 @@ +--- +title: Abrir o Inspetor +slug: Tools/Page_Inspector/How_to/Abrir_o_inspetor +tags: + - Ferramentas + - Guía + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>Existem dois modos principais para abrir o Inspetor:</p> + +<ul> + <li><em>sem um elemento selecionado</em>: escolha "ferramentas -> Programador Web -> Inspetor" na Barra de Menu ou o <a href="/pt-PT/docs/Tools/atalhos_de_teclado#Abrir_e_fechar_ferramentas">atalho de teclado </a>equivalente.</li> + <li><em>com um elemento selecionado</em>: clique direito do rato num elemento na página da Web e selecione "Inspecionar Elemento"</li> +</ul> + +<p>O 'Inspetor' irá aparecer no fundo da janela do navegador:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="display: block; margin-left: auto; margin-right: auto; width: 845px;">Para começar a encontrar a sua direção em torno do Inspetor, consulte <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU">Guia de IU</a>.</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html new file mode 100644 index 0000000000..5f0bd41323 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html @@ -0,0 +1,223 @@ +--- +title: Examinar e editar CSS +slug: Tools/Page_Inspector/How_to/Examinar_e_editar_CSS +tags: + - Ferramentas + - Guia(2) + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +<div>{{ToolsSidebar}}</div><p>Pode examinar e editar CSS no <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Painel_de_CSS">painel de CSS</a> do Inspetor.</p> + +<h2 id="Examinar_regras_de_CSS">Examinar regras de CSS</h2> + +<p>A <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualização de Regras</a> lista todas regras que se aplicam ao elemento selecionado, ordenada pela mais específica para a menos específica:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>The Rules view lists <a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a> (styles applied by the browser) if the option to do so is checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">developer tool settings</a>. Note that this setting is independent of the "Browser styles" checkbox in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</p> + +<p>The Rules view displays all authored styles, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Exibir_regra">Exibir regra</h3> + +<p>It displays each rule as in a stylesheet, with a list of selectors followed by a list of <code>property:value;</code> declarations.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>Highlight matched elements</em>: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.</li> + <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li> + <li><em>Show cascade</em>: next to overridden declarations is a magnifying glass: click this to see the cascade of rules containing the overridden property. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li> + <li><em>Enable/disable</em>: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.</li> + <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link to CSS file</a>.</li> +</ul> + +<p>Starting in Firefox 52, if the element has a <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">display: grid</a></code> declaration, then it gets a grid icon next to it, like this: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine grid layouts</a> for more on this.</p> + +<p>User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix <code>(user agent)</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="element_rule">element {} rule</h3> + +<p>The <code>element {}</code> rule at the top of the rules list isn't actually a CSS rule. It represents the CSS properties assigned to the element via its {{htmlattrxref("style")}} attribute.</p> + +<p>Starting in Firefox 52, this also gets the target icon: <img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">, giving you a convenient way to highlight the currently selected element in the page.</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Filtrar_regras">Filtrar regras</h3> + +<p>There's a box at the top of the Rules view labeled "Filter Styles":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">As you type:</p> + +<ul> + <li>any rules which don't contain the typed string at all are hidden</li> + <li>any declarations which contain the typed string are highlighted</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Click the "X" at the end of the search box to remove the filter.</p> + +<div class="note"> +<p>While in the Rules view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Strict_search">Strict search</h4> + +<p>By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> and <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> as well as just <code><a href="/en-US/docs/Web/CSS/color">color</a></code>.:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>If you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Expanding_shorthand_properties">Expanding shorthand properties</h3> + +<p><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a> can be expanded to display their related longhand properties by clicking the arrow besides them.</p> + +<h3 id="Displaying_pseudo-elements">Displaying pseudo-elements</h3> + +<p>The Rule view displays the following <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, if they are applied to the selected element:</p> + +<p><code>::after<br> + ::backdrop</code><br> + <code>::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>Clicking the triangle displays them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3> + +<p>There's a button to the right of the filter box:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Click the button to see three checkboxes, which you can use to set the {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} pseudo-classes for the selected element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">This feature can also be accessed from the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">popup menu in the HTML view</a>.</p> + +<p>If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Hiperligação_para_ficheiros_CSS">Hiperligação para ficheiros CSS</h3> + +<p>At the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<p>You can copy the location of the source file: right-click the link and select "Copy Location".</p> + +<p>The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p> + +<h3 id="Obter_ajuda_para_as_propriedades_de_CSS">Obter ajuda para as propriedades de CSS</h3> + +<p>If you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:</p> + +<p>{{EmbedYouTube("ptVtAEOK7y4")}}</p> + +<p>Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.</p> + +<h3 id="Overridden_declarations">Overridden declarations</h3> + +<p>If a CSS declaration is overridden by some other CSS rule with a greater weight, then the declaration is shown with a line through it.</p> + +<p>Overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.</p> + +<p>This makes it easy to see which rule is overriding the declaration:</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examinar_CSS_computada">Examinar CSS computada</h2> + +<p>To see the complete computed CSS for the selected element, switch to the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Computed view</a>. This shows the calculated value that each CSS property has for the selected element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>You can <kbd>Tab</kbd> through them to select them, and from Firefox 49 onwards, you can find more information about these properties — pressing <kbd>F1</kbd> on a selected property will open up its MDN reference page.</p> + +<p>Clicking the arrow next to the property name (or pressing <kbd>Enter</kbd> or <kbd>Space</kbd> while it is selected) shows the rule that set this value, along with a link to the source filename and line number:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box. You can <kbd>Tab</kbd> through the filenames/line numbers; pressing <kbd>Enter</kbd>/<kbd>Return</kbd> will open up the relevant file at that point in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.</p> + +<div class="note"> +<p>While in the Computed view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p> +</div> + +<h2 id="Editar_regras">Editar regras</h2> + +<p>If you click on a declaration or a selector in the Rules view you can edit it and see the results immediately. You can also <kbd>Tab</kbd> through the different existing properties and values, and start editing them by pressing <kbd>Enter</kbd> or <kbd>Space</kbd>. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace).</p> + +<p>As you start typing a property name, you'll see a list of autocomplete suggestions. Press <kbd>Tab</kbd> to accept the current suggestion or <kbd>Up</kbd> and <kbd>Down</kbd> to move through the list. The default choice is the most common property that starts with the letters you've typed. For example, here the user has typed "c" and the default choice is "color":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration.</p> + +<p>Any changes you make are temporary: reloading the page will restore the original styling.</p> + +<p>You can use the arrow keys to increase/decrease numeric rules while editing. The <kbd>Up</kbd> arrow will turn "1px" to 2px, and <kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> will increment by 10. <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> change values by 0.1, and <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> will add or subtract 100 from the value.</p> + +<p>Edits that you make in the Rules view are reflected in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, and vice versa.</p> + +<p>Starting in Firefox 52, if you're editing CSS, the context menu you'll see is the normal one for working with editable text:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Adicionar_regras">Adicionar regras</h2> + +<p>You can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>There's also a button that enables you to do the same thing:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copiar_regras">Copiar regras</h2> + +<p>To copy rules, and pieces of rules, use one of the following context menu items in the Rules view:</p> + +<ul> + <li>Copy Rule</li> + <li>Copy Selector</li> + <li>Copy Property Declaration</li> + <li>Copy Property Name</li> + <li>Copy Property Value</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="Consultar_também">Consultar também</h2> + +<ul> + <li>Lista completa dos <a href="/pt-PT/docs/Tools/Page_Inspector/atalhos_de_teclado">talhos de Teclado</a> do Inspetor de Página.</li> + <li>The Inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. To read about these see the list of <a href="/pt-PT/docs/Tools/Page_Inspector">guias de como...</a>.</li> +</ul> diff --git a/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html new file mode 100644 index 0000000000..0b8815816b --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html @@ -0,0 +1,41 @@ +--- +title: Examinar e editar o modelo de caixa +slug: Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa +tags: + - Ferramentas + - Guia(2) +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +<div>{{ToolsSidebar}}</div><h2 id="Visualização_do_modelo_de_caixa">Visualização do modelo de caixa</h2> + +<p>Com o <a href="/pt-PT/Tools/Page_Inspector/Guia_de_IU/#Selecionar_botão_de_elemento">botão de selecionar Elemento</a> pressionado, se passar o rato por cima de um elemento na página, é mostrado o <a href="/pt-PT/docs/Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS">modelo de caixa</a> para o elemento sobreposto na página:</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>Também é mostrado sobreposto se passar com o rato sobre uma marcação de elemento no painel de HTML:</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<p>Se o elemento está em linha e é dividido em várias caixas de linha, o marcador mostra a cada caixa de linha individual que formam o elemento:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p> + +<h3 id="A_visualização_do_Modelo_de_Caixa">A visualização do Modelo de Caixa</h3> + +<p>Quando é selecionado um elemento, pode obter uma visão detalhada do modelo na <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualização_computada">visualização do Modelo de Caixa</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Se passar o rato sobre um valor, verá uma dica de ferramenta a dizer qual é a regra que o valor provém de:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>Se passar o rato sobre uma parte do modelo de caixa na visualização do Modelo de Caixa, a parte correspondente da página é realçada:</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Edição_do_modelo_de_caixa">Edição do modelo de caixa</h2> + +<p>Também pode editar os valores na <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa#A_visualização_do_Modelo_de_Caixa">visualização do Modelo de Caixa</a>, e ver os resultados imediatatamente na página:</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/index.html b/files/pt-pt/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..4bf8c51b69 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Como... +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">As hiperligações para os vários 'Como...' podem ser encontradas aqui. Estas hiperligações descrevem em profundidade as técnicas de 'Como...'.</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> diff --git a/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html b/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html new file mode 100644 index 0000000000..1ababa4904 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html @@ -0,0 +1,26 @@ +--- +title: Inspecionar e selecionar cores +slug: Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores +tags: + - Ferramentas + - Guia(2) + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +<div>{{ToolsSidebar}}</div><p>Em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a> no Painel de CSS, se uma regra contém um valor de cor, irá ver uma amostra da da cor junto ao valor:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>Se clicar na amostra de cor, verá uma janela para selecionar a cor, permitindo-lhe alterar a cor:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>O selecionador de cores inclui um ícone 'conta-gotas': ao clicar neste ícone permite-lhe utilizar o 'conta-gotas' para selecionar uma nova cor para o elemento da página:</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>A partir da versão 40 do Firefox, ao clicar na amostra de cor enquanto mantém pressionada a tecla 'Shift' irá alterar o formato da cor:</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>A partir da versão 53 do Firefox e superior, este suporta os valores de cor de <a href="https://drafts.csswg.org/css-color/">nível 4 de CSS</a> (EN).</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html b/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html new file mode 100644 index 0000000000..f565ca5bd4 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html @@ -0,0 +1,22 @@ +--- +title: Reposição de elementos na página +slug: Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">New in Firefox 48</div> + +<p>A partir da versão 48 do Firefox pode mover absolutamente os elementos posicionados, arrastando-os em redor da página.</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p>Se um elemento tem a sua propriedade <code>{{cssxref("position")}}</code> definida para <code>absoluta</code>, <code>relativa</code> ou <code>fixa e uma ou mais propriedades de </code>{{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, a <a href="https://developer.mozilla.org/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualização_computada">visualização do Modelo de Caixa</a> exibe um botão:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Se clicar nesse botão, aparecem dois pontos de apoio junto ao elemento:</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>Pode esses pontos de apoio para arrastar o elemento em redor da página.</p> + +<p>Se o elemento estiver absolutamente posicionado, as linhas tracejadas são mostrados a representar o deslocamento original. Para os elementos relativamente posicionados, as linhas tracejadas indicam a posição original do nodo. Os deslocamentos são indicados por uma linha e uma dica da ferramenta para cada lado.</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html b/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html new file mode 100644 index 0000000000..6074a4f513 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html @@ -0,0 +1,108 @@ +--- +title: Trabalhar com animações +slug: Tools/Page_Inspector/How_to/Trabalhar_com_animacoes +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +<div>{{ToolsSidebar}}</div><p>Este artigo aborda três ferramentas que pode utilizar para visualizar e editar animações:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">O inspector de animação</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Edição de @keyframes</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Edição de funções de sincronização</a></li> +</ul> + +<h2 id="Inspetor_de_animação">Inspetor de animação</h2> + +<div class="note"> +<p>Although this tool was introduced in Firefox 41, its UI was revamped in Firefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> +</div> + +<p>From Firefox 41, the Page Inspector includes an <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">extra view labeled "Animations"</a>.</p> + +<p>This view displays CSS transitions and CSS animations synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p> + +<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p> + +<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p> + +<p>Let's use the animation inspector to see what's going on in this example.</p> + +<ul> + <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li> + <li>You'll probably also want to adjust the selected node up a level, to the <code><div class="channel"></code> node.</li> + <li>Switch over to the "Animations" tab.</li> +</ul> + +<p>{{EmbedYouTube("U2eJYacf5XY")}}</p> + +<p>Now play the animation:</p> + +<p>{{EmbedYouTube("CwXXXEllB3o")}}</p> + +<p>Let's take a closer look at the contents of the animation inspector here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p> + +<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p> + +<p>Cada animação ou transição é mostrada como uma barra horizontal disposta através da barra cronológica:</p> + +<ul> + <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li> + <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li> + <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li> + <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li> + <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li> +</ul> + +<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p> + +<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p> + +<p>Aplicando tudo isto para o nosso exemplo, nós podemos ver que:</p> + +<ul> + <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li> + <li>Each element had two properties animated: + <ul> + <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li> + <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li> + </ul> + </li> + <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li> + <li>The <code>transform</code> property transition ends after 0.5 seconds.</li> + <li>The <code>transform</code> property was animated on the compositor thread.</li> +</ul> + +<h3 id="Reprodução_de_animação">Reprodução de animação</h3> + +<p>No topo do inspetor de animação:</p> + +<ul> + <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li> + <li>the current time in the animation is displayed (new in Firefox 44).</li> +</ul> + +<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p> + +<p>{{EmbedYouTube("1hqNaMsB48g")}}</p> + +<h2 id="Editar_keyframes">Editar @keyframes</h2> + +<p>Quaisquer <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">regras de @keyframes </a> associadas com o elemento atualmente selecionado são exibibas na <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Visualização das Regras </a>e são editáveis:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Editar_funções_de_sincronização">Editar funções de sincronização</h2> + +<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p> + +<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>Esta funcionalidade utiliza o código fonte de <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p> + +<p>O editor cúbico Bézier inclui um número de pré-ajustes, agrupados sob "Ease-in", "Ease-out", and "Ease-in-out":</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html b/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html new file mode 100644 index 0000000000..ccfe9ea71b --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html @@ -0,0 +1,43 @@ +--- +title: Utilizar a API do Inspetor +slug: Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor +tags: + - Ferramentas + - Inspetor + - Referência(2) +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +<div>{{ToolsSidebar}}</div><p>Firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:</p> + +<h3 id="window.inspector">window.inspector</h3> + +<p>defined in <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Attributes and functions:</p> + +<ul> + <li>.selection - information about the inspector's selection: + <ul> + <li>.isNode() - returns true if selection is node.</li> + <li>.node - returns the actual element from the page</li> + <li>.window - the window object of the frame the selection is in.</li> + </ul> + </li> + <li>.markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.</li> +</ul> + +<p>Bindable events using on:</p> + +<h4 id="markuploaded">markuploaded</h4> + +<p>Called when the left panel has been refreshed, after page change.</p> + +<h4 id="ready">ready</h4> + +<p>Called on first markuploaded.</p> + +<h4 id="pseudoclass">pseudoclass</h4> + +<p>Called after toggle of a pseudoclass.</p> + +<h4 id="layout-change">layout-change</h4> + +<p>"low-priority change event for things like paint and resize."</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html b/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html new file mode 100644 index 0000000000..fef74a5306 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html @@ -0,0 +1,28 @@ +--- +title: Visualizar tipos de letra +slug: Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra +tags: + - Ferramentas + - Guia(2) + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +<div>{{ToolsSidebar}}</div><h2 id="Dica_da_ferramenta_da_família_do_tipo_de_letra">Dica da ferramenta da família do tipo de letra</h2> + +<p>Se passar o rato sobre uma propriedade da <a href="/pt-PT/docs/Web/CSS/font-family"><code>família do tipo de letra</code></a> em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a>, irá obter uma dica de ferramenta com uma amostra desse tipo de letra:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9957/font-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 565px;"></p> + +<h2 id="Visualizar_tipos_de_letra">Visualizar tipos de letra</h2> + +<div class="warning"> +<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p> + +<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p> +</div> + +<p>Em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_tipo_de_letra">visualizar Tipos de Letra </a>mostra todos os tipos de letra em utilziação pelo elemento selecionado. Note que esta mostra o tipo de letra utilizado no seu sistema, que poderá ser diferente dos tipos de letra especificados na CSS:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p> + +<p>O texto em 'visualizar tipo de letra' é "Abc" por predefinição, e a partir da versão 41 do Firefox o texto da pré-visualização pode ser editado livremente.</p> diff --git a/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html b/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..1ad38640b4 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,12 @@ +--- +title: Visualizar transformações +slug: Tools/Page_Inspector/How_to/Visualize_transforms +tags: + - Ferramentas + - Guia(2) + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +<div>{{ToolsSidebar}}</div><p>Se passar o rato sobre uma propriedade <a href="/pt-PT/docs/Web/CSS/transform"><code>transform</code></a> em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a>, irá ver a transformação sobreposta na página:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p> diff --git a/files/pt-pt/tools/page_inspector/index.html b/files/pt-pt/tools/page_inspector/index.html new file mode 100644 index 0000000000..66745268f4 --- /dev/null +++ b/files/pt-pt/tools/page_inspector/index.html @@ -0,0 +1,58 @@ +--- +title: Inspetor de Página +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - Desenvolvimento da Web + - 'Desenvolvimento da Web: Ferramentas' + - Folhas de estilo + - HTML + - Precisa de Tradução + - 'l10n:prioridade' +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div><p>Utilize o 'Inspetor de Página' para examinar e modificar o HTML e CSS de uma página.</p> + +<p>Pode examinar as páginas carregadas na cópia local do Firefox ou num destino remoto, tal como um dispositivo com o Firefox OS ou Firefox para Android. Consulte a <a href="/pt-PT/docs/Tools/Remote_Debugging">depuração remota </a>para saber como ligar as ferramentas de desenvolvimento a um destino remoto.</p> + +<hr> +<h2 id="Guia_da_Interface_do_Utilizador">Guia da Interface do Utilizador</h2> + +<p>Para se movimentar no Inspector, pode ver um <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU">guia rápido da IU</a>.</p> + +<hr> +<h2 id="Como...">Como...</h2> + +<p>Saiba o que pode fazer com o Inspetor, consulte os seguintes guias de como...:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Abrir_o_inspetor">Abrir o Inspetor</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_HTML">Examinar e editar HTML</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa">Examinar e editar o modelo de caixa</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores">Inspecionar e selecionar cores</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina">Reposicionar elementos na página</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Ver tipos de letra</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualizar 'transforms</a>'</li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor">Utilizar a API do Inspetor</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Selecionar_um_elemento">Selecionar um elemento</a></li> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_CSS">Examinar e editar CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examinar escutas de evento</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabalhar com animações</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Editar filtros de CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Ver imagens de fundo</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utilizar o Inspetor a partir da Consola da Web</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> +</ul> +</div> + +<hr> +<h2 id="Referência">Referência</h2> + +<div class="onecolumn"> +<ul> + <li><a href="/pt-PT/docs/Tools/Page_Inspector/atalhos_de_teclado">Atalhos de teclado</a></li> + <li><a href="/pt-PT/docs/Tools/Tools_Toolbox">Configurações</a></li> +</ul> +</div> diff --git a/files/pt-pt/tools/performance/guia_da_iu/index.html b/files/pt-pt/tools/performance/guia_da_iu/index.html new file mode 100644 index 0000000000..e1b561a017 --- /dev/null +++ b/files/pt-pt/tools/performance/guia_da_iu/index.html @@ -0,0 +1,127 @@ +--- +title: Guia da IU (Interface do Utilizador) +slug: Tools/Performance/Guia_da_IU +translation_of: Tools/Performance/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>A 'IU - Interface do Utilizador' da ferramenta desempenho consiste em 4 partes principais:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p> + +<ul> + <li><a href="/pt-PT/docs/Tools/Performance/Guia_da_IU#Barra_de_Ferramentas">Barra de Ferramentas</a></li> + <li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Painel_de_gravações">Painel de gravações</a></li> + <li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Resumo_da_gravação">Resumo da gravação</a></li> + <li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Painel_de_detalhes">Painel de detalhes</a>, que poderá conter qualquer um de: + <ul> + <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li> + </ul> + </li> +</ul> + +<h2 id="Barra_de_Ferramentas">Barra de Ferramentas</h2> + +<p>A barra de ferramentas contém botões para:</p> + +<ul> + <li>iniciar e parar a gravação</li> + <li>importar uma gravação anteriormente guardada</li> + <li>limpar o painel de 'Gravações'. <em>Note que se o fizer, perde quaisquer gravações que não tenha guardado.</em></li> + <li>filtrar os <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marcadores</a> que são exibidos na bisualização de <em>Waterfall</em></li> + <li>mude a ferramenta ativa no painel de '<a href="/pt-PT/docs/Tools/Performance/Guia_IU#Painel_de_detalhes">Detalhes'</a>.</li> + <li>aceder à janela das 'Definições'</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<h2 id="Painel_de_gravações">Painel de gravações</h2> + +<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p> + +<p>At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".</p> + +<h2 id="Resumo_da_gravação">Resumo da gravação</h2> + +<p>This displays an overview of the entire recording, with the x-axis representing time.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p> + +<h3 id="Resumo_de_Waterfall">Resumo de Waterfall</h3> + +<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p> + +<h3 id="Gráfico_de_taxa_de_imagem">Gráfico de taxa de imagem</h3> + +<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p> + +<h3 id="Eventos_dependentes">Eventos dependentes</h3> + +<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p> + +<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h3 id="Zoom">Zoom</h3> + +<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h2 id="Painel_de_detalhes">Painel de detalhes</h2> + +<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p> + +<h3 id="Waterfall">Waterfall</h3> + +<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p> + +<h3 id="Call_Tree">Call Tree</h3> + +<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br> + To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p> + +<h3 id="Flame_Chart">Flame Chart</h3> + +<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p> + +<h3 id="Alocações">Alocações</h3> + +<div class="geckoVersionNote"> +<p>The Allocations view is new in Firefox 46.</p> +</div> + +<p>The Allocations view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<p>To learn much more about the Allocations view, see the separate <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p> + +<p> </p> diff --git a/files/pt-pt/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/pt-pt/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..0099b3a81d --- /dev/null +++ b/files/pt-pt/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,42 @@ +--- +title: Depurar Firefox para PC +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +tags: + - Depuração + - Ferramentas + - Guía +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<p>{{draft}}</p> + +<p>{{ToolsSidebar}}</p> + +<p>This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the <em>debuggee</em>, and the instance of Firefox doing the debugging is called the <em>debugger</em>.</p> + +<h2 id="Enable_remote_debugging">Enable remote debugging</h2> + +<p>First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>. If you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, they are checked by default.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>You only need to do this once: the setting values persist across restarts.</p> + +<h2 id="Start_the_debugger_server">Start the debugger server</h2> + +<p>Next, you need to start the debugger server in the debuggee.</p> + +<p>Run the debuggee from the command line, passing it the <code>--start-debugger-server</code> option:</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>Note: in Windows, the <code>start-debugger-server</code> call will only have one dash:</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>Note</strong>: By default, and for security reasons, the <code>devtools.debugger.force-local</code> option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.</p> +</div> diff --git a/files/pt-pt/tools/remote_debugging/depuracao_remota_thunderbird/index.html b/files/pt-pt/tools/remote_debugging/depuracao_remota_thunderbird/index.html new file mode 100644 index 0000000000..31f3278847 --- /dev/null +++ b/files/pt-pt/tools/remote_debugging/depuracao_remota_thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Depurar remotamente o Thunderbird +slug: Tools/Remote_Debugging/Depuracao_remota_Thunderbird +tags: + - Tutorial + - depurar + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +<div>{{ToolsSidebar}}</div><p>This guide explains how to use <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">remote debugging </a>to inspect or debug code running in <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a>.</p> + +<p>Various developer tools are supported by Thunderbird using the remote connection mechanism in Firefox. The currently supported toolset is the Web Console, Inspector, Debugger, Style Editor, Profiler and Network Monitor. Other Tools may become available in the future.</p> + +<h2 id="Configurar_o_Thunderbird">Configurar o Thunderbird</h2> + +<p>All that needs to be done in Thunderbird is enabling the debugger server. This can be done using <code>Tools</code> from the Menu Bar (alt + Tools) and selecting <code>Allow Remote Debugging</code>. By default, a debugger server will be started on port 6000. If you would like to change this port, for example to debug multiple profiles, you must open the advanced config editor and change the preference <code>devtools.debugger.remote-port</code>.</p> + +<h2 id="Configurar_o_Firefox">Configurar o Firefox</h2> + +<p>Firefox acts as the client and provides the user interface to control the developer tools for Thunderbird. It's best to use a Firefox and Thunderbird version with a matching major version number, but in some cases it will work even with differing versions.</p> + +<p>To set up Firefox, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png"></p> + +<p>Now you can open the connection page in Firefox via the tools menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="height: 503px; width: 583px;"></p> + +<p>A page will open in the browser; you can add this to your bookmarks toolbar if you like. In case you didn't change the remote port, the fields will already be filled out correctly. Click on the Connect button to initiate the developer tools remote connection.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="height: 686px; width: 732px;"></p> + +<p>Afterwards you will be presented with a list of remote tabs and processes. As Thunderbird's notion of tabs doesn't match Firefox, the remote tabs area shows all xul:browser elements in Thunderbird. This can be a content tab, or the message reader. In most cases you will want to select "Main Process" to debug the Thunderbird code itself. A new window opens containing a set of developer tools that can be used with your Thunderbird instance.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png"></p> + +<h2 id="Utilizar_as_Ferramentas_de_Desenvolvimento">Utilizar as Ferramentas de Desenvolvimento</h2> + +<p>Usage of the tools is mostly self explanatory. If you are having trouble with a certain tool, check the <a href="/en-US/docs/Tools/Remote_Debugging">Developer Tools documentation</a>. Due to a remote connection being used there might be some slight differences. Some tools might not be available, and it is also possible that performance is not comparable. For example, using the remote debugger tool takes quite some time to load because the files must be transferred over an internal network connection.</p> + +<h2 id="Resolução_de_problemas">Resolução de problemas</h2> + +<p>If you encounter an error, the first thing you should check is if you are using matching version numbers. If you are using Thunderbird 24, you should also use Firefox 24 to connect. Next, it important to figure out if it is a problem with the Firefox Developer Tools or with the remote connection code in Thunderbird. To verify this, please try to reproduce the problem using only Firefox. For example, if you notice that you cannot set an attribute value in the Inspector tool, try changing an attribute in the Browser Debugger in Firefox. If you cannot reproduce it there, file a bug in the Thunderbird product, otherwise file a bug in Firefox/Developer Tools.</p> diff --git a/files/pt-pt/tools/remote_debugging/index.html b/files/pt-pt/tools/remote_debugging/index.html new file mode 100644 index 0000000000..a0eb56ab9a --- /dev/null +++ b/files/pt-pt/tools/remote_debugging/index.html @@ -0,0 +1,21 @@ +--- +title: Depuração Remota +slug: Tools/Remote_Debugging +tags: + - Ferramentas + - 'l10n:prioridade' +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>Pode utilizar as <a href="/pt-PT/docs/Tools">ferramentas de desenvolvimento do Firefox</a> no seu PC para depurar sites da Web e aplicação da Web em execução em outros navegadores ou tempos de execução. O outro navegador poderá estar no mesmo dispositivo que as próprias ferramentas ou num dispositivo diferente, tal como um telefone ligrado através de USB.</p> + +<p>As instruções detalhadas para ligar às ferramentas de programador são específicas de tempo de execução.</p> + +<p>Pode ligar às ferramentas de programador para os tempos de execução naseados em Gecko, tais como Firefox para PC, Firefox para Android, e Thunderbird.</p> + +<ul> + <li><a href="/pt-PT/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox para PC</a></li> + <li>Firefox para Android <a href="/pt-PT/docs/Tools/about:debugging">através de USB</a></li> + <li><a href="/pt-PT/docs/Tools/Remote_Debugging/Depuracao_remota_Thunderbird">Thunderbird</a></li> +</ul> diff --git a/files/pt-pt/tools/scratchpad/index.html b/files/pt-pt/tools/scratchpad/index.html new file mode 100644 index 0000000000..c232451a3f --- /dev/null +++ b/files/pt-pt/tools/scratchpad/index.html @@ -0,0 +1,126 @@ +--- +title: Scratchpad +slug: Tools/Scratchpad +tags: + - Desenvolvimento da Web + - 'Desenvolvimento da Web: Ferramentas' + - Ferramentas + - Scratchpad + - 'l10n:priority' +translation_of: Archive/Tools/Scratchpad +--- +<div>{{ToolsSidebar}}</div> + +<div class="blockIndicator warning"> +<p>Scratchpad is deprecated as of Firefox 70 (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1565380" rel="noopener" title="FIXED: Add deprecation warning to Scratchpad">bug 1565380</a>), and will be removed as of Firefox 72 (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1519103" rel="noopener" title="FIXED: Remove Scratchpad panel">bug 1519103</a>). As an alternative, starting in Firefox 71, you can use the multi-line mode of the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode">JavaScript console input</a>.</p> +</div> + +<p>Scratchpad proporciona um ambiente para testar com o código JavaScript. Pode escrever, exeutar, e examinar tos resultados do código que interage com a página da Web.</p> + +<p>Ao contrário da <a href="/pt-PT/docs/Tools/Consola_da_Web" title="en/Using the Web Console">Consola da Web</a>, que foi desenhada para interpretar uma única linha de código, Scratchpad deixa-o editar grandes partes do código JavaScript, depois execute-o em vários modos, dependendo do modo em que pretende utilizar a saída.</p> + +<p>{{EmbedYouTube("Pt7DZACyClM")}}</p> + +<div class="blockIndicator note"> +<p>The featured video tutorial shows a case of using Scratchpad with a page run by a local web server. It is also possible to use Scratchpad over pages opened from a local file system, if permission policies allow that. But even with possible limitations present, the HTML code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>'s <em>Edit as HTML</em> context menu command.</p> +</div> + +<h2 id="Utilização">Utilização</h2> + +<h3 id="Opening_Scratchpad_in_its_own_window">Opening Scratchpad in its own window</h3> + +<p>There are several different ways to open Scratchpad in its own window:</p> + +<ul> + <li>press <kbd>Shift</kbd> + <kbd>F4</kbd>, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad</li> + <li>click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Scratchpad".</li> +</ul> + +<p>This will open up Scratchpad in its own window.</p> + +<h3 id="Abrir_o_Scratchpad_na_Caixa_de_Ferramentas">Abrir o Scratchpad na Caixa de Ferramentas</h3> + +<div class="geckoVersionNote">New in Firefox 47.</div> + +<p>From Firefox 47, you can open Scratchpad inside the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Settings</a> page.</p> + +<p>Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in <a href="/en-US/docs/Tools/Web_Console/Split_console">split Console mode</a>: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.</p> + +<h3 id="Edição">Edição</h3> + +<p>The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen):</p> + +<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p> + +<p>The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.</p> + +<h4 id="Conclusão_do_código">Conclusão do código</h4> + +<p>Scratchpad integrates the <a href="http://ternjs.net/">tern code analysis engine</a>, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. To list autocomplete suggestions, press <kbd>Ctrl</kbd> + <kbd>Space</kbd>.</p> + +<p>For example, try typing <kbd>d</kbd>, then pressing <kbd>Ctrl</kbd> + <kbd>Space</kbd>. You'll see the autocomplete box, as shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. <kbd>↑</kbd> and <kbd>↓</kbd> cycle through the suggestions and <kbd>Enter</kbd> or <kbd>Tab</kbd> select the highlighted choice.</p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>To show the inline documentation popup, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> when the cursor is on an identifier. For example, if you type <code>document</code>.<code>addEventListener</code>, then press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, you'll see a popup that shows a summary of the function's syntax and a short description:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">The "[docs]" link takes you to the MDN documentation for the symbol.</p> + +<h3 id="Execução">Execução</h3> + +<p class="note">Once you've written your code, select the code you want to run. If you don't select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.</p> + +<p>There are four execution options available.<strong> </strong></p> + +<h4 id="Executar">Executar</h4> + +<p>When you choose the Run option, the selected code is executed. This is what you'd use to execute a function or other code that manipulates the content of your page without needing to see the result.</p> + +<h4 id="Inspecionar">Inspecionar</h4> + +<p>The Inspect option executes the code just like the Run option; however, after the code returns, an object inspector is opened to let you examine the returned value.</p> + +<p>Por exemplo, se inserir o código:</p> + +<pre class="brush:css">window +</pre> + +<p>Then choose Inspect, the object inspector is shown that looks something like this:</p> + +<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p> + +<h4 id="Display">Display</h4> + +<p>The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment, so you can use it as a <a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>.</p> + +<h4 id="Reload_And_Run">Reload And Run</h4> + +<p>The Reload And Run option is only available in the Execute menu. It first reloads the page, then executes the code when the page's "load" event fires. This is useful for running the code in a pristine environment.</p> + +<h2 id="Executar_o_Scratchpad_no_contexto_do_navegador">Executar o Scratchpad no contexto do navegador</h2> + +<p>You can run Scratchpad in the context of the browser as a whole rather than a specific web page. This is useful if you are working on Firefox itself or developing add-ons. To do this check "Enable chrome and add-on debugging" in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a>. Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals:</p> + +<pre class="brush: js">window +/* +[object ChromeWindow] +*/ + +gBrowser +/* +[object XULElement] +*/</pre> + +<p>The Scratchpad execution context is set to browser when a snippet file has<br> + <code>// -sp-context: browser</code><br> + on the first line.</p> + +<h2 id="Atalhos_de_teclado">Atalhos de teclado</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p> + +<h3 id="Atalhos_do_editor_fonte">Atalhos do editor fonte</h3> + +<p>{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> diff --git a/files/pt-pt/tools/tools_toolbox/index.html b/files/pt-pt/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..9376aefb14 --- /dev/null +++ b/files/pt-pt/tools/tools_toolbox/index.html @@ -0,0 +1,181 @@ +--- +title: Caixa de Ferramentas +slug: Tools/Tools_Toolbox +translation_of: Tools/Tools_Toolbox +--- +<div>{{ToolsSidebar}}</div><p>A 'Caixa de Ferramentas' fornece um único local para a maioria das ferramentas de desenvolvimento que são criadas para o Firefox.</p> + +<p>There are a few different ways to open the Toolbox:</p> + +<ul> + <li>select "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows)</li> + <li>click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Toggle Tools"</li> + <li>activate any tool hosted in the Toolbox (for example, the JavaScript Debugger or the Page Inspector)</li> + <li>press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on OS X. See also <a href="/en-US/docs/Tools/Keyboard_shortcuts">keyboard shortcuts</a>.</li> +</ul> + +<p>Por predefinição, a Caixa de Ferramentas aparece anexada na base da janela do navegador, mas também pode desanexá-la se desejar. É assim que esta aparece quando está anexada:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">A janela é dividida em duas partes: uma barra de ferramentas no topo, e um painel principal por debaixo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; height: 471px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<h2 id="Modo_de_anexação">Modo de anexação</h2> + +<p>Por predefinição, a Caixa de Ferramentas aparece anexada na base da janela do navegador, mas também pode anexá-la no lado direito da janela, ou utilizá-la numa janela independente, utilizando os <a href="/pt-PT/docs/Tools/Tools_Toolbox#Controlos_da_caixa_de_ferramentas">botões na barra de ferramentas</a>.</p> + +<h2 id="Barra_de_Ferramentas">Barra de Ferramentas</h2> + +<p>The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Selecionador_de_Nodo">Selecionador de Nodo</h3> + +<p>On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">"Selecting elements"</a>.</p> + +<h3 id="Ferramentas_hospedadas_na_Caixa_de_Ferramentas">Ferramentas hospedadas na Caixa de Ferramentas</h3> + +<p>Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Network Monitor</a></li> +</ul> + +<p>Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown).</p> + +<h3 id="Ferramentas_extra">Ferramentas extra</h3> + +<p>Next there's an array of buttons that can be added or removed in the <a href="#Settings">developer tool settings</a>. By default this array includes:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Pick an element from the page</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li> + <li><a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></li> + <li><a href="/en-US/docs/tools/Working_with_iframes">Select a frame as the currently targeted document</a> (this is only included by default from Firefox 41 onwards).</li> +</ul> + +<p>The following tools are not included in the toolbar by default, but you can add them in the <a href="#Settings">settings</a>:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Highlight painted area</a></li> + <li><a href="/en-US/docs/Tools/3D_View">3D view</a> (note that this is not available in Firefox 40)</li> + <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li> + <li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li> + <li>Take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your Downloads directory</li> + <li><a href="/en-US/docs/Tools/Rulers">Toggle rulers for the page</a></li> + <li>Measure a portion of the page: measure a part of the website by selecting areas within the page</li> +</ul> + +<h3 id="Controlos_da_caixa_de_ferramentas">Controlos da caixa de ferramentas</h3> + +<p>Finally there's a row of buttons to:</p> + +<ul> + <li>close the window</li> + <li>toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window</li> + <li>toggle the window between standalone and attached to the browser window</li> + <li>access <a href="#Settings" title="#Settings">developer tool settings</a></li> +</ul> + +<h2 id="Configurações"><a name="Settings">Configurações</a></h2> + +<p><a href="/en-US/docs/Tools/Settings">See the separate page on the Developer Tools Settings</a>.</p> + +<h2 id="Painel_Principal">Painel Principal</h2> + +<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p> + +<h2 id="Atalhos_de_teclado">Atalhos de teclado</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}</p> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</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%; display: none; opacity: 1;"> </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">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</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="Ouça"> </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="Copiar"> </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="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </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="Fixar a janela de pop-up"> </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">A função de fala é limitada a 200 caracteres</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="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/webide/index.html b/files/pt-pt/tools/webide/index.html new file mode 100644 index 0000000000..ade5815623 --- /dev/null +++ b/files/pt-pt/tools/webide/index.html @@ -0,0 +1,41 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Aplicações + - Apps + - Depuração + - Fiirefox OS + - WebIDE + - ferramenta +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>WebIDE permite-lhe criar, editar, executar, e depurar as aplicações da Web, utilizando o <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">FSimulador de Firefox OS </a>ou um dispositivo real com o Firefox OS.</p> + +<p>It also enables you to connect the <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB (or over Wi-Fi since <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. If you're creating a new app you can start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<hr> +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">Abrir WebIDE</a></dt> + <dd>How to open WebIDE from within Firefox.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">Setting up runtimes</a></dt> + <dd>How to connect to a runtime in which you can install apps, including Firefox OS devices, the the Firefox OS Simulator, and Firefox for Android.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">Criação e edição de aplicações</a></dt> + <dd>How to create, open, and develop apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/The_runtime_menu">The runtime menu</a></dt> + <dd>Once you've selected a runtime, use the runtime menu to get information about the runtime and its apps, modify settings, and take a screenshot.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">Running and debugging apps</a></dt> + <dd>How to install apps to a runtime and debug them using the Firefox Developer Tools.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Working with Cordova apps in WebIDE</a></dt> + <dd>From Firefox 39, you can edit and debug Cordova apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Resolução de Problemas</a></dt> + <dd>Help for problems with WebIDE, especially problems connecting to a runtime.</dd> +</dl> |