From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-pt/tools/about_colon_debugging/index.html | 250 +++++ files/pt-pt/tools/add-ons/index.html | 15 + files/pt-pt/tools/atalhos_de_teclado/index.html | 1156 ++++++++++++++++++++ files/pt-pt/tools/capturas_de_ecra/index.html | 42 + .../tools/configura\303\247\303\265es/index.html" | 244 +++++ .../consola_da_web/abertura_consola_web/index.html | 27 + files/pt-pt/tools/consola_da_web/ajuda/index.html | 142 +++ .../consola_da_web/atalhos_teclado/index.html | 14 + .../consola_da_web/dividir_consola/index.html | 20 + files/pt-pt/tools/consola_da_web/index.html | 48 + .../consola_da_web/mensagens_consola/index.html | 474 ++++++++ .../o_interprete_da_linha_de_comandos/index.html | 187 ++++ .../tools/consola_da_web/rich_output/index.html | 77 ++ .../configura\303\247\303\265es/index.html" | 59 + .../tools/debugger/demonstracao_iu/index.html | 94 ++ .../debugger/how_to/abrir_o_depurador/index.html | 18 + files/pt-pt/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/use_a_source_map/index.html | 32 + files/pt-pt/tools/debugger/index.html | 62 ++ .../tools/debugger/source_map_errors/index.html | 70 ++ .../tools/desempenho/arvore_de_chamada/index.html | 193 ++++ files/pt-pt/tools/desempenho/cascata/index.html | 563 ++++++++++ files/pt-pt/tools/desempenho/como_fazer/index.html | 64 ++ files/pt-pt/tools/desempenho/frame_rate/index.html | 60 + files/pt-pt/tools/desempenho/index.html | 185 ++++ .../pt-pt/tools/editor_de_audio_da_web/index.html | 68 ++ files/pt-pt/tools/editor_de_estilo/index.html | 111 ++ files/pt-pt/tools/index.html | 228 ++++ .../tools/inspetor_de_armazenamento/index.html | 192 ++++ files/pt-pt/tools/memoria/index.html | 65 ++ .../tools/modo_de_desenho_adaptavel/index.html | 214 ++++ files/pt-pt/tools/network_monitor/index.html | 693 ++++++++++++ .../page_inspector/atalhos_de_teclado/index.html | 93 ++ .../tools/page_inspector/guia_de_iu/index.html | 101 ++ .../how_to/abrir_o_inspetor/index.html | 21 + .../how_to/examinar_e_editar_css/index.html | 223 ++++ .../examinar_e_editar_o_modelo_de_caixa/index.html | 41 + files/pt-pt/tools/page_inspector/how_to/index.html | 13 + .../inspecionar_e_selecionar_cores/index.html | 26 + .../reposicao_de_elementos_na_pagina/index.html | 22 + .../how_to/trabalhar_com_animacoes/index.html | 108 ++ .../how_to/utilizar_a_api_do_inspetor/index.html | 43 + .../how_to/visualizar_tipos_de_letra/index.html | 28 + .../how_to/visualize_transforms/index.html | 12 + files/pt-pt/tools/page_inspector/index.html | 58 + .../pt-pt/tools/performance/guia_da_iu/index.html | 127 +++ .../debugging_firefox_desktop/index.html | 42 + .../depuracao_remota_thunderbird/index.html | 44 + files/pt-pt/tools/remote_debugging/index.html | 21 + files/pt-pt/tools/scratchpad/index.html | 126 +++ files/pt-pt/tools/tools_toolbox/index.html | 181 +++ files/pt-pt/tools/webide/index.html | 41 + 52 files changed, 7049 insertions(+) create mode 100644 files/pt-pt/tools/about_colon_debugging/index.html create mode 100644 files/pt-pt/tools/add-ons/index.html create mode 100644 files/pt-pt/tools/atalhos_de_teclado/index.html create mode 100644 files/pt-pt/tools/capturas_de_ecra/index.html create mode 100644 "files/pt-pt/tools/configura\303\247\303\265es/index.html" create mode 100644 files/pt-pt/tools/consola_da_web/abertura_consola_web/index.html create mode 100644 files/pt-pt/tools/consola_da_web/ajuda/index.html create mode 100644 files/pt-pt/tools/consola_da_web/atalhos_teclado/index.html create mode 100644 files/pt-pt/tools/consola_da_web/dividir_consola/index.html create mode 100644 files/pt-pt/tools/consola_da_web/index.html create mode 100644 files/pt-pt/tools/consola_da_web/mensagens_consola/index.html create mode 100644 files/pt-pt/tools/consola_da_web/o_interprete_da_linha_de_comandos/index.html create mode 100644 files/pt-pt/tools/consola_da_web/rich_output/index.html create mode 100644 "files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" create mode 100644 files/pt-pt/tools/debugger/demonstracao_iu/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/pt-pt/tools/debugger/index.html create mode 100644 files/pt-pt/tools/debugger/source_map_errors/index.html create mode 100644 files/pt-pt/tools/desempenho/arvore_de_chamada/index.html create mode 100644 files/pt-pt/tools/desempenho/cascata/index.html create mode 100644 files/pt-pt/tools/desempenho/como_fazer/index.html create mode 100644 files/pt-pt/tools/desempenho/frame_rate/index.html create mode 100644 files/pt-pt/tools/desempenho/index.html create mode 100644 files/pt-pt/tools/editor_de_audio_da_web/index.html create mode 100644 files/pt-pt/tools/editor_de_estilo/index.html create mode 100644 files/pt-pt/tools/index.html create mode 100644 files/pt-pt/tools/inspetor_de_armazenamento/index.html create mode 100644 files/pt-pt/tools/memoria/index.html create mode 100644 files/pt-pt/tools/modo_de_desenho_adaptavel/index.html create mode 100644 files/pt-pt/tools/network_monitor/index.html create mode 100644 files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html create mode 100644 files/pt-pt/tools/page_inspector/guia_de_iu/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html create mode 100644 files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html create mode 100644 files/pt-pt/tools/page_inspector/index.html create mode 100644 files/pt-pt/tools/performance/guia_da_iu/index.html create mode 100644 files/pt-pt/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/pt-pt/tools/remote_debugging/depuracao_remota_thunderbird/index.html create mode 100644 files/pt-pt/tools/remote_debugging/index.html create mode 100644 files/pt-pt/tools/scratchpad/index.html create mode 100644 files/pt-pt/tools/tools_toolbox/index.html create mode 100644 files/pt-pt/tools/webide/index.html (limited to 'files/pt-pt/tools') 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' +--- +
{{ToolsSidebar}}
+ +

A página de about:debugging 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 workers.

+ +

Abrir a página de about:debugging

+ +

Existem dois modos para abrir about:debugging:

+ + + +

Quando about:debugging abrir, no lado esquerdo, irá ver uma barra lateral com duas opções e informação sobre a configuração da depuração remota.

+ +
+
Configuração
+
Use the Setup tab to configure the connection to your remote device.
+
Este Firefox
+
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.
+
+ +

+ +

Se a sua página de about:debugging é diferente da exibida aqui, vá paraabout:config, encontre e defina a opção devtools.aboutdebugging.new-enabled para true.

+ +

Configurar o separador

+ +

Ligar a um dispositivo remoto

+ +

Firefox supports debugging over USB with Android devices, using the about:debugging page.

+ +

Before you connect:

+ +
    +
  1. Enable Developer settings on your Android device.
    2. +
  2. Enable USB debugging in the Android Developer settings.
    3. +
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. +
  4. Connect the Android device to your computer using a USB cable.
    5. +
+ +

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

+ +

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge 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 Refresh devices button again. The device should appear.

+ +
+

Nota: You do not need to install the full Android Studio SDK. Only adb is needed.

+
+ +

To start a debugging session, first open the page that you wish to debug and then click Connect 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.

+ +

Screenshot of the debugging page for an Android device

+ +

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

+ +

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:

+ +

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.

+ +

In Firefox 76 and above, the message can look like the following:

+ +

This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

+ +

See Connection for Firefox for Android 68 for more information.

+ +

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

+ +

+ +

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.

+ +

Ligar através da Rede

+ +

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 Localização da rede da página about:debugging.

+ +

+ +

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:

+ +

+ +

Este Firefox

+ +

O separador Este Firefox combina as funcionalidades das «Extensões», «Separadores», e «Workers» num único separador com as secções seguintes:

+ +
+
Extensões temporárias
+
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
+
Extensões
+
This section lists information about the extensions that you have installed on your system.
+
Service Workers, Shared Workers, e Outros Workers
+
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
+
+ +

+ +

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

+ +

Extensões

+ +

Carregar uma extensão temporária

+ +

With the Load Temporary Add-on 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 Temporary Extensions header.

+ +

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

+ +

The major advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

You can use the following buttons:

+ +
+
Inspect
+
Loads the extension in the debugger.
+
Reload
+
Reloads the temporary extension. This is handy when you have made changes to the extension.
+
Remove
+
Unloads the temporary extension.
+
+ +

Other information about the extension is displayed:

+ +
+
Location
+
The location of the extension's source code on your local system.
+
Extension ID
+
The temporary ID assigned to the extension.
+
Internal UUID
+
The internal UUID assigned to the extension.
+
Manifest URL
+
If you click the link, the manifest for this extension is loaded in a new tab.
+
+ +

Atualizar uma extensão temporária

+ +

If you install an extension in this way, what happens when you update the extension?

+ + + +

Extensões Instaladas

+ +

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

+ +

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

+ +
+

Nota: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

+ +
+

Nota: This list may include add-ons that came preinstalled with Firefox.

+
+ +

If you click Inspect, the Add-on Debugger will start in a new tab.

+ +

{{EmbedYouTube("efCpDNuNg_c")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +

Workers

+ +

The Workers page shows your workers, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +
+

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+
+ +

Unregistering service workers

+ +

Click the Unregister button to unregister the service worker.

+ +

Sending push events to service workers

+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

+ +

Service workers not compatible

+ +

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+ +

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

+ +

Ligação ao Firefox para Android 68

+ +

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:

+ + + +

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 Firefox Extended Support Release (ESR), which is also based on version 68.

+ +

Note that about:debugging is not enabled by default in Firefox ESR.  To enable it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.

+ +

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 What happens to my profile if I downgrade to a previous version of Firefox?

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 +--- +
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
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 +--- +
{{ToolsSidebar}}
+ +

Esta página lista todos os atalhos de teclado utilizados pelas ferramentas de desenvolvimento integradas no Firefox.

+ +

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.

+ +

Porque as chaves de acesso são dependentes do local, elas não estão documentadas nesta página.

+ +

Abrir e fechar ferramentas

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Bring Toolbox to foreground (if the Toolbox is in a separate window and not in foreground)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Close Toolbox (if the Toolbox is in a separate window and in foreground)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Open Web Console 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Toggle "Pick an element from the page" (opens the Toolbox and/or focus the Inspector tab)Ctrl + Shift + CCmd + Opt + CCtrl + Shift + C
Open Style EditorShift + F7Shift + F7 *Shift + F7
Open ProfilerShift + F5Shift + F5 *Shift + F5
Open Network Monitor 2Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Toggle Responsive Design ModeCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Open Browser ConsoleCtrl + Shift + JCmd + Shift + JCtrl + Shift + J
Open Browser ToolboxCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Open ScratchpadShift + F4Shift + F4 *Shift + F4
Open WebIDEShift + F8Shift + F8 *Shift + F8
Storage InspectorShift + F9Shift + F9 *Shift + F9
Open Debugger 3Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
+ +

1. 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 Ctrl + Shift + I (Cmd + Opt + I num Mac).

+ +

2. Antes do Firefox 55, o atalho de teclado era Ctrl + Shift + Q (Cmd + Opt + Q num Mac).

+ +

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.

+ +

4. A ferramenta está desativada por predefinição, assim o atalho não funcionará até que este seja ativado no 'Painel das Definições'.

+ +

Caixa de Ferramentas

+ +
+

Estes atalhos funcionam sempre que a caixa de ferramentas estiver aberta, independentemente da ferramenta ativa.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Cycle through tools left to rightCtrl + ]Cmd + ]Ctrl + ]
Cycle through tools right to leftCtrl + [Cmd + [Ctrl + [
+

Toggle between active tool and settings

+ 		Ctrl + Shift + OCmd + Shift + OCtrl + Shift + O
Toggle between active tool and settings (new in Firefox 43)F1F1F1
+

Toggle toolbox between the last 2 docking modes (new in Firefox 41)

+ 		Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
Toggle split console (except if console is the currently selected tool)EscEscEsc
+
+ +
+

Estes atalhos funcionam em todas as ferramentas que estão hospedadas na caixa de ferramentas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Increase font sizeCtrl + + Cmd + + Ctrl + +
Decrease font sizeCtrl + -Cmd + -Ctrl + -
Reset font sizeCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Editor fonte

+ +
+

Esta tabela lista os atalhos predefinidos para o editor fonte.

+ +

Nas secção das 'Preferências do Editor' das configurações das ferramentas de desenvolvimento, pode escolher para utilizar Vim, Emacs, ou combinações de teclas de Sublime Text.

+ +

Para as selecionar, visite about:config, selecione a definição devtools.editor.keymap, 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.

+ +

A partir do Firefox 33, a preferência de combinação de teclas está exposta na secção de Preferências do Editor das definições das ferramentas de desenvolvimento, e pode definir isso lá, em vez de about:config.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Ir para a linhaCtrl + JCmd + JCtrl + J
Encontrar um ficheiroCtrl + FCmd + FCtrl + F
Encontrar novamenteCtrl + GCmd + GCtrl + G
Selecionar tudoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
ColarCtrl + VCmd + VCtrl + V
AnularCtrl + ZCmd + ZCtrl + Z
RefazerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IndentarTabTabTab
Remover indentaçãoShift + TabShift + TabShift + Tab
Mover linha(s) para cimaAlt + UpAlt + UpAlt + Up
Mover linha(s) para baixoAlt + DownAlt + DownAlt + Down
Comentar/remover comentário linha(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspetor de Página

+ +
+ + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elemento de InspeçãoCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
+ +

Selecionador de Nodo

+ +

Estes atalhos funcionam enquanto o selecionador de nodo estiver ativo.

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Select the element under the mouse and cancel picker modeClickClickClick
Select the element under the mouse and stay in picker modeShift+ClickShift+ClickShift+Click
+ +

Painel HTML

+ +

Estes atalhos funcionam enquanto estiver no painel Inspetor HTML.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Delete the selected nodeDeleteDeleteDelete
Undo delete of a nodeCtrl + ZCmd + ZCtrl + Z
Redo delete of a nodeCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Move to next node (expanded nodes only)Down arrowDown arrowDown arrow
Move to previous nodeUp arrowUp arrowUp arrow
Expand currently selected nodeRight arrowRight arrowRight arrow
Collapse currently selected nodeRight arrowRight arrowRight arrow
Step forward through the attributes of a nodeTabTabTab
Step backward through the attributes of a nodeShift + TabShift + TabShift + Tab
Start editing the selected attributeEnterReturnEnter
Hide/show the selected nodeHHH
Focus on the search box in the HTML paneCtrl + FCmd + FCtrl + F
Edit as HTMLF2F2F2
Copy the selected node's outer HTML (new in Firefox 42)Ctrl + CCmd + CCtrl + C
Scroll the selected node into view (new in Firefox 44)SSS
Find the next match in the markup, when searching is activeEnterReturnEnter
Find the previous match in the markup, when searching is activeShift + EnterShift + ReturnShift + Enter
+ +

Barra de Breadcrumbs

+ +

Este atalhos funcionam quando a barra de breadcrumbs estiver focada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Move to the previous element in the breadcrumbs bar Left arrowLeft arrowLeft arrow
Move to the next element in the breadcrumbs bar Right arrowRight arrowRight arrow
Focus the HTML paneShift + TabShift + TabShift + Tab
Focus the CSS paneTabTabTab
+ +

Painel CSS

+ +

Estes atalhos funcionam quando estiver no painel de Inspetor CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Focus on the search box in the CSS paneCtrl + FCmd + FCtrl + F
Clear search box content (only when the search box is focused, and content has been entered)EscEscEsc
Step forward through properties and valuesTabTabTab
Step backward through properties and valuesShift + TabShift + TabShift + Tab
Start editing property or value (Rules view only, when a property or value is selected, but not already being edited)Enter or SpaceReturn or SpaceEnter or Space
Cycle up and down through auto-complete suggestions (Rules view only, when a property or value is being edited)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Choose current auto-complete suggestion (Rules view only, when a property or value is being edited)Enter or TabReturn or TabEnter or Tab
Increment selected value by 1Up arrowUp arrowUp arrow
Decrement selected value by 1Down arrowDown arrowDown arrow
Increment selected value by 100Shift + Page UpShift + Page UpShift + Page Up
Decrement selected value by 100Shift + Page DownShift + Page DownShift + Page Down
Increment selected value by 10Shift + Up arrowShift + Up arrowShift + Up arrow
Decrement selected value by 10Shift + Down arrowShift + Down arrowShift + Down arrow
Increment selected value by 0.1Alt + Up arrowOpt + Up arrowAlt + Up arrow
Decrement selected value by 0.1Alt + Down arrowOpt + Down arrowAlt + Down arrow
Show/hide more information about current property (Computed view only, when a property is selected, new in Firefox 49)Enter or SpaceReturn or SpaceEnter or Space
Open MDN reference page about current property (Computed view only, when a property is selected, new in Firefox 49)F1F1F1
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)EnterReturnEnter
+
+ +

Depurador

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Open the DebuggerCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Search for a string in the current fileCtrl + F Cmd + FCtrl + F
Find next in the current fileCtrl + G Cmd + G Ctrl + G 
Search for function definitionsCtrl + DCmd + DCtrl + D
Search for scripts by nameCtrl + P Cmd + PCtrl + P
Resume execution when at a breakpointF8F8 1F8
Step overF10F10 1F10
Step intoF11F11 1F11
Step outShift + F11Shift + F11 1Shift + F11
+ +

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 guide to using these keys as standard function keys. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use Shift + Function + F5).

+ +

Note: Before Firefox 66, the combination Ctrl + Shift + S on Windows and Linux or Cmd + Opt + S on macOS would open/close the Debugger. From Firefox 66 and later, this is no longer the case.

+
+ +

Consola da Web

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Open the Web ConsoleCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Search in the message display paneCtrl + FCmd + FCtrl + F
Clear the object inspector paneEscapeEscapeEscape
Focus on the command lineCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Clear output +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Intérprete da linha de comando

+ +

Estes atalhos aplicam-se quando estiver no intérprete da linha de comando.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Scroll to start of console output (only if the command line is empty)HomeHomeHome
Scroll to end of console output (only if the command line is empty)EndEndEnd
Page up through console outputPage upPage upPage up
Page down through console outputPage downPage downPage down
Go backward through command historyUp arrowUp arrowUp arrow
Go forward through command historyDown arrowDown arrowDown arrow
Move to the beginning of the lineHomeCtrl + ACtrl + A
Move to the end of the lineEndCtrl + ECtrl + E
Execute the current expressionEnterReturnEnter
Add a new line, for entering multiline expressionsShift + EnterShift + ReturnShift + Enter
+ +

Janela de 'Completar Automaticamente'

+ +

Este atalhos aplicam-se enquanto a janela de completar automaticamente estiver aberta:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Choose the current autocomplete suggestionTabTabTab
Cancel the autocomplete popupEscapeEscapeEscape
Move to the previous autocomplete suggestionUp arrowUp arrowUp arrow
Move to the next autocomplete suggestionDown arrowDown arrowDown arrow
Page up through autocomplete suggestionsPage upPage upPage up
Page down through autocomplete suggestionsPage downPage downPage down
Scroll to start of autocomplete suggestionsHomeHomeHome
Scroll to end of autocomplete suggestionsEndEndEnd
+
+ +

Editor de Estilo

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir o Editor de EstiloShift + F7Shift + F7Shift + F7
Abrir janela 'Completar Automaticamente'Ctrl + SpaceCmd + SpaceCtrl + Space
+ +
+

Scratchpad

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Open the ScratchpadShift + F4Shift + F4Shift + F4
Run Scratchpad codeCtrl + RCmd + RCtrl + R
Run Scratchpad code, display the result in the object inspectorCtrl + ICmd + ICtrl + I
Run Scratchpad code, insert the result as a commentCtrl + LCmd + LCtrl + L
Re-evaluate current functionCtrl + ECmd + ECtrl + E
Reload the current page, then run Scratchpad codeCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Save the padCtrl + SCmd + SCtrl + S
Open an existing padCtrl + OCmd + OCtrl + O
Create a new padCtrl + NCmd + NCtrl + N
Close ScratchpadCtrl + WCmd + WCtrl + W
Pretty print the code in ScratchpadCtrl + PCmd + PCtrl + P
Show autocomplete suggestionsCtrl + SpaceCtrl + SpaceCtrl + Space
Show inline documentationCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

Eyedropper

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Selecionar a cor atualEnterReturnEnter
Rejeitar o EyedropperEscapeEscapeEscape
Mover 1 píxelArrow keysArrow keysArrow keys
Mover 10 píxeisShift + arrow keysShift + arrow keysShift + arrow keys
+
+ +
+ + + + + +
+
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 +--- +
{{ToolsSidebar}}

You can use the Developer Tools to take a screenshot of the entire page, or of a single element in the page.

+ +

Efetuar capturas de ecrã de uma página

+ +

Use the screenshot icon: to take a full-page screenshot of the current page.

+ +

By default, the screenshot icon is not enabled. To enable it:

+ + + +

You'll now see the icon in the toolbar:

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Click the icon to take a screenshot of the current page. The screenshot is saved to your browser's "Downloads" directory:

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Efetuar uma captura de ecrã de um elemento

+ +

To take a screenshot of a single element in the page, activate the context menu on that element in the Inspector's HTML pane, and select "Screenshot Node". The screenshot is saved to the browser's "Downloads" directory:

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copiar capturas de ecrã para a área de transferência

+ +

From Firefox 53, you can also copy the screenshot to the clipboard. Just check the box in Settings labeled "Screenshot to clipboard":

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Now, whenever you take a screenshot, the screenshot is also copied to the clipboard.

diff --git "a/files/pt-pt/tools/configura\303\247\303\265es/index.html" "b/files/pt-pt/tools/configura\303\247\303\265es/index.html" new file mode 100644 index 0000000000..ec62fb999b --- /dev/null +++ "b/files/pt-pt/tools/configura\303\247\303\265es/index.html" @@ -0,0 +1,244 @@ +--- +title: Configurações +slug: Tools/Configurações +translation_of: Tools/Settings +--- +
{{ToolsSidebar}}

Abrir as Configurações

+ +

Para ver o painel das 'Configurações das Ferramentas de Desenvolviemtno', abra quaisquer 'Ferramentas de Desenvolvimento', e depois:

+ + + +

The Settings pane looks something like this:

+ +

Depicts the Toolbox options

+ +

Categorias

+ +

Default Firefox Developer Tools

+ +

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+ +

Botões Disponíveis da Caixa de Ferramentas

+ +

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

+ +

Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.

+ +

Temas

+ +

This enables you to choose one of three different themes.

+ +

There's a light theme, which is the default:

+ +

Light theme for DevTools

+ +

A dark theme (the default on Firefox Developer Edition):

+ +

Dark theme for DevTools

+ +

There's also a Firebug theme that looks like the Firebug extension, letting you feel at home if you're used to Firebug:

+ +

Firebug theme for DevTools

+ +

Preferências comuns

+ +

Settings that apply to more than one tool. There's just one of these:

+ +
+
Enable persistent logs
+
A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.
+
+ +

Inspetor

+ +
+
Show browser styles
+
A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's Computed view.
+
Truncate DOM attributes
+
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".
+
Default color unit
+
A setting to control how colors are represented in the inspector: +
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • color name
    • +
  • As authored.
    • +
+
+
Enable layout panel
+
Enable the experimental layout panel. This setting only exists in Firefox Nightly.
+
+ +

Consola da Web

+ +
+
Enable timestamps
+
Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.
+
Enable new console frontend
+
Switch to the experimental new console. This setting only exists in Firefox Nightly.
+
+ +

Depurador

+ +
+
Enable Source Maps
+
Enable source map support in the debugger.
+
Enable new debugger frontend
+
Enable the new debugger. This setting only exists in Firefox Nightly.
+
+ +

Editor de Estilo

+ +
+
Show original sources
+
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. Learn more about Style Editor support for CSS source maps. With this setting checked, the Page Inspector Rules view will also provide links to the original sources.
+
Autocomplete CSS
+
Enable the Style Editor to offer autocomplete suggestions.
+
+ +

Comportamento da Captura de Ecrã

+ +
+
Screenshot to clipboard
+
When you click the icon for the Screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.
+
Play camera shutter sound
+
When you click the icon for the Screenshot tool, play a shutter sound. New in Firefox 53.
+
+ +

Preferências do Editor

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +
+
Detect indentation
+
Auto-indent new lines based on the current indentation.
+
Autoclose brackets
+
 
+
Indent using spaces
+
 
+
Tab size
+
 
+
Keybindings
+
Choose the default CodeMirror keybindings, or keybindings from one of several popular editors: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Configurações avançadas

+ +
+
Show Gecko platform data
+
A setting to control whether or not profiles should include Gecko platform symbols.
+
+ +
+
Disable HTTP Cache
+
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. +
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 Service Workers/the Cache API.
+
+
Disable JavaScript
+
Reload the current tab with JavaScript disabled.
+
Enable Service Workers over HTTP
+
Enable Service Worker registrations from insecure websites.
+
Enable browser chrome and add-on debugging toolboxes
+
Enable you to use developer tools in the context of the browser itself, and not only web content.
+
Enable remote debugging
+
Enable the developer tools to debug remote Firefox instances.
+
Enable worker debugging
+
Enable a panel within the debugger to debug workers. +

Nota: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.

+
+
+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}
+ +

Para abrir a 'Consola da Web':

+ + + +

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

+ +

+ +

A interface da 'Consola da Web' é dividida em três secções horizontais:

+ + 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 +--- +
{{ToolsSidebar}}
+ +

Os comandos

+ +

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

+ +
+
$(selector, element)
+
+

Looks up a CSS selector string selector , returning the first node descended from element that matches. If unspecified, element defaults to document. Equivalent to {{ domxref("document.querySelector()") }} or calls the $ function in the page, if it exists.

+ +

See the QuerySelector code snippet.

+
+
$$(selector, element)
+
Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is like for {{ domxref("document.querySelectorAll()") }}, but returns an array instead of a {{ domxref("NodeList") }}.
+
$0
+
The currently-inspected element in the page.
+
$_
+
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.
+
$x(xpath, element, resultType)
+
Evaluates the XPath xpath expression in the context of element and returns an array of matching nodes. If unspecified, element defaults to document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, ANY_TYPE is used.
+
keys()
+
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
+
values()
+
Given an object, returns a list of the values on that object; serves as a companion to keys().
+
clear()
+
Clears the console output area.
+
inspect()
+
Given an object, opens the object inspector for that object.
+
pprint()
+
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
+
help(){{Deprecated_Inline(62)}}
+ :help{{Gecko_MinVersion_Inline(62)}}
+
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
+
cd()
+
+

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:

+ +
    +
  • a selector string that will be passed to document.querySelector to locate the iframe element
    • +
  • the iframe element itself
    • +
  • the content window inside the iframe
    • +
+ +

See working with iframes.

+
+
copy()
+
New in Firefox 38. 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 outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
+
clearHistory()
+
New in Firefox 39. Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
+
:screenshot
+
New in Firefox 62. Create a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named:
+
+ Screen Shot yyy-mm-dd at hh.mm.ss.png
+
+ The command has the following optional parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoTipoDescrição
--clipboardbooleanWhen present, this parameter will cause the screenshot to be copied to the clipboard.
--delaynumberThe number of seconds to delay before taking the screenshot.
--dprnumberThe device pixel ratio to use when taking the screenshot.
--filebooleanWhen present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included.
--filenamestringThe name to use in saving the file. The file should have a ".png" extension.
--fullpagebooleanIf 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, "-fullpage" will be appended to the file name.
--selectorstringThe CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.
+
+
+ +

Please refer to the Console API for more information about logging from content.

+ +

Variáveis

+ +
+
tempN
+
The "Use in Console" option in the Inspector generates a variable for a node named temp0, temp1, temp2, etc. referencing the node.
+
+ +

Exemplos

+ +

Looking at the contents of a DOM node

+ +

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.

+ +

Let's take a look at the contents of that node by using the $() and inspect() functions:

+ +
inspect($("#title"))
+ +

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".

+ +

Dumping the contents of a DOM node

+ +

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 pprint() function:

+ +
pprint($("#title"))
+ +

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.

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 +--- +
{{ToolsSidebar}}
+ +

{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Atalhos globais

+ +
+

{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+
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 +--- +
{{ToolsSidebar}}
+ +

Pode utilizar a consola com outras ferramentas. Enquanto estiver noutra ferramenta na «Caixa de Ferramentas», basta pressionar Esc ou clicar no botão "Mostrar dividir consola" na Barra de Ferramentas. A caixa de ferramentas irá aparecer agora dividida, com a ferramenta original por cima e a consola da Web por baixo.

+ +

Pode fechar o "dividir consola" pressionando novamente Esc , ou selecioando o comando do menu "Ocultar dividir consola".

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Como normalmente, $0 funciona como taquigrafia para o elemento atualmente selecionado no Inspetor:

+ +

Quando utilizar "dividir consola" com o depurador, o escopo da consola é a execução atual de stack frame. 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:

+ +

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 +--- +
{{ToolsSidebar}}
+ +

A Consola da Web:

+ +
    +
  1. 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
    2. +
  2. Permite-lhe interagir com a página da Web, ao executar as expressões de JavaScript no contexto da página
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Abrir a Consola da Web
+
Como utilizar a Consola da Web.
+
Intérprete da linha de comando
+
Como interagir com um documento, utilizando a Consola.
+
Dividir consola
+
Utilize a Consola com outras ferramentas.
+
+
+ +
+
+
Mensagens da consola
+
Detalhes das mensagens dos registos da Consola.
+
Informação Detalhada (Rich Output)
+
Ver e interagir com objetos registados pela Consola.
+
Atalhos do teclado
+
Referência de atalho.
+
+
+
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 +--- +
{{ToolsSidebar}}

A maior parte da 'Consola da Web' é ocupada pelo painel de exibição de mensagens:

+ +

+ +

Cada mensgaem é exibida como uma linha separada:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HoraThe time the message was recorded. This is not shown by default: you can opt to see timestamps using a setting in the Toolbox.
Categoria +

Category: this indicates what sort of message this is:

+ +
    +
  • Black: Network request
    • +
  • Blue: CSS warning/error/log
    • +
  • Orange: JavaScript warning/error
    • +
  • Red: Security warning/error
    • +
  • Green: Server logs
    • +
  • Light Gray: Console API messages
    • +
  • Dark Gray: input/output from the interactive command line interpreter
    • +
+
TipoFor 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).
MensagemThe message itself.
Número de ocorrênciasIf 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.
Nome de ficheiro e número da linha +

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.

+ +

From Firefox 36, this includes the column number as well.

+
+ +

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 Settings.

+ +

Categorias da mensagem

+ +

Rede

+ +
+

Network log messages are not shown by default. Use the filtering feature to show them.

+
+ +

Network requests are logged with a line that looks like this:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
HoraThe time the message was recorded.
CategoriaIndicates that the message is an HTTP request.
Método +

The specific HTTP request method.

+ +

If the request was made as an XMLHttpRequest, there's an additional note indicating this:

+ +

+
URIThe target URI.
ResumoThe HTTP version, status code, and time taken to complete.
+ +

Visualização dos detalhes do pedido de rede

+ +

If you click on the message, you'll be redirected to the Network panel 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.

+ +

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:

+ + + +

{{EmbedYouTube("cFlcWzJ9j4I")}}

+ +

JS

+ +

JavaScript messages look like this:

+ +

+ +

Hiperligação "Sbaer mais"

+ +
Novo no Firefox 49
+ +

JavaScript errors contain a "Learn more" link that takes you to the JavaScript error reference containing additional advice for fixing issues:

+ +

{{EmbedYouTube("OabJc2QR6o0")}}

+ +

Source maps

+ +
New in Firefox 50 (but disabled by default)
+ +

From Firefox 50, the Web Console understands source maps. 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.

+ +

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 true.

+ +

Be aware that support is still experimental. It may have bugs and may slow down console output. Bug 1289570 tracks any work that needs to be done before source map support can be enabled by default.

+ +

CSS

+ +
+

CSS warnings and reflow messages are not shown by default. Use the filtering feature to show them.

+
+ +

CSS messages look like this:

+ +

+ +

Reflow events

+ +

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 :hover, or manipulating the DOM in JavaScript.

+ +

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 synchronous reflows triggered from JavaScript, which code triggered them.

+ +

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 toolbar and selecting "Reflows".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

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.

+ +

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 window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

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.

+ +

Security

+ +

Security warnings and errors look like this:

+ +

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.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe 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 Mixed Content for more details.
Blocked loading mixed display contentThe 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 Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe 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 Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe 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 Mixed Content for more details.
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.See Content Security Policy for more details.
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.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
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.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

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.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

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 Weak Signature Algorithm article for more details.

+ +

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.

+
+ +

Bug 863874 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.

+ +

Logging

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console API messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Servidor

+ +
+

Novo no Firefox 43

+
+ +
+

Server-side log messages are not shown by default. Use the filtering feature to show them.

+
+ +

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.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Linha de comando - entrada/saída

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

Filtrar por categoria

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

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:

+ + + +

Filtrar por texto

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Limpar o registo de eventos

+ +

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.

+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}
+ +

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.

+ +

Modo de linha única

+ +

For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the >> prompt.

+ +

The Web Console, showing single-line mode

+ +

To enter expressions in single-line mode, type at the prompt and press Enter. To enter multi-line expressions, press Shift+Enter after typing each line, then Enter to run all the entered lines.

+ +

The expression you type is echoed under the input prompt, followed by the result.

+ +

If your input does not appear to be complete when you press Enter, then the Console treats this as Shift+Enter , enabling you to finish your input.

+ +

For example, if you type:

+ +
function foo() {
+ +

and then Enter, the Console does not immediately execute the input, but behaves as if you had pressed Shift+Enter , so you can finish entering the function definition.

+ +

Modo de múltiplas linhas

+ +

For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press  Ctrl+B (Windows/Linux) or Cmd+B (macOS). The multi-line editing pane opens on the left side the of Web Console.

+ +

Web Console in multi-line mode

+ +

You can enter multiple lines of JavaScript by default in this mode, pressing Enter after each one. To execute the snippet that is currently in the editing pane, click the Run button or press Ctrl+Enter (or Cmd+Return 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.

+ +

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.

+ +

You can open files when in multi-line mode, and save the current contents of the editing pane to a file.

+ + + +

To switch back to single-line mode, click the X icon at the top of the multi-line editing pane, or press  Ctrl+B (Windows/Linux) or Cmd+B (MacOS).

+ +

Aceder às variáveis

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript libraries like jQuery:

+ +

+ +

Auto completar

+ +

The editor has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

+ +

Press  Enter, Tab, 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.

+ +

Console autocomplete suggestions are case-insensitive.

+ +

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.

+ +

You get autocomplete suggestions for array elements, as well:

+ +

+ +

You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem Enable Autocompletion 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.

+ +

Avaliação instantânea

+ +
+

This feature is available in Firefox Nightly, in versions labeled 74 and later.

+
+ +

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.

+ +

You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem Instant Evaluation 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.

+ +

Contexto de execução

+ +

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 Run, you can switch to single-line mode and still use your function.

+ +

Sintaxe realçada

+ +

Console output showing syntax highlighting

+ +

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".

+ +

The output is highlighted as well where appropriate.

+ +
+

Nota: Syntax highlighting is not visible in your browser if Accessibility features have been enabled.

+
+ +

Histórico de execução

+ +

The interpreter remembers expressions you've typed. To move back and forward through your history:

+ + + +

The expression history is persisted across sessions. To clear the history, use the clearHistory() helper function.

+ +

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 F9. On Mac press Ctrl+R (note: not Cmd+R!) to initiate the reverse search.

+ +

+ +

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 F9 on Windows and Linux ( Ctrl+R on Mac) cycles backwards through the matches.

+ +

+ +

Once you  have initiated the reverse search, you can use Shift + F9 on Windows or Linux ( Ctrl+S on Mac) to search forward in the list of matches. You can also use the  ⋀ and ⋁ icons in the expression search bar.

+ +

When you find the expression you want, press Enter (Return) to execute the statement.

+ +

Trabalhar com iframes

+ +

If a page contains embedded iframes, you can use the cd() 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 cd():

+ +

You can pass the iframe DOM element:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

You can pass a CSS selector that matches the iframe:

+ +
cd("#frame1");
+ +

You can pass the iframe's global window object:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

To switch the context back to the top-level window, call cd() with no arguments:

+ +
cd();
+ +

For example, suppose we have a document that embeds an iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

The iframe defines a new function:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

You can switch context to the iframe like this:

+ +
cd("#frame1");
+ +

Now you'll see that the global window's document is the iframe:

+ +

And you can call the function defined in the iframe:

+ +

+ +

Comando da Ajuda

+ +

{{ page("docs/Tools/Consola_da_Web/Ajuda", "Os comandos") }}

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 +--- +
{{ToolsSidebar}}
+ +

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:

+ + + +

Type-specific rich output

+ +

The Web Console provides rich output for many object types, including the following:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

New in Firefox 36

+
+ +

+
RegExp
Window
Document
Element
Event
+ +

Examining object properties

+ +

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:

+ +

To dismiss this panel press Esc..

+ +

Highlighting and inspecting DOM nodes

+ +

If you hover the mouse over any DOM element in the console output, it's highlighted in the page:

+ +

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 Inspector with that node selected.

diff --git "a/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" "b/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" new file mode 100644 index 0000000000..bd111e5058 --- /dev/null +++ "b/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" @@ -0,0 +1,59 @@ +--- +title: Configurações +slug: Tools/Debugger/Configurações +translation_of: Archive/Tools/Debugger_settings +--- +
{{ToolsSidebar}}

O Depurador tem o seu próprio menu de configurações, que pode aceder a partir de um ícone na barra de ferramentas:

+ +

+ +

Cada definição é um comutador simples de lig./desl.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto Prettify Minified SourcesWith this option enabled, the debugger will automatically detect minified JS files and pretty-print them.
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught Exceptions +

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.

+ +

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.

+
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesDo not display non-enumerable JavaScript properties.
Show Variables Filter BoxEnabling this option adds a "Filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
Show Original SourcesEnabling this option will make the debugger use source maps, 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.
Automatically Black Box Minified Sources +
+

New in Firefox 33.

+
+ +

Automatically black box sources whose URL ends with ".min.js". Defaults to true.

+
+ +

 

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 +--- +
{{ToolsSidebar}}

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:

+ + + +

+ +

Painel da lista fonte

+ +

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.

+ +

+ +

You can search for a file using Ctrl + P (Cmd + P on a Mac).

+ +

Painel fonte

+ +

This shows the JavaScript file currently loaded.

+ +

When the source pane is focused you can search for a string in the file using Ctrl + F (Cmd + F on a Mac).

+ +

Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints 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:

+ + + +

+ +

Barra de Ferramentas

+ +

No topo do painel à direita, existe uma barra de ferramentas:

+ +

+ +

A barra de ferramentas consiste em:

+ + + +

+ +

Lista de ponstos de quebra

+ +

Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to enable/disable it:

+ +

+ +

 

+ +

 

+ +

Call stack

+ +

 

+ +

 

+ +

When the debugger's paused, you'll see a call stack:

+ +

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.

+ +

Scopes

+ +

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:

+ +

Objects are organized by scope: the most local appears first, and the global scope (Window, in the case of page scripts) appears last.

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 +--- +
{{ToolsSidebar}}
+ +

Existem três maneiras para abrir o depurador:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

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 +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

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 +--- +
{{ToolsSidebar}}
+ +

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:

+ + + +

Nessas situações, é muito mais fácil debugar o fonte original do que o fonte no estado transformado que o navegador obteve. Um source map é um arquivo que mapea da fonte transformada para a original, permitindo ao navegador reconstruir a fonte original e disponibilizá-la no debugger.

+ +

Para que o navegador trabalhe com um source map, você deve:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

No vídeo acima carregamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. 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:

+ +
//# sourceMappingURL=main.js.map
+ +

No source list pane do Debugger, o fonte original CoffeeScript agora aparece como "main.coffee", e podemos acessá-lo para debugar como qualquer outra fonte.

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 +--- +
{{ToolsSidebar}}
+ +
O «Depurador» de JavaScript permite-lhe explorar o código de JavaScript e examinar ou modifcar o seu estado para ajudar a rastrear erros (bugs).
+ +
+ +
+

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

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 depuração remota para saber como ligar o depurador a um destino remoto.

+ +

To find your way around the debugger, here's a quick tour of the UI.

+
+ +

Como...

+ +

Para saber o que pode fazer com o depurador, consulte os guias seguintes:

+ +
+ +
+ +
+

Referência

+ +
+ +
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 +--- +
{{ToolsSidebar}}
+ +

Source maps 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 source maps. Esta página explica os problemas mais comuns e como os corrigir.

+ +
+

Nota: se é novo para source maps, pode saber mais sobre os mesmo em How to use a source map.

+
+ +

Reportar "Source map error" geral

+ +

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:

+ +

Error from invalid JSON

+ +

Here, the resource URL tells us that bundle.js 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.

+ +

There are a few common ways that source maps can go wrong; they are detailed in the following sections.

+ +

"Source map" está em falta ou inacessível

+ +

O recurso source map pode estar em falta ou inacessível.

+ +

Source map file is missing

+ +

The fix here is to make sure the file is being served and is accessible to the browser

+ +

"Source map" inválido

+ +

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:

+ + + +

Error: "version" is a required argument

+ +

"Source" original está em falta

+ +

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:

+ +

Debugger source tab showing the error

+ +

In this case, the error will also be displayed in the source tab in the debugger:

+ +

Debugger source tab showing the error

+ +

"NetworkError" quando tenta obter o recurso

+ +

A bug in Firefox prevents it from loading source maps for web extensions.

+ +

See Bug 1437937: WebExtensions Doesn't Find Source Maps for details.

+ +
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
+ +

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.

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 +--- +
{{ToolsSidebar}}
+

A 'Árvore de Chamada' (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.

+ +

Estes estrangulamentos são locais onde quaisquer otimizações que pode fazer irão ter um grande impacto.

+
+ +

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.

+ +
+

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 here. You can find the specific profile we discuss here - just import it to the performance tool to follow along.

+ +

There's a short page describing the structure of this program here.

+ +

Note that we use the same program - the same profile, in fact - in the documentation page for the Flame Chart.

+
+ +

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.

+ +

We've zoomed into the part of the recording that shows a long JavaScript marker:

+ +

+ +

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.

+ +

Samples is the number of samples that were taken when we were executing this particular function.

+ +

Self Cost is that number as a percentage of the total number of samples in the selected portion of the recording.

+ +

Self Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording.

+ +

In the current version of the Call Tree, these are the most important columns. Functions with a relatively high Self Cost are good candidates for optimization, either because they take a long time to run, or because they are called very often.

+ +

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.

+ +

Mover-se na árvore de chamada

+ +

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 bubbleSort():

+ +

+ +

So we can see the call graph is like this:

+ +
sortAll()
+
+    -> sort()
+
+        -> bubbleSort()
+ +

Note also that Self Cost for sort() here is 1.45%, and note that this is the same as for the separate entry for sort() later in the list. This is telling us that some samples were taken in sort() itself, rather than in the functions it calls.

+ +

Sometimes there's more than one path back from an entry to the top level. Let's expand the entry for swap():

+ +

+ +

There were 253 samples taken inside swap(). But swap() was reached by two different paths: both bubbleSort() and selectionSort() use it. We can also see that 252 of the 253 samples in swap() were taken in the bubbleSort() branch, and only one in the selectionSort() branch.

+ +

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.

+ +

With this kind of digging, we can figure out the whole call graph, with associated sample count:

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

Dados da plataforma

+ +

You'll also see some rows labeled Gecko, Input & Events, and so on. These represent internal browser calls.

+ +

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.

+ +

In our example, there are 679 samples assigned to Gecko - the second-largest group after bubbleSort(). Let's expand that:

+ +

+ +

This result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our sort() call. If we look at the code for sort(), it should be fairly obvious that the high platform data cost is coming from repeated calls to console.log():

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

It would certainly be worthwhile considering more efficient ways of implementing this.

+ +

One thing to be aware of here is that idle time is classified as Gecko, so parts of your profile where your JavaScript isn't running will contribute Gecko samples. These aren't relevant to the performance of your site.

+ +
+

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 Settings.

+
+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}
+

A 'Cascata' (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.

+ +

Assim, se vir um sinal de um problema de desempenho - uma quebra na frame rate, por exemplo - pode ir para a 'Cascata' para ver o que o navegador estava a fazer nesse ponto da gravação.

+
+ +

+ +

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.

+ +

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 marker type.

+ +

Marcadores

+ +

The markers for operations are color-coded and labeled. The following operations are recorded:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome e descriçãoCorInformação detalhada
+

DOM Event

+ +

JavaScript code that's executed in response to a DOM event.

+ 		+
+
Event Type
+
For example, "click" or "message".
+
+ +
+
Event Phase
+
For example, "Target" or "Capture".
+
+
+

JavaScript functions executed in the page are labeled with the reason the function was called:

+ +

Script Tag
+ setInterval
+ setTimeout
+ requestAnimationFrame
+ Promise Callback
+ Promise Init
+ Worker
+ JavaScript URI
+ Event Handler

+ 		+
+
Stack
+
Call stack, with links to functions.
+
+
+

Analisar HTML

+ +

Time spent parsing the page's HTML.

+ 		+
+
Stack
+
Call stack, with links to functions.
+
+
+

Analisar XML

+ +

Time spent parsing the page's XML.

+ 		+
+
Stack
+
Call stack, with links to functions.
+
+
+

Recalcular Estilo

+ +

Calculating the computed styles that apply to page elements.

+ 		+
+
Restyle Hint
+
A string indicating what kind of restyling is needed. The hint may be any of:
+ Self
+ Subtree
+ LaterSiblings
+ CSSTransitions
+ CSSAnimations
+ SVGAttrAnimations
+ StyleAttribute
+ StyleAttribute_Animations
+ Force
+ ForceDescendants
+
+
+

Disposição (Layout)

+ +

Calculating the position and size of page elements. This operation is sometimes called "reflow".

+ 		 
+

Pintura

+ +

Desenhar píxeis para o ecrã.

+ 		 
+

Coleção de Lixo

+ +

Garbage collection event. Non-incremental GC events are labeled "(Non-incremental)".

+ 		+
+
Motivo
+
A string the indicating the reason GC was performed.
+
Motivo Não Incremental
+
If the GC event was non-incremental, the string indicates the reason non-incremental GC was performed.
+
+ +
+

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.

+ +

See Allocations and Garbage Collection for more details.

+
+
+

Ciclo da Coleção

+ +

Reclaiming C++ reference-counted data structures.

+ +

Like garbage collection, but for C++ objects. See Kyle Huey's blog post about cycle collection.

+ 		+
+
Tipo
+
Always "Collect".
+
+
+

CC - Reduçãod e Gráfico

+ +

Preparation/pre-optimization for Cycle Collection.

+ 		+
+
Tipo
+
Always "ForgetSkippable".
+
+
+

Consola

+ +

The period between matching calls to console.time() and console.timeEnd().

+ 		+
+
Nome do temporizador
+
The argument passed to the console functions.
+
Stack at start
+
Call stack console.time(), with links to functions.
+
Stack at End
+
(New in Firefox 41). Call stack at console.timeEnd(). If this is inside a callback from a Promise, this will also show the "Async stack".
+
+
+

Data/Hora

+ +

A single call to console.timeStamp().

+ 		+
+
Etiqueta
+
The argument passed to timeStamp().
+
+
+

DOM - Conteúdo Carregado

+ +

The document's DOMContentLoaded event.

+ 		 
+

Carregamento

+ +

The document's load event.

+ 		 
+

Worker event in main thread

+ +

Shown when the main thread sends a message to a worker, or receives a message from a worker.

+ 		+

One of:

+ +
+
Serialize data on the main thread
+
The main thread is serializing a message to be sent to the worker.
+
Deserialize data on the main thread
+
The main thread is deserializing a message received from the worker.
+
+
+

Worker event in worker thread

+ +

Shown when a worker receives a message from the main thread, or sends a message to the main thread.

+ 		+

One of:

+ +
+
Serialize data in Worker
+
The worker is serializing a message to be sent to the main thread.
+
Deserialize data in Worker
+
The worker is deserializing a message received from the main thread.
+
+
+ +

The markers, and their colors, are the same in the Waterfall tool as in the Waterfall overview, making is easy to correlate from one to the other.

+ +

Filtrar marcadores

+ +

You can control which markers are displayed using a button in the Toolbar:

+ +

+ +

Padrões de cascata

+ +

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.

+ +

Renderizar cascata

+ +

One pattern that you'll often see in the Waterfall view is something like this:

+ +

+ +

This is a visualization of the basic algorithm the browser uses to update the page in response to some event:

+ +
    +
  1. JavaScript Function Call: 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.
    2. +
  2. Recalculate Style: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.
    3. +
  3. Layout: 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".
    4. +
  4. Paint: 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".
    5. +
+ +

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.

+ +

Importantly for responsiveness, the browser doesn't always have to go through every step:

+ + + +

The Animating CSS properties article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.

+ +

Bloquear JavaScript

+ +

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.

+ +

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:

+ +

+ +

The Intensive JavaScript 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.

+ +

Pinturas dispendiosas

+ +

Some paint effects, such as box-shadow, 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.

+ +

Coleção de lixo

+ +

Red markers in the Waterfall represent garbage collection (GC) events, in which SpiderMonkey (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.

+ +

To help reduce the length of pauses, SpiderMonkey implements incremental GC: 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.

+ + + +

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:

+ + + +

When the Waterfall records a GC marker it indicates:

+ + + +

Adicionar marcadores com a API da consola

+ +

Two markers are directly controlled by console API calls: "Console" and "Timestamp".

+ +

Marcadores da consola

+ +

These enable you to mark a specific section of the recording.

+ +

To make a console marker, call console.time() at the start of the section, and console.timeEnd() at the end. These functions take an argument which is used to name the section.

+ +

For example, suppose we have code like this:

+ +
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;
+}
+ +

The Waterfall's output will look something like this:

+ +

+ +

The marker is labeled with the argument you passed to console.time(), and when you select the marker, you can see the program stack in the right-hand sidebar.

+ +

Async stack

+ +

New in Firefox 41.

+ +

Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point console.timeEnd() was called. If console.timeEnd() was called from the resolution of a Promise, 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.

+ +

For example, consider code like this:

+ +
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);
+  });
+}
+ +

The Waterfall will display a marker for the period between time() and timeEnd(), and if you select it, you'll see the async stack in the sidebar:

+ +

+ +

Marcadores de data/hora

+ +

Timestamps enable you to mark an instant in the recording.

+ +

To make a timestamp marker, call console.timeStamp(). You can pass an argument to label the timestamp.

+ +

For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:

+ +
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;
+}
+ +

In the Waterfall you'll now see something like this:

+ +

+ +

 

+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}
+ +

Abrir as ferramentas de «Desempenho»

+ +

Para abrir as ferramentas de Desempenho:

+ + + +

Gravar um perfil

+ +

To start a new recording, press the stopwatch icon in the Recordings pane. To stop, press it again:

+ +

+ +

You can also start and stop recording from the Web Console, using console.profile() and console.profileEnd().

+ +

Guardar um perfil

+ +

To save a profile, click the link labeled "Save" in the Recordings pane:

+ +

+ +

Carregar um perfil

+ +

To load a profile, click "Import..." and choose the file:

+ +

+ +

Limpar todos os perfis carregados

+ +

To clear all loaded profiles, click "Clear".

+ +
+

If you do this, you'll lose any loaded profiles that you have not saved.

+
+ +

+ +

Selecionar uma ferramenta

+ +

To switch between the Waterfall, Call Tree, and Flame Chart tools, use the buttons in the toolbar:

+ +

+ +

Configurar marcadores exibidos

+ +

To control which markers are shown in the Waterfall, use the button in the toolbar:

+ +

+ +

Zoom +

+ +

To zoom into a slice of the recording, select that slice in the recording overview:

+ +

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 +--- +
{{ToolsSidebar}}
+

Frame rate é uma medida da reação de um site da Web. Uma frame rate baixa ou inconsistente pode fazer com que um site pareça irrespondível ou janky, criando uma má experiência de utilizador.

+ +

Uma frame rate 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.

+ +

O gráfico de frame rate na ferramenta 'Desempenho'  mostra-lhe a frame rate 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.

+
+ +

Frame rate e resposta

+ +

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.

+ +

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.

+ +

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).

+ +

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.

+ +

In general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging.

+ +
+

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.

+ +

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.

+
+ +

Gráfico da frame rate

+ +

The frame rate graph is found in the Recording overview 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.

+ +

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.

+ +

Utilização do gráfico de frame rate

+ +

The great value of the frame rate graph is that, like the Web Console, 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:

+ +

+ +

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.

+ +

The frame rate graph is correlated with the waterfall summary 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.

+ +

If we select one of these slices of the recording, the main Waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem:

+ +

+ +

We have a JavaScript function from a click event that's blocking the main thread for 170 milliseconds.

+ +

Which function, though? Switch to the Flame Chart to see the call stack at that point:

+ +

+ +

The offending function is called doPointlessComputations(), and it's defined in "main.js". To fix it, we might consider splitting it into pieces and running the pieces inside requestAnimationFrame, or even running the entire function in a worker. The Intensive JavaScript article shows how you can use strategies like this to fix responsiveness problems caused by long-running synchronous JavaScript.

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 +--- +
{{ToolsSidebar}}
+ +

A ferramenta de Desempenho 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 sinopse das coisas que o navegador esteve a fazer ao renderizar o seu site sob o perfil, e um gráfico da frame rate sob o perfil.

+ +

Tem quatro subferramentas para examinar os aspetos do perfil em mais detalhe:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Iniciação

+ +
+
+
+
Guia da IU
+
+

To find your way around the Performance tool, here's a quick tour of the UI.

+
+
+
+ +
+
+
Como fazer!
+
Basic tasks: open the tool, create, save, load, and configure recordings
+
+
+
+ +
+

Componentes da ferramenta «Desemepenho»

+ +
+
+
+
Frame rate
+
Understand your site's overall responsiveness.
+
Árvore de Chamada
+
Find bottlenecks in your site's JavaScript.
+
Allocations
+
See the allocations made by your code over the course of the recording.
+
+
+ +
+
+
Cascata
+
Understand the work the browser's doing as the user interacts with your site.
+
Flame Chart
+
See which JavaScript functions are executing, and when, over the course of the recording.
+
+
+
+
+ +
+

Cenários

+ +
+
+
+
Animating CSS properties
+
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
+
+
+
+ +
+
+
Intensive JavaScript
+
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.
+
+
+
+ + + +
+
+
+
+
+ + + +
+ + + + + +
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 +--- +
{{ToolsSidebar}}

With the Web Audio API, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:

+ + + +

Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single gain property, while the {{domxref ("OscillatorNode")}} has frequency and detune properties.

+ +

The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.

+ +

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 AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, are displayed, and you can edit these as well.

+ +

This tool is still experimental. If you find bugs, we'd love it if you filed them in Bugzilla. If you have feedback or suggestions for new features, dev-developer-tools or Twitter are great places to register them.

+ +

Abrir o Editor de Áudio da Web

+ +

The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the Developer Tool Settings and check "Web Audio". Now there should be an extra tab in the Toolbox toolbar labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:

+ + + +

Visualizar o gráfico

+ +

The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:

+ +

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.

+ +

Ligações para Parâmetros de Áudio

+ +
+

Displaying connections to AudioParams is new in Firefox 34.

+
+ +

As ligações entre os nodos são exibidas como linhas sólidas. Se, em vez disso, ligou um nodo para uma Parâmetro de Áudio em outro nodo, então a ligação é mostrada como uma linha tracejada entre os nodos, e é etiquetada com o nome de 'AudioParam':

+ +

Inspecionar e modificar Nodos de Áudio

+ +

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 AudioParam properties. For example, here's what the OscillatorNode looks like:

+ +

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.

+ +

If you click on a value in the node inspector you can modify it: press Enter or Tab and the new value takes effect immediately.

+ +

Ignorar nodos

+ +
+

Novo no Firefox 38.

+
+ +

In the pane that shows you the node's details, there's an on/off button:

+ +

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:

+ +

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 +--- +
{{ToolsSidebar}}

O Editor de Estilo permite-lhe:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

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 Toolbox will appear at the bottom of the browser window, with the Style Editor activated:

+ +

+ +

O Editor de Estilo está dividido em três secções principais:

+ + + +

O painel de folha de estilo

+ +

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.

+ +

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.

+ +

O painel do editor

+ +

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.

+ +

The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of keyboard shortcuts.

+ +

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.

+ +

The Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.

+ +

You can switch autocomplete off in the Style Editor settings.

+ +

A barra lateral de multimédia

+ +

The Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any @media rules. 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.

+ +

The media sidebar works especially well with Responsive Design View for creating and debugging responsive layouts:

+ +

{{EmbedYouTube("aVUXmvLSwoM")}}

+ +

From Firefox 46 onwards, if an @media 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:

+ +

{{EmbedYouTube("XeocxoW2NYY")}}

+ +

Criação e importação das folhas de estilo

+ +

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.

+ +

You can load a style sheet from disk and apply it to the page by clicking the Import button.

+ +

Source map support

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Web developers often create CSS files using a preprocessor like Sass, Less, or Stylus. 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.

+ +

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.

+ +

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:

+ +

For this to work, you must:

+ + + +

Visualização das fontes originais

+ +

Now, if you check "Show original sources" in the Style Editor settings, the links next to CSS rules in the Rules view will link to the original sources in the Style Editor.

+ +

From Firefox 35 onwards original sources are displayed by default.

+ +

Edição das fontes originais

+ +

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.

+ +

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 --watch option:

+ +
sass index.scss:index.css --sourcemap --watch
+ +

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.

+ +

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.

+ +

Atalhos de teclado

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

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 +--- +
{{ToolsSidebar}}
+ +

Examinar, editar, e depurar HTML, CSS, e JavaScript no PC e nos dispositivos móveis.

+ +

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.

+ +

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 community links near the bottom of the page). If you have any feedback or questions specifically about the documentation, the MDN discourse is a good place to post.

+ +
+

Nota: If you are a beginner to web development and using developer tools, our learning web development docs will help you — see Getting started with the Web and What are browser developer tools? for good starting points.

+
+ +

As Ferramentas Principais

+ +

The right-hand side of the Developer Tools toolbar, which can be opened with  Ctrl + Shift + I on Windows and Linux, or Cmd + Opt + I on OS X, contains several buttons that let you perform actions or change tool settings.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
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.
Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.)
Toggles Responsive Design Mode.
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.
Closes the Developer Tools
+ +
+
+

Inspetor de Página

+ +

+ +

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.

+
+ +
+

Consola da Web

+ +

+ +

Ver mensagens registadas por uma página da Web e interagir com a página utilizando o JavaScript.

+
+
+ +
+
+
+

Depurador de JavaScript

+ +

+ +

Parar, explorar, examinar e modificar o JavaScript em execução numa página.

+
+ +
+

Monitor de Rede

+ +

+ +

Ver os pedidos de rede efetuados quando uma página é carregada.

+
+
+ +
+
+
+

Ferramentas de Desempenho

+ +

+ +

Analise a reação geral do site, JavaScript, e desempenho da apresentação.

+
+ +
+

Modo de Desenho Responsivo

+ +

+ +

Veja como o seu site da Web ou a aplicação serão apresentados e se comportam nos diferentes dispositivos e tipos de rede.

+
+
+ +
+

Nota: The collective term for the UI inside which the DevTools all live is the Toolbox.

+
+ +

Mais Ferramentas

+ +

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.

+ +
+
+
Memória
+
Figure out which objects are keeping memory in use.
+
Inspetor de Armazenamento 
+
Inspect cookies, local storage, indexedDB, and session storage present in a page.
+
DOM Property Viewer
+
Inspect the page's DOM properties, functions, etc.
+
Barra de Ferramentas do Programador
+
A command-line interface for the developer tools.
+
Eyedropper
+
Select a color from the page.
+
Scratchpad
+
A text editor built into Firefox that lets you write and execute JavaScript.
+
Style Editor
+
View and edit CSS styles for the current page.
+
Shader Editor
+
View and edit the vertex and fragment shaders used by WebGL.
+
Editor de Áudio da Web
+
Examine the graph of audio nodes in an audio context, and modify their parameters.
+
Capturas de ecrã
+
Efetuar uma captura de ecrã de uma página completa ou de um único elemento.
+
Measure a portion of the page
+
Measure a specific area of a web page.
+
Rulers
+
Overlay horizontal and vertical rulers on a web page
+
+
+ +
+
+

+ +

Para as ferramentas e recursos mais recentes para os programadores, experimente o Firefox Developer Edition.

+ +

Transferir Edição de Desenviolvimento

+
+ +
+
+ +

Ligação das Ferramentas de Desenvolvimento

+ +

Se abrir as ferramentas de desenvolvimento utilizando os atalhos de teclado 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.

+ +
+
+
about:debugging
+
Depurar extras, separadores de conteúdo, e workers em execução no navegador.
+
Connecting to Firefox for Android
+
Connect the developer tools to an instance of Firefox running on an Android device.
+
Connecting to iframes
+
Connect the developer tools to a specific iframe in the current page.
+
Connecting to other browsers
+
Connect the developer tools to Chrome on Android and Safari on iOS.
+
+
+ +

Depurar o navegador

+ +

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.

+ +
+
+
Consola do Navegador
+
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
+
Caixa de Ferramentas do Navegador
+
Attach the Developer Tools to the browser itself.
+
+
+ +

Aumentar as ferramentas de desenvolvimento

+ +

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.

+ +
+
+
Adicione um novo painel às ferramentas de desenvolvimento
+
Write an add-on that adds a new panel to the Toolbox.
+
Protocolod e Deputação Remoto
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Editor de Fonte
+
A code editor built into Firefox that can be embedded in your add-on.
+
A Interface do Depurador
+
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.
+
Consola da Web - saída personalizada
+
How to extend and customize the output of the Web Console and the Browser Console.
+
Exemplo de extras das ferramentas de desenvolvimento
+
Utilize estes exemplos para compreender como implementar um add-on das ferramentas de desenvolvimento.
+
+
+ +

Migração do Firebug

+ +

Firebug is coming to the end of its lifespan (see Firebug lives on in Firefox DevTools 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 — Migrating from Firebug.

+ +

Contribuir

+ +

If you want to help to improve the developer tools, these resources will get you started.

+ +
+
+
Participe
+
Mozilla wiki page explaining how to get involved.
+
firefox-dev.tools
+
A tool helping to find bugs to work on.
+
+
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 +--- +
{{ToolsSidebar}}
+

The Storage Inspector is disabled by default. Enable it in the Developer Tools Settings.

+
+ +

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:

+ + + +

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.

+ +

Abrir o Inspetor de Armazenamento

+ +

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.

+ +

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

+ +

+ +

Interface do Utilizador do Inspetor de Armazenamento

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Árvore de armazenamento

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

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.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

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:

+ +

+ +

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.

+ +

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.

+ +

Table Widget

+ +

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.

+ +

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:

+ +

+ +

Procura

+ +

There's a search box at the top of the Table Widget:

+ +

+ +

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.

+ +

From Firefox 50 onwards, you can use Ctrl+F (Cmd+F on a Mac) to focus the search box.

+ +

Barra lateral

+ +

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.

+ +

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:

+ + + +

The shown values can also be filtered using the search box at the top of the sidebar.

+ +

Cache de Armazenamento

+ +

Under the Cache Storage type you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

+ + + +

+ +

Cookies

+ +

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:

+ + + +
+

Note: Before Firefox 51 the columns HostOnly, Secure and HttpOnly were called isDomain, isSecure and isHttpOnly.

+
+ +

You can edit cookies by double-clicking inside cells in the Table Widget and editing the values they contain.

+ +

You can also delete cookies using the context menu:

+ +

+ +

Armazenamento local / Armazenamento da sessão

+ +

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.

+ +

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

+ +

{{EmbedYouTube("oeQzhpoMByw")}}

+ +

You can also delete local storage and session storage entries using the context menu:

+ +

+ +

BD Indexada

+ +

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:

+ + + +

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:

+ + + +

+ +

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.

+ +

From Firefox 49 onwards, you can delete an IndexedDB database using the context menu in the Storage tree view:

+ +

+ +

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:

+ +

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:

+ +

+ +

 

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 +--- +
{{ToolsSidebar}}

The Memory tool lets you take a snapshot of the current tab's memory heap. 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.

+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

O básico

+ +
+ +
+ +
+

Analisar capturas de ecrã

+ +
+

The Tree map view is new in Firefox 48, and the Dominators view is new in FIrefox 46.

+
+ +

Once you've taken a snapshot, there are three main views the Memory tool provides:

+ + + +

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.

+ +
+

Conceitos

+ +
+ +
+ +
+

Páginas de exemplo

+ +

Examples used in the Memory tool documentation.

+ +
+ +
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 +--- +
{{ToolsSidebar}}
+ +

Desenho adaptável 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.

+ +

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.

+ +

Alternar Modo de Desenho Adaptável

+ +

There are three ways to toggle Responsive Design Mode:

+ + + +

Utilizar Modo de Desenho Adaptável

+ +

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.

+ +

+ +

You can show or hide the Developer Tools toolbox independently of toggling Responsive Design Mode itself:

+ +

While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.

+ +

Seleção de dispositivo

+ +

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:

+ + + +

Additionally, Firefox will set the User-Agent 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 navigator.userAgent property will be set to the same value.

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

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 https://github.com/mozilla/simulated-devices.

+ +

Guardar dispositivos personalizados

+ +

Starting in Firefox 54, you can save custom devices in Responsive Design Mode. Each device can have its own:

+ + + +

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.

+ +

+ +

Controlos de dispositivo

+ +

You can also supply custom values for most device properties.

+ +

Definir tamanho do ecrã

+ +

To set screen size, click on the values under the viewport, and edit them:

+ +

+ +

You can also grab the bottom-left corner of the viewport and drag the viewport to the size you want.

+ +

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.

+ +

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.

+ +

Definir proporção do píxel do dispositivo

+ +

To set a custom device pixel ratio, click the list box labeled "DPR" and select the value you want:

+ +

+ +

Alternar simulação do evento de toque

+ +

To enable/disable touch event simulation, click the icon of a hand with a pointy finger:

+ +

While touch event simulation is enabled, mouse events are translated into touch events.

+ +

Controlar o comportamento de recarregar a página

+ +

New in Firefox 60 is the Reload when... drop-down menu:

+ +

+ +

Clicking it reveals two options, both of which are disabled by default:

+ + + +

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.

+ +

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.

+ +

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:

+ +

+ +

Alternar orientação

+ +

To switch the screen orientation between portrait and landscape, click the icon next to the device selector:

+ +

+ +

Acelerar a rede

+ +

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.

+ +

The characteristics emulated are:

+ + + +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectionDownload speedUpload speedMinimum latency (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

To select a network, click the list box that's initially labeled "No throttling":

+ +

+ +

Capturar Ecrã

+ +

To take a screenshot of the viewport, click the camera icon:

+ +

+ +

Screenshots are saved to Firefox's default download location.

+ +

Starting in Firefox 53, if you checked "Screenshot to clipboard" in the Developer Tools Settings page, then the screenshot will also be copied to the system clipboard.

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 +--- +
{{ToolsSidebar}}
+ +

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 XMLHttpRequests), quanto tempo demora cada pedido, e detalhes de cada pedido.

+ +

Abrir o Monitor de Rede

+ +

Existem algumas maneiras diferentes de abrir o 'Monitor de Rede':

+ +
+

Por favor, note que o atalho de teclado foi alterado na versão 55 do Firefox

+
+ + + +

The Network Monitor will appear at the bottom of the browser window. Reload the page to see the requests:

+ +

+ +

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.

+ +

IU - Sinopse

+ +

A IU é dividida em 4 partes principais:

+ + + +

+ + + +

+ +

Barra de Ferramentas

+ +

From Firefox 47 onwards, the toolbar is at the top of the main window. In earlier versions of Firefox, it's at the bottom.

+ +

It provides:

+ + + +
+

Note: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).

+
+ +

Lista de pedidos de rede

+ +

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:

+ +

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 Settings.

+ +

Colunas de pedido de rede

+ +

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:

+ + + +

The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.

+ +

Miniaturas de imagem

+ +

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:

+ +

+ +

Ícones de segurança

+ +

The Network Monitor displays an icon in the Domain column:

+ +

+ +

This gives you extra information about the security status of the request:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÍconeSignificado
HTTPS
Weak HTTPS (for example, a weak cipher was used)
Failed HTTPS (for example, a certificate was invalid)
HTTP
Localhost
+ +

For weak and failed HTTPS requests, you'll see more details of the problem in the Security tab.

+ +

Cause column

+ +

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:

+ + + +
+

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 Stack Trace tab of the {{anch("Network request details")}} panel instead.

+ +

+ +

You can then click on any of the entries in the popup to open up the relevant script in the Debugger pane.

+
+ +

Barra Cronológica

+ +

The request list also displays a timeline for the different parts of each request.

+ +

+ +

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 Timings page.

+ +

Starting in Firefox 45, the timeline also contains two vertical lines:

+ + + +

Pedidos de filtragem

+ +

You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.

+ +

Filtering by content type

+ +

To filter by content type, use the buttons in the toolbar.

+ +

Filtering XHR

+ +

To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the toolbar.

+ +

Filtering WebSockets

+ +
+

Novo na versão 48 do Firefox

+
+ +

To see only WebSocket connections, use the "WS" button in the toolbar.

+ +

To monitor the data exchanged in WebSocket connections, try the WebSocket Monitor add-on.

+ +

Filtering by URL

+ +

To filter by URL, use the search box in the toolbar. Click in the search box, or press Ctrl + F (or Cmd + F 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.

+ +

From Firefox 45,  you can filter requests that don't 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.

+ +

Filtering by properties

+ +
+

Novo na versão 55 do in Firefox

+
+ +

To filter by specific request properties, use the search box in the toolbar. 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 (-) negates the filter. You can combine different filters together by seperating them with a space.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Palavra-chaveSignificadoExemplos
status-codeShows resources that have the specific HTTP status code.status-code:304
methodShows resources that have were requested via the specific HTTP request method.method:post
domainShows resources coming from a specifc domain.domain:mozilla.org
remote-ipShows resources coming from a server with the specified IP.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeShows resources matching a specific cause type. The types can be found in the description of the cause column.cause:js
+ cause:stylesheet
+ cause:img
transferredShows resources having a specific transferred size or a transferred size close to the one specified.  k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.transferred:1k
sizeShows resources having a specific size (after decompression) or a size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.size:2m
larger-thanShows resources that are larger than the specified size in bytes. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.larger-than:2000
+ -larger-than:4k
mime-typeShows resources that match the specified MIME type.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached and is:from-cache shows only resources coming from cache.
+ is:running shows only resources, which are currently being transferred.		is:cached
+ -is:running
schemeShows resources transferred via the given scheme.scheme:http
has-response-headerShows resources that contain the specified HTTP response header.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainShows the resources that have a Set-Cookie header with a Domain attribute that matches the specified value.set-cookie-domain:.mozilla.org
set-cookie-nameShows the resources that have a Set-Cookie header with a name that matches the specified value.set-cookie-name:_ga
set-cookie-valueShows the resources that have a Set-Cookie header with a value that matches the specified value.set-cookie-value:true
regexpShows the resources having a URL that matches the given {{Glossary("regular expression")}}.regexp:\d{5}
+ regexp:mdn|mozilla
+ + + +

Context-clicking on a row in the list displays a context menu with the following options:

+ + + +

Edit and Resend

+ +

This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.

+ +

Open in New Tab

+ +

Resends the request in a new tab — very useful for debugging asynchronous requests.

+ +
+

Nota: Since Firefox 59, POST requests are correctly resent as POST requests ({{bug(1220758)}}), with the expected POST parameters ({{bug(1407515)}}).

+
+ +

Copy as cURL

+ +

This option copies the network request to the clipboard as a cURL command, so you can execute it from a command line. The command may include the following options:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]If the method is not GET or POST
--dataFor URL encoded request parameters
--data-binaryFor multipart request parameters
--http/VERSIONIf the HTTP version is not 1.1
-IIf the method is HEAD
-H +

One for each request header.

+ +

From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include --compressed instead of -H "Accept-Encoding: gzip, deflate". This means that the response will be automatically decompressed.

+
+ +

Copy/Save All As HAR

+ +

These options create an HTTP Archive (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.

+ +

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.

+ +

+ +

Detalhes do pedido de rede

+ +

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.

+ +

+ +

The tabs at the top of this pane enable you to switch between the following pages:

+ + + +

Clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.

+ +

Cabeçalhos

+ +

This tab lists basic information about the request:

+ +

+ +

This includes:

+ + + +

You can filter the headers that are displayed:

+ +

+ +
+

New in Firefox 54

+
+ +

From Firefox 54 onwards, you will see a question mark icon next to each header in the Status code row — this is a link to more information about that particular status code, in the MDN documentation of the HTTP headers.

+ +

Cookies

+ +

This tab lists full details of any cookies sent with the request or response:

+ +

+ +

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.

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

The samesite attribute has been shown since Firefox 62 ({{bug("1452715")}}).

+ +

Paramêtros

+ +

This tab displays the GET parameters and POST data of a request:

+ +

+ +

Resposta

+ +

The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:

+ +

+ +

If the response is JSON, it will be shown as an inspectable object.

+ +

If the response is an image, the tab displays a preview:

+ +

+ +

Cache

+ +

If the response is cached (i.e. a 304), the Cache tab will display details about that cached resource.

+ +

+ +

These details include:

+ + + +

HTML preview

+ +

From Firefox 59 onwards, if the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.

+ +

+ +

Timings

+ +

The Timings tab breaks a network request down into the following subset of the stages defined in the HTTP Archive specification:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeDescrição
Blocked +

Time spent in a queue waiting for a network connection.

+ +

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 network.http.max-persistent-connections-per-server preference. If all connections are in use, the browser can't download more resources until a connection is released.

+
DNS resolutionTime taken to resolve a host name.
ConnectingTime taken to create a TCP connection.
SendingTime taken to send the HTTP request to the server.
WaitingWaiting for a response from the server.
ReceivingTime taken to read the entire response from the server (or cache).
+ +

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:

+ +

+ +

Segurança

+ +

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:

+ +

+ +

The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:

+ +
    +
  1. Using SSLv3 instead of TLS
    2. +
  2. Using the RC4 cipher
    3. +
+ +

+ +

Stack trace

+ +

Since Firefox 55, stack traces are shown in the Stack Trace tab, for responses that have a stack trace of course.

+ +

+ +

Pausing and resume network traffic recording

+ +

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.

+ +

The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — .

+ +

You can see it here in context:

+ +

+ +

Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.

+ +

Análise de desempenho

+ +

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.
+
+ To run the performance analysis tool click the stopwatch icon in the toolbar.

+ +

(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.)

+ +

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:

+ +

+ +

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.

+ +

To get back to the Network Monitor's list of network requests click the "Back" button on the left.

+ +

Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see only that resource type.

+ +

Throttling

+ +

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.

+ +

+ +

The characteristics emulated are:

+ + + +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeleçãoVelocidade de transferênciaVelocidade de envioLatência mínima (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
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 +--- +
{{ToolsSidebar}}

{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "page-inspector") }}

+ +

Atalhos globais

+ +

{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "all-toolbox-tools") }}

+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}

Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.

+ +

Esta abrange três componentes de topo da IU do Inspetor:

+ + + +

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.

+ +

Botão de selecionar elemento

+ +

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:

+ +

+ +

Note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the Inspector.

+ +

To learn how to select an element, see the guide to selecting an element.

+ +

Painel de HTML

+ +

The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:

+ +

+ +

To learn more about the structure of the HTML pane, see the guide to examining and editing HTML.

+ +

Painel de CSS

+ +

The right-hand side of the Inspector is occupied by the CSS pane:

+ +

The CSS pane is divided into 4 views:

+ + + +

Use the tabs along the top to switch between the different views.

+ +

Visualizar Regras

+ +

The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:

+ +

+ +

See Examine and edit CSS for more details.

+ +

Visualização computada

+ +

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:

+ +

+ +

To learn more about the box model view, see Examine and edit the box model. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.

+ +

To learn more about the CSS declarations listed in this view, see Examine computed CSS.

+ +

Visualizar tipo de letra

+ +
+

Apenas 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 about:config, encontre a preferência devtools.fontinspector.enabled, e defina-a para "true".

+ +

Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.

+
+ +

The Fonts view shows all the fonts in the page along with editable samples.

+ +

+ +

Consultar Visualizar tipos de letra para mais detalhes.

+ +

Visualizar animações

+ +

The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:

+ +

 

+ +

+ +

Consulte Work with animations para mais detalhes.

+ +

Mostrar/ocultar painel CSS

+ +

From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:

+ +

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 +--- +
{{ToolsSidebar}}
+ +

Existem dois modos principais para abrir o Inspetor:

+ + + +

O 'Inspetor' irá aparecer no fundo da janela do navegador:

+ +

Para começar a encontrar a sua direção em torno do Inspetor, consulte Guia de IU.

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 +--- +
{{ToolsSidebar}}

Pode examinar e editar CSS no painel de CSS do Inspetor.

+ +

Examinar regras de CSS

+ +

A visualização de Regras lista todas regras que se aplicam ao elemento selecionado, ordenada pela mais específica para a menos específica:

+ +

+ +

The Rules view lists user-agent styles (styles applied by the browser) if the option to do so is checked in the developer tool settings. Note that this setting is independent of the "Browser styles" checkbox in the Computed view.

+ +

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:

+ +

+ +

Exibir regra

+ +

It displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.

+ +

+ + + +

Starting in Firefox 52, if the element has a display: grid declaration, then it gets a grid icon next to it, like this: . Click that icon to display the grid overlaid on the page, including grid lines and tracks. See Examine grid layouts for more on this.

+ +

User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix (user agent):

+ +

+ +

element {} rule

+ +

The element {} 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.

+ +

Starting in Firefox 52, this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page.

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Filtrar regras

+ +

There's a box at the top of the Rules view labeled "Filter Styles":

+ +

As you type:

+ + + +

Click the "X" at the end of the search box to remove the filter.

+ +
+

While in the Rules view, you can press Ctrl / Cmd + F to focus the search field. Once you've typed in a filter, you can press Esc to remove it again.

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ + + +

By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.:

+ +

+ +

If you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:

+ +

+ +

Expanding shorthand properties

+ +

Shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them.

+ +

Displaying pseudo-elements

+ +

The Rule view displays the following pseudo-elements, if they are applied to the selected element:

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:

+ +

+ +

Clicking the triangle displays them:

+ +

+ +

Setting :hover, :active, :focus

+ +

There's a button to the right of the filter box:

+ +

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:

+ +

This feature can also be accessed from the popup menu in the HTML view.

+ +

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:

+ +

+ +

Hiperligação para ficheiros CSS

+ +

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 Style Editor.

+ +

You can copy the location of the source file: right-click the link and select "Copy Location".

+ +

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 Style Editor settings, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the Style Editor documentation.

+ +

Obter ajuda para as propriedades de CSS

+ +

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:

+ +

{{EmbedYouTube("ptVtAEOK7y4")}}

+ +

Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.

+ +

Overridden declarations

+ +

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.

+ +

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.

+ +

This makes it easy to see which rule is overriding the declaration:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examinar CSS computada

+ +

To see the complete computed CSS for the selected element, switch to the Computed view. This shows the calculated value that each CSS property has for the selected element:

+ +

+ +

You can Tab through them to select them, and from Firefox 49 onwards, you can find more information about these properties — pressing F1 on a selected property will open up its MDN reference page.

+ +

Clicking the arrow next to the property name (or pressing Enter or Space while it is selected) shows the rule that set this value, along with a link to the source filename and line number:

+ +

+ +

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 Tab through the filenames/line numbers; pressing Enter/Return will open up the relevant file at that point in the Style Editor.

+ +

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.

+ +
+

While in the Computed view, you can press Ctrl / Cmd + F to focus the search field. Once you've typed in a filter, you can press Esc to remove it again.

+
+ +

Editar regras

+ +

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 Tab through the different existing properties and values, and start editing them by pressing Enter or Space. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace).

+ +

As you start typing a property name, you'll see a list of autocomplete suggestions. Press Tab to accept the current suggestion or Up and Down 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":

+ +

+ +

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.

+ +

Any changes you make are temporary: reloading the page will restore the original styling.

+ +

You can use the arrow keys to increase/decrease numeric rules while editing. The Up arrow will turn "1px" to 2px, and Shift + Up/Down will increment by 10. Alt + Up/Down change values by 0.1, and Shift + Page up/Page down will add or subtract 100 from the value.

+ +

Edits that you make in the Rules view are reflected in the Style Editor, and vice versa.

+ +

Starting in Firefox 52, if you're editing CSS, the context menu you'll see is the normal one for working with editable text:

+ +

+ +

Adicionar regras

+ +

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.

+ +

+ +

There's also a button that enables you to do the same thing:

+ +

+ +

Copiar regras

+ +

To copy rules, and pieces of rules, use one of the following context menu items in the Rules view:

+ + + +

+ +

Consultar também

+ + 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 +--- +
{{ToolsSidebar}}

Visualização do modelo de caixa

+ +

Com o botão de selecionar Elemento pressionado, se passar o rato por cima de um elemento na página, é mostrado o modelo de caixa para o elemento sobreposto na página:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

Também é mostrado sobreposto se passar com o rato sobre uma marcação de elemento no painel de HTML:

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

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:

+ +

+ +

A visualização do Modelo de Caixa

+ +

Quando é selecionado um elemento, pode obter uma visão detalhada do modelo na visualização do Modelo de Caixa:

+ +

+ +

Se passar o rato sobre um valor, verá uma dica de ferramenta a dizer qual é a regra que o valor provém de:

+ +

+ +

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:

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Edição do modelo de caixa

+ +

Também pode editar os valores na visualização do Modelo de Caixa, e ver os resultados imediatatamente na página:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

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 +--- +
{{ToolsSidebar}}

As hiperligações para os vários 'Como...' podem ser encontradas aqui. Estas hiperligações descrevem em profundidade as técnicas de 'Como...'.

+ +

{{ ListSubpages () }}

+ +

 

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 +--- +
{{ToolsSidebar}}

Em visualizar Regras no Painel de CSS, se uma regra contém um valor de cor, irá ver uma amostra da da cor junto ao valor:

+ +

+ +

Se clicar na amostra de cor, verá uma janela para selecionar a cor, permitindo-lhe alterar a cor:

+ +

+ +

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:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

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:

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

A partir da versão 53 do Firefox e superior, este suporta os valores de cor de nível 4 de CSS (EN).

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 +--- +
{{ToolsSidebar}}
New in Firefox 48
+ +

A partir da versão 48 do Firefox pode mover absolutamente os elementos posicionados, arrastando-os em redor da página.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Se um elemento tem a sua propriedade {{cssxref("position")}} definida para absoluta, relativa ou fixa e uma ou mais propriedades de {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, a visualização do Modelo de Caixa exibe um botão:

+ +

+ +

Se clicar nesse botão, aparecem dois pontos de apoio junto ao elemento:

+ +

Example for changing the position of an element within the content

+ +

Pode esses pontos de apoio para arrastar o elemento em redor da página.

+ +

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.

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 +--- +
{{ToolsSidebar}}

Este artigo aborda três ferramentas que pode utilizar para visualizar e editar animações:

+ + + +

Inspetor de animação

+ +
+

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 this separate page.

+
+ +

From Firefox 41, the Page Inspector includes an extra view labeled "Animations".

+ +

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.

+ +

To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different Firefox channel. 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.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}

+ +

Let's use the animation inspector to see what's going on in this example.

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

Now play the animation:

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

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.

+ +

Cada animação ou transição é mostrada como uma barra horizontal disposta através da barra cronológica:

+ + + +

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.

+ +

To the left of the selector is a "target" icon (). From Firefox 44, clicking this icon will lock the highlighter on the element.

+ +

Aplicando tudo isto para o nosso exemplo, nós podemos ver que:

+ + + +

Reprodução de animação

+ +

No topo do inspetor de animação:

+ + + +

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:

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

Editar @keyframes

+ +

Quaisquer regras de @keyframes associadas com o elemento atualmente selecionado são exibibas na Visualização das Regras e são editáveis:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Editar funções de sincronização

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

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 P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

Esta funcionalidade utiliza o código fonte de Lea Verou’s cubic-bezier.com.

+ +

O editor cúbico Bézier inclui um número de pré-ajustes, agrupados sob "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

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 +--- +
{{ToolsSidebar}}

Firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:

+ +

window.inspector

+ +

defined in inspector-panel.js. Attributes and functions:

+ + + +

Bindable events using on:

+ +

markuploaded

+ +

Called when the left panel has been refreshed, after page change.

+ +

ready

+ +

Called on first markuploaded.

+ +

pseudoclass

+ +

Called after toggle of a pseudoclass.

+ +

layout-change

+ +

"low-priority change event for things like paint and resize."

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 +--- +
{{ToolsSidebar}}

Dica da ferramenta da família do tipo de letra

+ +

Se passar o rato sobre uma propriedade da família do tipo de letra em visualizar Regras, irá obter uma dica de ferramenta com uma amostra desse tipo de letra:

+ +

+ +

Visualizar tipos de letra

+ +
+

Apenas 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 about:config, encontre a preferência devtools.fontinspector.enabled, e defina-a para "true".

+ +

Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.

+
+ +

Em visualizar Tipos de Letra 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:

+ +

+ +

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.

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 +--- +
{{ToolsSidebar}}

Se passar o rato sobre uma propriedade transform em visualizar Regras, irá ver a transformação sobreposta na página:

+ +

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 +--- +
{{ToolsSidebar}}

Utilize o 'Inspetor de Página' para examinar e modificar o HTML e CSS de uma página.

+ +

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 depuração remota para saber como ligar as ferramentas de desenvolvimento a um destino remoto.

+ +
+

Guia da Interface do Utilizador

+ +

Para se movimentar no Inspector, pode ver um guia rápido da IU.

+ +
+

Como...

+ +

Saiba o que pode fazer com o Inspetor, consulte os seguintes guias de como...:

+ +
+ +
+ +
+

Referência

+ +
+ +
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 +--- +
{{ToolsSidebar}}

A 'IU - Interface do Utilizador' da ferramenta desempenho consiste em 4 partes principais:

+ +

+ + + +

Barra de Ferramentas

+ +

A barra de ferramentas contém botões para:

+ + + +

+ +

Painel de gravações

+ +

The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.

+ +

+ +

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".

+ +

Resumo da gravação

+ +

This displays an overview of the entire recording, with the x-axis representing time.

+ +

+ +

It contains two elements: an overview of the Waterfall and a frame rate graph.

+ +

Resumo de Waterfall

+ +

This presents a compressed view of the Waterfall:

+ +

+ +

Recorded operations are color-coded using the same scheme as in the main Waterfall view.

+ +

Gráfico de taxa de imagem

+ +

The frame rate gives you an overview of the browser's responsiveness during the recording:

+ +

+ +

See the separate article on frame rate.

+ +

Eventos dependentes

+ +

Because these elements are synchronized, you can correlate events in one element with events in another.

+ +

For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:

+ +

+ +

Zoom

+ +

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:

+ +

+ +

Painel de detalhes

+ +

The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.

+ +

Waterfall

+ +

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.

+ +

+ +

To learn much more about the Waterfall, see the separate Waterfall page.

+ +

Call Tree

+ +

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.

+ +


+ To learn much more about the Call Tree, see the separate Call Tree page.

+ +

Flame Chart

+ +

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:

+ +

+ +

To learn much more about the Flame Chart, see the separate Flame Chart page.

+ +

Alocações

+ +
+

The Allocations view is new in Firefox 46.

+
+ +

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.

+ +

+ +

The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

To learn much more about the Allocations view, see the separate Allocations page.

+ +

 

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 +--- +

{{draft}}

+ +

{{ToolsSidebar}}

+ +

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 debuggee, and the instance of Firefox doing the debugging is called the debugger.

+ +

Enable remote debugging

+ +

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 Developer Tools Settings. If you're using Firefox Developer Edition, they are checked by default.

+ +

+ +

You only need to do this once: the setting values persist across restarts.

+ +

Start the debugger server

+ +

Next, you need to start the debugger server in the debuggee.

+ +

Run the debuggee from the command line, passing it the --start-debugger-server option:

+ +
/path/to/firefox --start-debugger-server
+ +

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:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Note: in Windows, the start-debugger-server call will only have one dash:

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Note: By default, and for security reasons, the devtools.debugger.force-local 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.

+
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 +--- +
{{ToolsSidebar}}

This guide explains how to use remote debugging to inspect or debug code running in Thunderbird.

+ +

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.

+ +

Configurar o Thunderbird

+ +

All that needs to be done in Thunderbird is enabling the debugger server. This can be done using Tools from the Menu Bar (alt + Tools) and selecting Allow Remote Debugging. 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 devtools.debugger.remote-port.

+ +

Configurar o Firefox

+ +

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.

+ +

To set up Firefox, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:

+ +

+ +

Now you can open the connection page in Firefox via the tools menu:

+ +

+ +

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.

+ +

+ +

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.

+ +

+ +

Utilizar as Ferramentas de Desenvolvimento

+ +

Usage of the tools is mostly self explanatory. If you are having trouble with a certain tool, check the Developer Tools documentation. 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.

+ +

Resolução de problemas

+ +

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.

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 +--- +
{{ToolsSidebar}}
+ +

Pode utilizar as ferramentas de desenvolvimento do Firefox 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.

+ +

As instruções detalhadas para ligar às ferramentas de programador são específicas de tempo de execução.

+ +

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.

+ + 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 +--- +
{{ToolsSidebar}}
+ +
+

Scratchpad is deprecated as of Firefox 70 (bug 1565380), and will be removed as of Firefox 72 (bug 1519103). As an alternative, starting in Firefox 71, you can use the multi-line mode of the JavaScript console input.

+
+ +

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.

+ +

Ao contrário da Consola da Web, 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.

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +
+

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 Page Inspector's Edit as HTML context menu command.

+
+ +

Utilização

+ +

Opening Scratchpad in its own window

+ +

There are several different ways to open Scratchpad in its own window:

+ + + +

This will open up Scratchpad in its own window.

+ +

Abrir o Scratchpad na Caixa de Ferramentas

+ +
New in Firefox 47.
+ +

From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.

+ +

Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in split Console mode: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.

+ +

Edição

+ +

The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen):

+ +

A screenshot of the Scratchpad

+ +

The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.

+ +

Conclusão do código

+ +

Scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. To list autocomplete suggestions, press Ctrl + Space.

+ +

For example, try typing d, then pressing Ctrl + Space. You'll see the autocomplete box, as shown below:

+ +

The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. ↑ and ↓ cycle through the suggestions and Enter or Tab select the highlighted choice.

+ +

Inline documentation

+ +

To show the inline documentation popup, press Ctrl + Shift + Space when the cursor is on an identifier. For example, if you type document.addEventListener, then press Ctrl + Shift + Space, you'll see a popup that shows a summary of the function's syntax and a short description:

+ +

The "[docs]" link takes you to the MDN documentation for the symbol.

+ +

Execução

+ +

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.

+ +

There are four execution options available.

+ +

Executar

+ +

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.

+ +

Inspecionar

+ +

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.

+ +

Por exemplo, se inserir o código:

+ +
window
+
+ +

Then choose Inspect, the object inspector is shown that looks something like this:

+ +

Inspecting an object in the Scratchpad

+ +

Display

+ +

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 REPL.

+ +

Reload And Run

+ +

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.

+ +

Executar o Scratchpad no contexto do navegador

+ +

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 Developer Tool Settings. 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:

+ +
window
+/*
+[object ChromeWindow]
+*/
+
+gBrowser
+/*
+[object XULElement]
+*/
+ +

The Scratchpad execution context is set to browser when a snippet file has
+ // -sp-context: browser
+ on the first line.

+ +

Atalhos de teclado

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

Atalhos do editor fonte

+ +

{{ Page ("pt-PT/docs/tools/Keyboard_shortcuts", "source-editor") }}

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 +--- +
{{ToolsSidebar}}

A 'Caixa de Ferramentas' fornece um único local para a maioria das ferramentas de desenvolvimento que são criadas para o Firefox.

+ +

There are a few different ways to open the Toolbox:

+ + + +

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:

+ +

A janela é dividida em duas partes: uma barra de ferramentas no topo, e um painel principal por debaixo:

+ +

+ +

Modo de anexação

+ +

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 botões na barra de ferramentas.

+ +

Barra de Ferramentas

+ +

The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.

+ +

+ +

Selecionador de Nodo

+ +

On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See "Selecting elements".

+ +

Ferramentas hospedadas na Caixa de Ferramentas

+ +

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:

+ + + +

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).

+ +

Ferramentas extra

+ +

Next there's an array of buttons that can be added or removed in the developer tool settings. By default this array includes:

+ + + +

The following tools are not included in the toolbar by default, but you can add them in the settings:

+ + + +

Controlos da caixa de ferramentas

+ +

Finally there's a row of buttons to:

+ + + +

Configurações

+ +

See the separate page on the Developer Tools Settings.

+ +

Painel Principal

+ +

The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.

+ +

Atalhos de teclado

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+ +
+ + + + + +
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 +--- +
{{ToolsSidebar}}
+

WebIDE permite-lhe criar, editar, executar, e depurar as aplicações da Web, utilizando o FSimulador de Firefox OS ou um dispositivo real com o Firefox OS.

+ +

It also enables you to connect the Firefox Developer Tools to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the Remote Debugging page for instructions on how to connect to a specific browser.

+
+ +

With WebIDE, you first set up one or more runtimes. 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 Firefox 39), or it could be a Firefox OS Simulator installed on the desktop itself.

+ +

Next, you create an app, or open an existing app. 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.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +
+
+
Abrir WebIDE
+
How to open WebIDE from within Firefox.
+
Setting up runtimes
+
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.
+
Criação e edição de aplicações
+
How to create, open, and develop apps using WebIDE.
+
The runtime menu
+
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.
+
Running and debugging apps
+
How to install apps to a runtime and debug them using the Firefox Developer Tools.
+
Working with Cordova apps in WebIDE
+
From Firefox 39, you can edit and debug Cordova apps using WebIDE.
+
Resolução de Problemas
+
Help for problems with WebIDE, especially problems connecting to a runtime.
+
-- cgit v1.2.3-54-g00ecf