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-br/tools/3d_view/index.html | 109 +++ .../tools/add-ons/dom_inspector_pt-br/index.html | 81 ++ files/pt-br/tools/add-ons/index.html | 21 + .../pt-br/tools/atua\303\247\303\243o/index.html" | 380 ++++++++ files/pt-br/tools/browser_console/index.html | 179 ++++ files/pt-br/tools/css_coverage/index.html | 136 +++ .../index.html | 59 ++ files/pt-br/tools/debugger/how_to/index.html | 11 + .../disable_breakpoints/index.html | 19 + .../tools/debugger_(before_firefox_52)/index.html | 58 ++ files/pt-br/tools/depurador/index.html | 448 ++++++++++ .../tools/depurador/set_a_logpoint/index.html | 53 ++ .../depura\303\247\303\243o_remota/index.html" | 31 + files/pt-br/tools/devtoolsapi/index.html | 834 ++++++++++++++++++ files/pt-br/tools/editor_de_estilos/index.html | 88 ++ files/pt-br/tools/eyedropper/index.html | 47 + files/pt-br/tools/index.html | 189 ++++ .../tools/inspetor_de_armazenamento/index.html | 137 +++ files/pt-br/tools/keyboard_shortcuts/index.html | 968 +++++++++++++++++++++ .../tools/medir_uma_porcao_da_pagina/index.html | 38 + files/pt-br/tools/memory/index.html | 60 ++ files/pt-br/tools/modo_design_adaptavel/index.html | 121 +++ files/pt-br/tools/network_monitor/index.html | 192 ++++ files/pt-br/tools/notas_de_lancamento/index.html | 427 +++++++++ .../how_to/edit_css_filters/index.html | 32 + .../how_to/examinando_eventos_escuta/index.html | 26 + .../how_to/examine_and_edit_css/index.html | 216 +++++ .../how_to/examine_grid_layouts/index.html | 34 + files/pt-br/tools/page_inspector/how_to/index.html | 13 + .../how_to/open_the_inspector/index.html | 19 + .../trabalho_com_anima\303\247oes/index.html" | 175 ++++ files/pt-br/tools/page_inspector/index.html | 276 ++++++ files/pt-br/tools/rulers/index.html | 32 + files/pt-br/tools/scratchpad/index.html | 77 ++ files/pt-br/tools/settings/index.html | 155 ++++ files/pt-br/tools/shader_editor/index.html | 56 ++ .../tools/simulador_firefox_os_1.1/index.html | 359 ++++++++ files/pt-br/tools/web_console/helpers/index.html | 55 ++ files/pt-br/tools/web_console/index.html | 53 ++ .../web_console/opening_the_web_console/index.html | 63 ++ .../the_command_line_interpreter/index.html | 183 ++++ files/pt-br/tools/webide/index.html | 271 ++++++ .../index.html | 53 ++ .../pt-br/tools/webide/troubleshooting/index.html | 62 ++ files/pt-br/tools/working_with_iframes/index.html | 32 + 45 files changed, 6928 insertions(+) create mode 100644 files/pt-br/tools/3d_view/index.html create mode 100644 files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html create mode 100644 files/pt-br/tools/add-ons/index.html create mode 100644 "files/pt-br/tools/atua\303\247\303\243o/index.html" create mode 100644 files/pt-br/tools/browser_console/index.html create mode 100644 files/pt-br/tools/css_coverage/index.html create mode 100644 files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/pt-br/tools/debugger/how_to/index.html create mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/pt-br/tools/depurador/index.html create mode 100644 files/pt-br/tools/depurador/set_a_logpoint/index.html create mode 100644 "files/pt-br/tools/depura\303\247\303\243o_remota/index.html" create mode 100644 files/pt-br/tools/devtoolsapi/index.html create mode 100644 files/pt-br/tools/editor_de_estilos/index.html create mode 100644 files/pt-br/tools/eyedropper/index.html create mode 100644 files/pt-br/tools/index.html create mode 100644 files/pt-br/tools/inspetor_de_armazenamento/index.html create mode 100644 files/pt-br/tools/keyboard_shortcuts/index.html create mode 100644 files/pt-br/tools/medir_uma_porcao_da_pagina/index.html create mode 100644 files/pt-br/tools/memory/index.html create mode 100644 files/pt-br/tools/modo_design_adaptavel/index.html create mode 100644 files/pt-br/tools/network_monitor/index.html create mode 100644 files/pt-br/tools/notas_de_lancamento/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 "files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" create mode 100644 files/pt-br/tools/page_inspector/index.html create mode 100644 files/pt-br/tools/rulers/index.html create mode 100644 files/pt-br/tools/scratchpad/index.html create mode 100644 files/pt-br/tools/settings/index.html create mode 100644 files/pt-br/tools/shader_editor/index.html create mode 100644 files/pt-br/tools/simulador_firefox_os_1.1/index.html create mode 100644 files/pt-br/tools/web_console/helpers/index.html create mode 100644 files/pt-br/tools/web_console/index.html create mode 100644 files/pt-br/tools/web_console/opening_the_web_console/index.html create mode 100644 files/pt-br/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/pt-br/tools/webide/index.html create mode 100644 files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html create mode 100644 files/pt-br/tools/webide/troubleshooting/index.html create mode 100644 files/pt-br/tools/working_with_iframes/index.html (limited to 'files/pt-br/tools') diff --git a/files/pt-br/tools/3d_view/index.html b/files/pt-br/tools/3d_view/index.html new file mode 100644 index 0000000000..cae7d5927b --- /dev/null +++ b/files/pt-br/tools/3d_view/index.html @@ -0,0 +1,109 @@ +--- +title: Visualização 3D +slug: Tools/3D_View +tags: + - Descontinuado + - Desenvolvimento Web + - Ferramentas + - HTML +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +

{{ fx_minversion_header("11") }}

+ +
+

A partir da versão 47 do Firefox, a visualização 3D não estará mais disponível.

+ +

Existe um complemento que implementa essa funcionalidade (Tilt 3D), mas que não funciona com o Firefox multiprocesso

+
+ +

Quando você clica no botão de visualização 3D, a página vai para o modo de visualização 3D; neste modo, você pode ver sua página apresentada em uma exibição 3D no qual os blocos HTML aninhados estão cada vez mais "alto", projetando para fora a parte inferior da página. Essa visualização faz com que fique mais fácil para visualizar seus conteúdos aninhados.

+ +

+ +

Você pode visualizar a representação do DOM (Document Object Model) de diferentes ângulos, clicando e arrastando sua representação 3D. Elementos que se encontram fora da tela tornam-se visíveis nesta forma de visualização, de forma que você possa ver onde eles estão localizados em relação aos outros elementos. Você pode clicar em qualquer elemento para ver seu código HTML no painel de HTML ou no painel de Estilo. Reciprocamente, você também pode clicar em elementos da barra de breadcrumbs para selecionar sua representação 3D.

+ +

Se você estiver rodando uma versão do Firefox inferior ao 47 e não encontrar o botão 3D no inspetor de página, é possível que você tenha que atualizar seus drivers de vídeo. Para mais informações, leia a lista de drivers bloqueados.

+ +

Controlando a visualização 3D

+ +

Existem teclas de atalho e controles do mouse disponívies para a visualização 3D.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunçãoTecladoMouse
Zoom dentro/fora+ / -Role a roda cima/baixo
Rotacionar esquerda/direitaa / dMouse esquerda/direita
Rotacionar cima/baixow / sMouse cima/baixo
Pan esquerda/direita← / →Mouse esquerda/direita
Pan cima/baixo↑ / ↓Mouse cima/baixo
Resetar level de zoom0Reseta o zoom por padrão
Foco no nó selecionadofGarante que o nó selecionado atualmente está visível {{ fx_minversion_inline("13.0") }}
Resetar visualizaçãorRedefine zoom, rotação e panorâmica para o padrão {{ fx_minversion_inline("12.0") }}
Esconde o nó atualxFaz com que o nó selecionado atualmente fique invisível; Isso pode ser útil se você precisa chegar a um nó que está obscuro {{ fx_minversion_inline("12.0") }}
+ +

Casos de uso para a visualização 3D

+ +

Há uma variedade de casos que a visualização 3D é útil:

+ + + +

Veja também

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html b/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html new file mode 100644 index 0000000000..6e70f0a1f6 --- /dev/null +++ b/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html @@ -0,0 +1,81 @@ +--- +title: DOM Inspector (Em Pt-Br) +slug: Tools/Add-ons/DOM_Inspector_Pt-Br +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - DOM_PT-BR + - Extensions + - Ferramentas + - Inspector + - Theme + - Tools + - Web + - Web Developer + - XUL + - 'XUL:Tools' + - dev + - xu +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

O DOM Inspector (também conhecido como DOMi) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (Document Object Model) de documentos - usando páginas da web ou windows XUL . A hierarquia do DOM pode ser navegada usando dois paíneis (two-paned) janela que permite uma variedade de pontos de vista diferentes sobre o documento e todos os nós dentro.

+ +
+

Esta ferramenta é um add-on para XUL-based em aplicações como o Firefox e o Thunderbird. Se você está procurando o DOM inspector ele está incorporado no Firefox, consulte a documetação para o Page Inspector. 

+
+ +

Documentação

+ +
+
Introdução ao DOM Inspector
+
+
+
Aqui um tutorial que irá ajudá-lo a começar com o DOM Inspector.
+
+
+
+ +
+
DOM Inspector FAQ
+
Perguntas e Respostas comuns sobre o DOM Inspector.
+
+ +
+
Página DOM Inspector no MozillaZine
+
Mais informaçãoe sobre o DOM Inspector.
+
Como criar um DOM Inspector
+
Postagens sobre como criar o DOM Inspector do início
+
+ +

Obter DOM Inspector

+ +
+
Firefox & Thunderbird
+
Você pode Baixar e Instalar o DOM Inspector para o AMO web site. (Usuarios de navegador Thunderbird AMO em Firefox deve salvar o link de instalação, ou visitar a página do DOM Inspector para Thunderbird.).
+
+ +
+
Thunderbird 2
+
DOM Inspector para Thunderbird 2 está disponível para Thunderbird Add-ons. Ou, construa você mesmo no Thunderbird com as seguintes opções:
+
+ +
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite e SeaMonkey
+
Select Tools > Web Development > DOM Inspector.
+
Você pode instalar o painel lateral através de:
+
Edit > Preferences > Advanced > DOM Inspector
+
Então basta abrir o painel inspector e visitar um Web Site..
+
+ +

Relatar um bug no DOM Inspector

+ +

Use um nome conveniente "DOM Inspector" componente no Bugzilla.

+ +

Para descobrir o DOM Inspector code e onde vive, consulte o DOM Inspector lista de módulos (DOM Inspector module listing).

+ +

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/pt-br/tools/add-ons/index.html b/files/pt-br/tools/add-ons/index.html new file mode 100644 index 0000000000..97b6d72ed1 --- /dev/null +++ b/files/pt-br/tools/add-ons/index.html @@ -0,0 +1,21 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - Add-ons + - Monitor de WebSocket + - Mozilla + - dev +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}

Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).

+ +
+
Monitor de WebSocket
+
+
+
Examine os dados trocados em uma conexão de WebSockets.
+
+
+
 
+
diff --git "a/files/pt-br/tools/atua\303\247\303\243o/index.html" "b/files/pt-br/tools/atua\303\247\303\243o/index.html" new file mode 100644 index 0000000000..880187e7e2 --- /dev/null +++ "b/files/pt-br/tools/atua\303\247\303\243o/index.html" @@ -0,0 +1,380 @@ +--- +title: Performance +slug: Tools/atuação +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+

Esta ferramenta é nova no Firefox 34.

+ +

As colunas no perfil de amostragem foram expandidos e renomeado no Firefox 35: esta página descreve os novos nomes das colunas.

+
+ +

A ferramenta de desempenho é o substituto para o perfil de amostragem JavaScript. Ele inclui uma versão atualizada do perfil de amostragem, mas acrescenta um cronograma taxa de quadros para ajudar a avaliar a capacidade de resposta. Temos a intenção de adicionar mais recursos em versões futuras.

+ +

Abrindo a ferramenta de desempenho

+ +

Você pode iniciar a ferramenta de desempenho, selecionando "Performance", no menu "Web Developer". Você encontrará o menu "Web Developer" sob o menu "Ferramentas" no Linux e OS X, e diretamente sob o menu "Firefox" no Windows. Alternativamente, Shift + F5 irá abrir a ferramenta.

+ +

+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

A criação de perfis

+
+
+ +

Para começar a gravar um novo perfil, clique no ícone do cronômetro. Clique novamente para terminar a gravação. O perfil será imediatamente aberto. Você pode salvar o perfil como um arquivo JSON e importação salva perfis. A barra lateral à esquerda permite que você alterne entre vários perfis abertos.

+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

Análise de perfis

+
+
+ +
+
+
+
Um perfil é algo como isto:
+
+
+
+ +

+ +

Ele consiste em quatro seções principais camadas horizontalmente:

+ +
    +
  1. +
    +
    +
    um conjunto de migalhas de pão que você pode usar para zoom in e out
    +
    +
    + + +
    +
    +
    +
     
    +
    +
    + +
    um cronograma taxa de quadros
    +
    +
    2. +
  2. +
    +
    +
    um cronograma para a execução de código plataforma
    +
    +
    + a saída detalhada do perfil de amostragem JavaScript
    3. +
    4. +
+ +
+
+
+
 
+
+
+ +
 
+
+ +
+
+
 
+ +

O cronograma taxa de quadros

+
+
+ +
+
+
+
 
+
+
+ +
O cronograma taxa de quadros dá-lhe uma visão geral de capacidade de resposta do navegador no período coberto pelo perfil.
+
+ +

Um quadro encapsula o trabalho do navegador precisa fazer a fim de pintar em resposta a algum evento. Por exemplo, se movendo o mouse sobre algum elemento página desencadeia alguns JavaScript que muda a aparência do elemento, e que desencadeia um refluxo e um repaint, depois de todo esse trabalho precisa ser concluída nesse quadro. Se demorar muito tempo para o navegador para processar o quadro, em seguida, o navegador irá aparecer sem resposta (janky).

+ +
+
+
+
+
+
+
A ferramenta de desempenho leva um timestamp quando o navegador termina um quadro, e usa isso para manter o controle da taxa de quadros:
+
+
+
+
+
+
+ +

+ +
+
+
+
O eixo x é o tempo durante o período de perfil, e há três anotações: a taxa de quadro de destino (sempre 60 quadros por segundo), a média de frames, ea menor taxa de quadros.
+
+
+
+ +
+
+
+
 
+
+
+ +
+
+
+
+
 
+
+
+ +

Execução de código Platform

+
+
+
+ +
+
+
+
Isto dá-lhe uma visão geral de execução de código no período coberto pelo perfil. Tal como acontece com o cronograma taxa de quadros, o eixo x representa o tempo durante o período de perfis, e as amostras são colocadas para fora como barras verticais na ordem em que foram tiradas, esquerda para a direita:
+
+
+
+ +

A altura de cada barra representa a profundidade da pilha de chamadas neste ponto.

+ +

A ferramenta de desempenho examina a pilha de chamadas e descobre os tipos de coisas o código JavaScript está fazendo, e divide o bar em cores de acordo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NetworkEnvio e processamento de pedidos e respostas de rede
JITCompilação de código JavaScript
GCGarbage collection
Inputs & eventsEventos como de mouse ou eventos de DOM
StylesAnálise de CSS
GraphicsInclue manipulção de reflows e repaints assim como WebGL
StorageNa maioria das vezes é o IndexedDB
GeckoTudo o que não se encaixa em nenhuma das outras categorias
+ +

Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:

+ +

+ +

Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.

+ +
+

Note que essa visão mostra tudo o que a plataforma está fazendo, não apenas o seu próprio código.

+
+ +

Perfil de amostragem JavaScript

+ +

O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, o número de amostras colhidas que executavam uma determinada função corresponde à quantidade de tempo que o navegador está gastando para executá-la, assim é possível identificar gargalos em seu código.
+
+ Por exemplo, considere um programa como este:

+ +
function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                // -> A (from the top level)
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;                 // -> B (from doSomething())
+}
+
+function logTheValue(x) {
+                            // -> C (from doSomething())
+                            // -> D (from doSomething())
+                            // -> E (from the top level)
+ console.log(x);
+}
+
+doSomething();
+
+logTheValue(6);
+ +

Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.

+ +

Four are taken from inside doSomething(). Of those, A is directly inside doSomething(). B is inside getTheValue(), and C and D are inside logTheValue(). Finally, the program makes a call to logTheValue() from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:

+ +
Sample A: doSomething()
+Sample B: doSomething() > getTheValue()
+Sample C: doSomething() > logTheValue()
+Sample D: doSomething() > logTheValue()
+Sample E: logTheValue()
+ +

This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that logTheValue() is the bottleneck in our code.

+ +

Profile structure

+ +

The sampling profiler's details pane looks something like this:It presents the samples collected as a table.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Samples +

The number of samples that were taken in which the corresponding "Function" appeared in the call stack. For example, given the profiling example above, the corresponding "Samples" and "Functions" columns would look like:

+ + 
+4  doSomething()
+2  > logTheValue()
+1  > getTheValue()
+1  logTheValue()
+ +

Note that logTheValue() appears twice, because it's called from two different places.

+
FunctionThis includes the function name, source file, line number and domain that served the file. Clicking on the file name takes you to that file in the Debugger.
Total CostA direct translation of the "Samples" column into a percentage.
Self Cost +

The "Samples" column includes not only samples that were taken while the JavaScript engine was executing this function, but also samples taken while executing functions called by this function.

+ +

For example, in the example above we record 4 samples for doSomething(), but 3 of those samples were taken while the JavaScript engine was executing functions called by doSomething().

+ +

"Self Cost" is the number of samples taken while the JavaScript engine was actually executing this function, translated into a percentage. In the example above, the "Self Cost" for doSomething() is 20% (1 sample out of 5 in total was taken while actually executing the function).

+
Total Time +

A statistical estimate of the amount of time spent inside the function, given the number of samples that were taken in it.

+ +

This value is derived from "Samples" but is not a direct translation, because we don't always take samples at exactly the right time, so we attempt to correct for this irregularity.

+
Self Time +

A statistical estimate of the amount of time spent executing the function, exclusive of any functions called by this function.

+ +

Just as "Total Time" is not a direct translation of  "Samples", so "Self Time" is not a direct translation of "Self Cost".

+
+ +

For a deeper look into the way the sampling profiler presents data, see this walkthrough of a profile.

+ +

Inverting the call tree

+ +
+

New in Firefox 36

+
+ +

By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:

+ +
4  doSomething()
+2  > logTheValue()
+1  > getTheValue()
+1  logTheValue()
+ +

This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.

+ +

From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:

+ + + +

This is usually a more effective way to highlight where your code is spending its time.

+ +

Zooming in

+ +

Clicking on a row highlights all the samples in the timeline view in which this function appears:If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:
+

+ +

Note that this also zooms in on the section of the profile in which these samples were taken.

+ +

Zooming in

+ +

If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:

+ + + +

Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:

+ +

You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar:

+ +

+ +

 

+ +

 

diff --git a/files/pt-br/tools/browser_console/index.html b/files/pt-br/tools/browser_console/index.html new file mode 100644 index 0000000000..e9b80811f7 --- /dev/null +++ b/files/pt-br/tools/browser_console/index.html @@ -0,0 +1,179 @@ +--- +title: Console do navegador +slug: Tools/Browser_Console +tags: + - Debugging + - Desenvolvimento Web + - Ferramentas + - console do navegador + - 'desenvolvimento web: ferramentas' +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}

O Console do navegador é como o Console Web, mas é aplicado a todo o navegador, ao invés de uma única guia de conteúdo.

+ +

Ele registra os mesmos tipos de informações do Console Web – solicitações de rede, JavaScript, CSS, erros e avisos de segurança, e mensagens explicitas registradas pelo código JavaScript. No entanto, ao invés de registrar essas informações para uma única guia de conteúdo, ele registra as informações para todas às guias, complementos, e para o próprio código do navegador.

+ +

Se você também quiser usar as outras ferramentas de desenvolvimento web com complementos ou código no navegador, considere o uso de ferramentas do navegador.

+ +

Da mesma forma, você pode executar expressões JavaScript usando o Console do navegador. Mas enquanto o Console Web executa o código no âmbito da página, o Console do navegador executa-os no âmbito da janela do navegador. Isto significa que você pode interagir com todas às guias usando o gBrowser, com o mesmo  XUL usado para especificar a interface de usuário do navegador.

+ +
+

Obs: A partir do Firefox 30, o Console de linha de comando do navegador (para executar expressões em JavaScript) está desabilitado por padrão. Para habilitá-lo configure a opção devtools.chrome.enabled para true em about:config, ou defina a opção “Enable chrome debugging” nas configurações das ferramentas de desenvolvedor.

+
+ +

Abrindo o Console do navegador

+ +

Você pode abrir o Console do navegador de duas maneiras:

+ +
    +
  1. A partir do menu: selecione a opção “Desenvolvedor” e depois “Console do navegador” (ou no menu Tools se você exibe a barra de menu no OS X);
    2. +
  2.  A partir do teclado: pressione Ctrl+Shift+J (ou Cmd+Shift+J no Mac).
    3. +
+ +

Note que até o Firefox 38, o Console do navegador se tornava oculto pela janela do Firefox, e você poderia selecioná-lo novamente a partir do menu ou do teclado, e em seguida ele era fechado. A partir do Firefox 38, isso tem o efeito de trocar o foco de volta para o Console do navegador, e provavelmente era isso o que você estava querendo.

+ +

Você também pode iniciar o Console do navegador iniciando o Firefox a partir da linha de comando, e passando o argumento -jsconsole:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

O Console de navegador se parece com isso:

+ +

+ +

Você pode ver que o Console do navegador se comporta e se parece muito com o Console Web:

+ + + +

Registros no Console do navegador

+ +

O Console do navegador registra os mesmos tipos de mensagens que o Console Web registra, como:

+ + + +

Entretanto, ele exibe mensagens a partir de:

+ + + +

Mensagens de complementos

+ +

O Console do navegador exibe mensagens registradas por todos os complementos do Firefox.

+ +

Console.jsm

+ +

Para usar a API do Console de complemento tradicional ou bootstrapped, obtenha-lo a partir do modulo do Console.

+ +

Um símbolo de exportado do Console.jsm é “console”. Abaixo está um exemplo de como acessá-lo, e adicionar uma mensagem para o Console do navegador.

+ +
Components.utils.import("resource://gre/modules/devtools/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Saiba mais:

+ + + +

HUDService

+ +

Há também o HUDService que permite acessar o Console do navegador. O módulo está disponível no Mozilla Cross-Reference. Podemos ver, que não somente podemos acessar o Console do navegador como também podemos acessar o Console Web.

+ +

Aqui está um exemplo de como limpar o conteúdo do Console do navegador:

+ +
Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

Se você gostaria de acessar conteúdo do Console do navegador, poderá fazer isso com o HUDService. Este exemplo faz com que quando você passe o mouse sobre o botão “Clear” ele limpe o Console do navegador.

+ +
Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Características extras disponíveis

+ +

Para complementos SDK, a API do Console está disponível automaticamente. Aqui está um exemplo de um complemento que apenas registra um erro quando o usuário clica no widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

Se você o construiu com um arquivo XPI, abra o Console do navegador, e em seguida abra o arquivo XPI no Firefox e o instale, você verá um widget rotulado como “Error!” na barra de complementos:

+ +

Clique no ícone. Você verá uma saída como esta no Console do navegador:

+ +

+ +

Somente para complementos baseados no SDK a mensagem é prefixada com o nome do complemento (“log-error”), tornando mais fácil encontrar todas as mensagens para este complemento usando o filtro de saída na caixa de pesquisa. Por padrão, apenas mensagens de erros são registradas para o Console, embora você pode mudar isso nas configurações do navegador.

+ +

Linha de comando no Console do navegador

+ +
+

A partir do Firefox 30, a linha de comando no Console do navegador está desabilitada por padrão. Para habilita-la defina a configuração devtools.chrome.enabled para true no about:config, ou a opção “Enable chrome debugging” nas configurações de ferramentas de desenvolvedor.

+
+ +

Como o Console Web, o interpretador de linha de comando permite que você avalie expressões JavaScript em tempo real:Como o interpretador de linha de comando do Console Web, este também suporta completamento automático, histórico, vários atalhos de teclado e comandos auxiliares. Se o resultado do comando é um objeto, você pode clicar sobre ele e ver seus detalhes.

+ +

Mas, enquanto o Console Web executa o código no escopo do conteúdo da janela anexada, o Console do navegador executa o código no escopo da janela do navegador. Você pode confirmar isso avaliando window:

+ +

+ +

Isto significa que você pode controlar o navegador: abrindo e fechando guias e janelas, e modificando o conteúdo que se encontra nelas, e modificando a UI do navegador, criando, modificando e removendo elementos XUL.

+ +

Controlando o navegador

+ +

O interpretador de linha de comando obtém acesso ao objeto tabbrowser, através do gBrowser, o que lhe permite controlar o navegador através da linha de comando. Tente executar este código no Console do navegador (para inserir múltiplas linhas no Console do navegador, use Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

Isto adiciona um listener para o evento de load da guia atual no momento da criação de uma nova página, e em seguida, carrega a nova página.

+ +

Modificando a UI do navegador

+ +

Uma vez que o objeto global window é a janela do navegador, você pode modificar a interface do usuário. O seguinte código irá adicionar um novo item ao menu principal do navegador:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

No OS X, este código similar irá adicionar um novo item ao menu “Tools”:

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/pt-br/tools/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html new file mode 100644 index 0000000000..31d1c8be34 --- /dev/null +++ b/files/pt-br/tools/css_coverage/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Coverage +slug: Tools/CSS_Coverage +tags: + - CSS + - cobertura CSS +translation_of: Tools/CSS_Coverage +--- +
{{ToolsSidebar}}
+

Este componente é experimental e não está ainda avaliado no Firefox

+
+ +

CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.

+ +

Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.

+ +

O caminho que eles usam no geral é:

+ + + +

Um outro comando ("csscoverage oneshot") permite você efetivamente rodar ("csscoverage start; csscoverage stop").

+ +

O que "uso" significa?

+ +

TL;DR:

+ +

CSS cobertura checa se o tag#id.class seletor no exemplo abaixo existe em um conjunto de páginas web.

+ +
@media thing {
+  tag#id.class:hover {
+    foo: bar;
+  }
+}
+ +

Porque?

+ +

Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?

+ +
<style>
+  span:hover {
+    color: purple;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Tecnicamente span:hover não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e span:hover claramente tem relevância para a página..

+ +

Similarmente, suponha que o seu CSS tenha o seguinte:

+ +
<style>
+  @media tv {
+    span {
+      color: purple;
+    }
+  }
+</style>
+
+<span>Test</span>
+
+ +

Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? 

+ +

Mas 'use' não é somente sobre relevância 

+ +

É a seguinte regra relevante:

+ +
<style>
+  span { }
+</style>
+
+<span>Test</span>
+
+ +

Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido

+ +

No entanto acontece o seguinte:

+ +
<style>
+  span {
+    -o-text-curl: minor;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.

+ +

Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.

+ +
<style>
+  div { color: red; }
+  span { color: blue; }
+</style>
+
+<div><span>Test</span></div>
+
+ +

Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:

+ +
<style>
+  div { color: red; border: none; }
+  span { color: blue; }
+</style>
+
+ +

Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.

+ +

Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar  checando antes de você remover as regras do arquivo CSS.

+ +

Ressalvas

+ +

Tenha consciência destas coisas:

+ + + +

Erros

+ +

Nós estamos trabalhando em um número de imortantes bugs ( erros ):

+ + diff --git a/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html new file mode 100644 index 0000000000..fc1d03fd3b --- /dev/null +++ b/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,59 @@ +--- +title: 'Examine, modify, and watch variables' +slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +tags: + - expressão de observação + - variáveis watch + - watch expression + - watch variables +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +
{{ToolsSidebar}}
+

Este componente não está ainda suportado no novo debugger. Se você precisar disto, você pode, por agora, voltar para o velho debugger para visitá-lo no about:config e configula-lo no "devtool.debugger.new-debugger-frontend" preferência para falso.

+ +

Ver os documentos para o debugger, por favor visite Debugger(antes Firefox 52).

+
+ +

Examine variáveis

+ +

Quando o código pára em um breakpoint, você pode examinar seu estado no painél de variáveis do debugger.

+ +

+ +

Variáveis são agrupadas por escopo: No escopo da função você verá os argumentos built-in e suas variáveis tão bem como variáveis locais definido pela função como user e greeting similarmente, no escopo global você verá variáveis globais que você tem definido, como greetme, tão bem como globais built-in como localStorage and console.

+ +

Cada objeto pode ser expandido, usando uma disclosure triangle, para mostrar seus componentes.

+ +

Apontando seu cursor para um nome de variável exibido numa tooltip que previdencia informaçãoes adicionais sobre as variáveis. Veja Object.defineProperty() para detalhes no quê essas descrições de propriedades significam.

+ +

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

+ +

Você pode filtrar as variáveis que são exibidas, tanto por usar o "*" modificador no filtro de script, ou por digitar dentro de uma caixa filtro de variáveis, se você habilitou isto nas configurações do debugger.

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

Se uma variável existe no fonte mas tem sido otimizado pelo motor javascript, então isto será mostrado na Visão variável, mas é dado o valor (optimized away), e não é editável. No screenshot abaixo a variável upvar tem sido otimizado:

+ +

+ +

Modificando variáveis

+ +

Quando o código pára num breakpoint, você pode modificar variáveis variáveis no painel de variáveis do debugger. Só clicar na variável atual e você permitirá digitar lá:

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

Observe uma expressão

+ +

 

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Oberve expressões são expressões que são avaliadas cada vez que a execução pausar. Então você pode examinar os resultados destas expressões. Esses são os resultados que eles deixam nas variáveis inspect  em seu código que você sabe que está lá mas não estão necessariamente pronto no código para inspeção. Para adicionar uma expressão de observação, clique na caixa que diz "Add watch expression" e colocar uma javascript expressão que que tem como saída você gostaria de monitorar como você lê através do código.

+ +

Então comece a rodar seu código. Então watch expression faz nada até você iniciar a ler através do seu código, então nada acontece até você alcançar um breakpoint. Neste ponto, uma caixa mostra suas watch expressions ativas e os valores atuais aparecem:

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Você pode ler através do seu código, observar o valor da expressão como muda; cada vez que isto faz, a caixa piscará brevemente em amarelo. Você pode remover uma watch expression por clicar o ícone "x" no próximo, e, claro você pode ter mais do que uma watch expression por vez.

diff --git a/files/pt-br/tools/debugger/how_to/index.html b/files/pt-br/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/pt-br/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-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..a4e9aa924c --- /dev/null +++ b/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,19 @@ +--- +title: Desabilitar breakpoints +slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +tags: + - breakpoint + - breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +
{{ToolsSidebar}}

Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no Source list pane:

+ +

+ +

Alternativamente, ativar o menu de contexto enquanto o ponteiro do mouse estiver sobre a entrada do breakpoint no source list pane, e selecione "Desabilitar breakpoint".

+ +

Você pode também remover um brekpoint somente apertando na seta que o representa.

+ +

Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:

+ +

diff --git a/files/pt-br/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..7d06312bdc --- /dev/null +++ b/files/pt-br/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,58 @@ +--- +title: Debugger (before Firefox 52) +slug: Tools/Debugger_(before_Firefox_52) +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

This page describes the JavaScript Debugger as it appears before Firefox 52.

+ +

See what it looks like from Firefox 52 onwards.

+
+ +

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

+ +

You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See remote debugging to learn how to connect the debugger to a remote target.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

User Interface Tour

+ +

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

+ +
+

How to

+ +

To find out what you can do with the debugger, see the following how-to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/pt-br/tools/depurador/index.html b/files/pt-br/tools/depurador/index.html new file mode 100644 index 0000000000..225f4cb20a --- /dev/null +++ b/files/pt-br/tools/depurador/index.html @@ -0,0 +1,448 @@ +--- +title: Depurador +slug: Tools/Depurador +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +

O Depurador Javascript permite percorrer o código JavaScript e examinar ou modificar seu estado para ajudar a localizar bugs.

+ +

Você pode usá-lo para depurar código executando localmente no Firefox ou executando remotamente, por exemplo em um dispositivo Firefox OS ou Firefox para android. Este guia assume que você está depurando localmente, mas é na maioria das vezes aplicável para depuração remota também. Veja o guia para depuração remota (inglês) para as diferenças.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +

Para Abrir o Depurador selecione "Depurador" no submenu do Menu do Firefox (ou menu de Ferramentas , se você exibir a barra de menu ou estiver no Mac OS X), ou pressionando Control+Shift +S (Command -Option- S se estiver no Mac OS X) .

+ +

A Toolbox aparece na parte inferior da janela do navegador, com o depurador ativado. Aqui está o que aparece quando você abrí-lo primeiro:

+ +

E aqui está o que aparece no meio de uma sessão de depuração:

+ +

Neste guia, vamos primeiro ter um rápido passeio de interface do usuário do depurador, em seguida, iremos descrever como executar algumas tarefas comuns de depuração.

+ +

A Interface do Usuário para Depurador

+ +

A  UI (Interface de Usuário) do depurador é dividida em seis seções principais, que abrangerá uma de cada vez:

+ + + +

+ +

Painel de códigos fontes

+ +

O painel de lista de origem, lista todos os arquivos de origem JS carregados na página, e permite que você selecione um para depuração. A partir do Firefox 29, a origem do painel de lista, compartilha sua tela de imóveis com a pilha de chamadas do painel, e você pode usar as guias na parte superior do painel para alternar entre elas.

+ +

Arquivos de origem são agrupados sob diferentes rubricas de acordo com onde eles são carregados. Você pode selecionar qualquer um desses arquivos e eles serão carregados para o painel de código.
+ Quaisquer pontos de interrupção que você definiu em um arquivo de origem estão listados no painel da lista de origem sob o nome de arquivo. A caixa de seleção ao lado de cada ponto de interrupção permite você ativá-lo / desativá-lo. Clicando com o botão direito na entrada do ponto de interrupção na lista, mostra um menu de contexto permitindo:

+ + + +

Os três ícones no inferior do painel de código fonte permitem habilitar a caixa-preta, impressão agradável de arquivos JS minificados e alternar todos os pontos de interrupção entre ativos e inativos.

+ + + +

Caixa-Preta (Black Boxing)

+ +

O olho no canto inferior esquerdo do painel é um botão que habilita a caixa-preta à fonte atualmente selecionada. Black boxing é útil para fontes as quais está usando, mas não debugando, como bibliotecas como jQuery. Se uma fonte esté em black box, é assumido que não há interesse em debugar: qualquer breakpoint dentro da fonte será desabilitado, e o debugger pulará quando estiver  fazendo o passo-a-passo do código.

+ +

Nas versões do  Firefox antes do 27, o ícone do olho aparece próximo ao nome do arquivo fonte quando passar o mouse sobre ele.

+ +

Impressão agradável (Pretty Print)

+ +

O par de chaves {} habilita a função pretty-print tornando o código desminificado, permitindo uma melhor leitura.

+ +

Alternar entre todos os pontos de interrupção (Toggle all breakpoints)

+ +
+

O botão Toggle all breakpoints  é novo no Firefox 29.

+
+ +

O botão vai desabilitar todos os breakpoints, ou reabilitá-los, numa única ação. Isso torna fácil mudar entre rodar um programa e fazer o passo-a-passo por ele.

+ +

Painel pilha de chamada

+ +
+

The call stack pane is new in Firefox 29.

+
+ +

Na outra aba do lado esquerdo do painel de depuração é exibida na vertical a  pilha de chamadas:

+ +

Cada linha representa um nível na pilha de chamada com a chamada atual no topo do painel. As linhas mostram o nome das funções que estão sendo executadas atualmente e um link para o arquivo fonte e o número da linha.

+ +

Painel de arquivos

+ +

Esse painel exibe os arquivos JS que foram carregados atualmente. Os pontos de interrupção(breakpoints) são sinalizados através de um círculo azul próximo ao numero da linha. Enquanto os pontos de interrupção que você atingiu têm uma flecha verde dentro do círculo:

+ +

No painel de arquivo, no menu de contexto habilita você:

+ + + + + +
+

O surgimento de Popup de uma variável é novo no Firefox 28.

+
+ +

Se você passar o mouse em cima de uma variável, no painel de variáveis, aparece um popup mostrando a você o valor da variável atual:

+ +

Isso permite que você veja rapidamente uma variável sem sem ter que abrir e pesquisar o Painel de Variáveis

+ +

Barra de Ferramentas

+ +

A barra de ferramentas é composta por quatro seções:

+ + + +

Os quatro botões à esquerda executam as seguintes funções:

+ + + +

The call stack visualisation shows the call stack at the point execution is paused.

+ +

Script filter

+ +

The script filter enables you to search in all three of the debugger's panes. By prefixing the filter expression with one of several special characters, the filter provides various different functions.

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrefixFunction
NoneFilter the scripts shown in the source list pane.
!Search for the string across all files.
@Search for function definitions, across all files, containing the string.
#Search for the string in the file currently open in the source pane.
:Go to the line given in the file currently open in the source pane.
*Filter the variables shown in the variables pane.
+ +

These options are shown in a pop-up when you click in the filter, and they're also accessible from the context menu in the source pane. Prefixes can be combined to form more powerful queries, like "file.js:12", which will open file.js and highlight line 12, or "mod#onLoad", which will find the string onLoad in all files containing mod in their name. Hitting the Enter key after searching will cycle between the matches found.

+ +

Debugger settings

+ +

At the right-hand end of the toolbar are two more buttons. The first of these shows and hides the variables and events panes, and the second enables you to toggle various debugger settings:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto Prettify Minified Sources +

With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.

+ +
+

This option is new in Firefox 29.

+
+
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught ExceptionsIf 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 PropertiesEnabling this option adds a "Filter variables" search box to the variables panel, so that you can filter the displayed list of variables.
Show Variables Filter BoxDo not display non-enumerable JavaScript properties
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.
+ +
+
+ +

Variables pane

+ +

The variables pane is where you can examine, and modify, the internal state of the script as it's executing:

+ +

The variables pane shares its screen real estate with the events pane, and you can use the tabs at the top of the pane to switch between them.

+ +

Examining variables

+ +

Variables are grouped by scope: in Function scope you'll see the built-in arguments and this variables as well as local variables defined by the function like user and greeting. Similarly, in Global scope you'll see global variables you've defined, like greetme, as well as built-in globals like localStorage and console.

+ +

Each object can be expanded using a disclosure triangle to show its members.

+ +

Pointing your cursor at a variable's name displays a tooltip that provides additional information about the variable; for example, pointing at the greeting object displays "configurable enumerable writable". See Object.defineProperty() for details on what these property descriptors mean.

+ +

You can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings.

+ +

Modifying variables

+ +

You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on "Hi, Dr. Nick!" next to greeting, you can edit the value.

+ +

Watch expressions

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Highlight and inspect DOM nodes

+ +
+

This feature is new in Firefox 29.

+
+ +

If you hover over a DOM node in the Variables pane, it will be highlighted in the page:

+ +

Also, a target icon will appear next to the variableIf you click on this target, the Inspector will open with this DOM element selected.

+ +

Events pane

+ +
+

The events pane is new in Firefox 27.

+
+ +

The events pane lists all DOM events that currently have listeners bound from your code:

+ +

It shares its screen real estate with the variables pane, and you can use the tabs at the top of the pane to switch between them.

+ +

It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:

+ +
[event name] on [event target] in [source file]
+ +

If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.

+ +

How do I...?

+ +

Open the debugger

+ +

To open the debugger, select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or press Control-Shift-S (Command-Option-S on the Mac).

+ +

Find a source file

+ +

When the debugger's open, all the JavaScript source files are listed in the source list pane. You can browse the list to find the one you want, or search for a particular file using the script filter.

+ +

Find inside a file

+ +

To find a function, search for a string, or jump to a line in a file open in the source pane, you can use one of the special modifiers in the script filter.

+ +

Set a breakpoint

+ +

To set a breakpoint in a file open in the source pane:

+ + + +

Each breakpoint is shown in two places in the debugger:

+ + + +

The screenshot below shows breakpoints at lines 3 and 10 of the file:

+ +

+ +

Set a conditional breakpoint

+ +

To set a conditional breakpoint, activate the context menu while on the line you want to break at, and select "Add conditional breakpoint". Then enter the conditional expression in the popup that appears:

+ +

To edit the condition, or to add a condition to a normal breakpoint, activate the context menu and select "Configure conditional breakpoint":

+ +

+ +

Disable a breakpoint

+ +

To disable a breakpoint:

+ + + +

Disable/enable all breakpoints

+ +
+

This feature is new in Firefox 29.

+
+ +

To switch all breakpoints on or off, use the "Toggle all breakpoints" button in the Source list pane.

+ +

Break on a DOM event

+ +
+

This feature is new in Firefox 27.

+
+ +

If you're listening to a particular DOM event, you can tell the debugger to break when the event is triggered without having to track down the listener and set a breakpont manually.

+ +

First, open the events pane: click the button in the toolbar that opens the shared variables/events pane, then click the tab labeled "Events". The events pane will list all events for which you have assigned a listener:

+ +

Then check the box next to the event you want to break at.

+ +

When the event is triggered the code will break at the start of your listener.

+ +

Step through my code

+ +

When your code stops at a breakpoint, you can step through it using the four buttons on the left of the toolbar:

+ +

In order, the buttons are:

+ + + +

Use a source map

+ +

JavaScript sources are often combined and minified to make delivering them from the server more efficient. Increasingly, too, JavaScript running in a page is machine-generated, as when compiled from a language like CoffeeScript. By using source maps, the debugger can map the code being executed to the original source files, making debugging much, much easier.

+ +

To tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:

+ +

Of course, for this to work, you will need to have supplied a source map for the JavaScript running in the page. Do this by appending a comment directive to your source file:

+ +

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

+ +

Examine variables

+ +

When the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger:

+ +

Variables in global scope and in function, block, "with" scopes, etc. are listed separately, and you can expand objects to see their properties. You can also filter the variables shown using the "*" prefix in the script filter:

+ +

+ +

Modify variables

+ +

When the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. Just click on the variable's current value and you'll be able to type there:

+ +

+ +

Watch an expression

+ +

You can watch the value of a JavaScript expression using the "Add watch expression" function in the variables pane.

+ +

Debug mobile devices

+ +

To learn how to debug mobile devices, see the guide to remote debugging.

+ +

Black box a source

+ +

In modern web development, we often rely on libraries like jQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.

+ +

In versions of Firefox before Firefox 27, you can black box a source by clicking the eyeball icon next to the source in the source list pane:

+ +

+ +

From Firefox 27 onwards, enable or disable black boxing for a source by selecting the source in the source list pane and clicking the eyeball icon at the bottom left:

+ +

You can black box several sources at once by opening the developer toolbar and using the dbg blackbox command:

+ +

+ +

When a source is black boxed:

+ + + +

Pretty-print a minified file

+ +
+

Pretty-printing is new in Firefox 28.

+
+ +

To pretty-print a file that has been minified, open the minified file and click the icon that contains a pair of braces:

+ +

The file will now appear in a more readable format:

+ +

From Firefox 29 onwards, you can instruct the debugger to detect minified sources and pretty-print them for you automatically, by selecting "Auto Prettify Minified Sources" in the Debugger settings.

+ +

Access debugging in add-ons

+ +

The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):

+ + + +

Relevant files:

+ + + +

Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug 653545.)

+ +

Keyboard shortcuts

+ +

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

+ +

Global shortcuts

+ +

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

diff --git a/files/pt-br/tools/depurador/set_a_logpoint/index.html b/files/pt-br/tools/depurador/set_a_logpoint/index.html new file mode 100644 index 0000000000..0a9b75f07d --- /dev/null +++ b/files/pt-br/tools/depurador/set_a_logpoint/index.html @@ -0,0 +1,53 @@ +--- +title: Set a logpoint +slug: Tools/Depurador/Set_a_logpoint +translation_of: Tools/Debugger/Set_a_logpoint +--- +

{{ToolsSidebar}}

+ +

As vezes você quer ver um valor em seu código mas sem pausar a execução dele. Ao enves de encher seu código com vários console.log, você pode usar o novo tipo de breakpoint adicionado ao Firefox 67, o logpoint. Logpoints mostram uma mensagem no console sem a necessidade de pausar a execução do código.

+ +

O logpoint é especialmente util em casos onde parar a execução também quebrará a execução da reprodução de testes, como quando se está debugando uma janela popup, ou executando uma focus-related logic.

+ +

Para criar um logpoint:

+ +
    +
  1. Clique com o direitro em uma linha no painel de Debug e selecione Add log do context menu.
    2. +
+ +

+ +
    +
  1. Crie uma expresão inline. O resultado irá ser apresentado no console, toda vez que encontrar os logpoints. Você pode usar qualquer variável ou funcção disponível no escopo atual.
    2. +
+ +

+ +

Trabalhando com logpoints

+ +

Quando você set um logpoint, o indicador é roxo, ao enves de azul de um incondicional breakpoint ou laranja de um condicional breakpoint.

+ +

Você pode ver a lista de logpoits no painel lateral de Breakpoints.

+ +

+ +

Quando seu código encontra um logpoint, a mensagem que você definiu ira ser apresentada no console. Vou pode fazer isso facilmento vendo a mensagem abrindo um console dividido sob o debug. (Ou pressione s Esc ou selecione o menu elipsis (...) e clique em Show Split Console.)

+ +

+ +

Quando devo usar logpoints?

+ + + +

Veja também

+ + diff --git "a/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" "b/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" new file mode 100644 index 0000000000..6359eededd --- /dev/null +++ "b/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" @@ -0,0 +1,31 @@ +--- +title: Depuração Remota +slug: Tools/Depuração_Remota +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

Você pode usar as ferramentas de desenvolvedor do Firefox, no seu desktop, para depurar remotamente o código em execução: em um processo diferente no mesmo dispositivo, ou em um dispositivo completamente diferente. Para fazer isso, use o Firefox para atribuir a Caixa de Ferramentas ao processo remoto, e, então, a Caixa de Ferramentas será iniciada em sua própria janela. Neste momento terão as seguintes ferramentas de suporte à depuração remota:

+ + + +

Firefox para Android

+ +

Depurando Android remotamente descreve como conectar ao Firefox desktop um dispositivo Android pelo USB.

+ +

Firefox para Metro

+ +

Depurando Metro remotamente descreve como usar Firefox desktop para depurar código em execução no Windows 8 (Estilo Metro).

+ +

Firefox OS

+ +

Usando App Manager inclui instruções para conectar as ferramentas de desenvolvimento do Firefox ao simulador Firefox OS ou a um dispositivo Firefox OS.

+ +

Thunderbird

+ +

Depurando remotamente Thunderbird explica como uma combinação de Firefox e Thunderbird pode ser usada para depurar código em execução no Thunderbird.

diff --git a/files/pt-br/tools/devtoolsapi/index.html b/files/pt-br/tools/devtoolsapi/index.html new file mode 100644 index 0000000000..dc3e6e6219 --- /dev/null +++ b/files/pt-br/tools/devtoolsapi/index.html @@ -0,0 +1,834 @@ +--- +title: DevTools API +slug: Tools/DevToolsAPI +translation_of: Tools/DevToolsAPI +--- +
{{ToolsSidebar}}

{{ warning("The DevTools API is still WIP. If you notice any inconsistency, please let The Firefox Developer Tools Team know.") }}

+ +

While this api is currently work-in-progress, there are usable portions of page inspector and debugger that may be used currently.

+ +

 

+ +

Introduction

+ +

The DevTools API provides a way to register and access developer tools in Firefox.

+ +

In terms of User Interface, each registered tool lives in its own tab (we call one tab a panel). These tabs are located in a box we call a Toolbox. A toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked). A Toolbox (and all the tools it contains) is linked to a Target, which is the object the tools are debugging. A target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…).

+ +

In terms of code, each tool has to provide a ToolDefinition object. A definition is a JS light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool. The gDevTools global object provides methods to register a tool definition and to access tool instances. An instance of a tool is called a ToolPanel. The ToolPanel is built only when the tool is selected (not when the toolbox is opened). There is no way to "close/destroy" a ToolPanel. The only way to close a toolPanel is to close its containing toolbox. All these objects implement the EventEmitter interface.

+ +

API

+ +

gDevTools

+ +

The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet

+ +
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
+ +

Methods

+ +
+
+
registerTool(toolDefinition)
+
+
Registers a new tool and adds a tab to each existing toolbox.
+
Parameters:
+ toolDefinition {ToolDefinition} - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.
+
+
unregisterTool(tool)
+
+
Unregisters the given tool and removes it from all toolboxes.
+
Parameters:
+ tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.
+
+
registerTheme(themeDefinition)
+
+
Registers a new theme.
+
Parameters:
+ themeDefinition {ThemeDefinition} - An object that contains information about the theme.
+
+
unregisterTheme(theme)
+
+
Unregisters the given theme.
+
+ Parameters:
+ theme {ThemeDefinition|String} - The theme definition object or the theme identifier.
+
+
showToolbox(target [, toolId [, hostType [, hostOptions]]])
+
+
Opens a toolbox for given target either by creating a new one or activating an existing one.
+
Parameters:
+ target {Target} - The target the toolbox will debug.
+ toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.
+ hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See {{anch("HostType")}} for details.
+ hostOptions {Object} - An options object passed to the selected host. See {{anch("HostType")}} for details.
+
Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.
+
+
getToolbox(target)
+
+
Fetch the {{anch("Toolbox")}} object for the given target.
+
+ Parameters:
+ target {Target} - The target the toolbox is debugging.
+
+ Return value:
+ {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..
+
+
closeToolbox(target)
+
+
Closes the toolbox for given target.
+
Parameters:
+ target {Target} - The target of the toolbox that should be closed.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.
+
+
getDefaultTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.
+
+
getAdditionalTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.
+
+
getToolDefinition(toolId)
+
+
Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.
+
+ Parameters:
+ toolId {String} - The ID of the tool.
+
Return value:
+ A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.
+
+
getToolDefinitionMap()
+
+
Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.
+
+
getToolDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.
+
+
getThemeDefinition(themeId)
+
+
Fetch the ThemeDefinition object for the theme with the given id.
+
+ Parameters:
+ themeId {String} - The ID of the theme.
+
Return value:
+ A ThemeDefinition object if the theme exists, null otherwise.
+
+
getThemeDefinitionMap()
+
+
Returns a toolId → ThemeDefinition map for available themes.
+
+
getThemeDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of ThemeDefinition objects for avialble themes.
+
+ +

Events

+ +

Following events are emitted by the gDevTools object via the {{anch("EventEmitter")}} interface.

+ +
+
+
tool-registered(toolId)
+
+
A new tool has been registered.
+
+
tool-unregistered(tool)
+
+
A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.
+
+
theme-registered(themeId)
+
+
A new theme has been registered.
+
+
theme-unregistered(theme)
+
+
A theme has been unregistered. The parameter is a ThemeDefinition object.
+
+
toolbox-ready(toolbox)
+
+
A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.
+
+
toolbox-destroy(target)
+
+
The toolbox for the specified target is about to be destroyed.
+
+
toolbox-destoyed(target)
+
+
The toolbox for the specified target has been destroyed.
+
+
{toolId}-init(toolbox, iframe)
+
+
A tool with the given ID has began to load in the given toolbox to the given frame.
+
+
{toolId}-build(toolbox, panel)
+
+
A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-ready(toolbox, panel)
+
+
A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-destroy(toolbox, panel)
+
+
A tool with the given ID is about to be destroyed. The panel is the object returned by the ToolDefinition.build() method.
+
+ +

Toolbox

+ +

A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.

+ +

Properties

+ +
+
+
target
+
+
Target. The Target this toolbox is debugging.
+
+
hostType
+
+
Toolbox.HostType. The type of the host this Toolbox is docked to. The value is one of the Toolbox.HostType constants.
+
+
zoomValue
+
+
The current zoom level of the Toolbox.
+
+ +

Constants

+ +

The Toolbox constructor contains following constant properties.

+ +
+
+
Toolbox.HostType.BOTTOM
+
+
Host type for the default toolbox host at the bottom of the browser window.
+
+
Toolbox.HostType.SIDE
+
+
Host type for the host at the side of the browser window.
+
+
Toolbox.HostType.WINDOW
+
+
Host type for the separate Toolbox window.
+
+
Toolbox.HostType.CUSTOM
+
+
Host type for a custom frame host.
+
+ +

Methods

+ +
+
+
getCurrentPanel()
+
+
Get the currently active {{anch("ToolPanel")}}.
+
+ Return value:
+ The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.
+
+
getPanel(toolId)
+
+
Get the {{anch("ToolPanel")}} for given tool.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ The {{anch("ToolPanel")}} object if the tool with the given toolId is active, otherwise undefined.
+
+
getPanelWhenReady(toolId)
+
+
Similar to getPanel() but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.
+
+
getToolPanels()
+
+
Returns a toolId → {{anch("ToolPanel")}} {{jsxref("Map")}} for currently loaded tools.
+
+
getNotificationBox()
+
+
Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.
+
+
loadTool(toolId)
+
+
Loads the tool with the given toolId in the background but does not activate it.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.
+  
+
+
selectTool(toolId)
+
+
Selects the tool with the given toolId.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.
+
+
selectNextTool()
+
+
Selects the next tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
selectPreviousTool()
+
+
Selects the previous tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
highlightTool(toolId)
+
+
Highlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to highlight.
+
+
unhighlightTool(toolId)
+
+
Unhighlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to unhighlight.
+
+
openSplitConsole()
+
+
Opens the split Console to the bottom of the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the Console has loaded.
+
+
closeSplitConsole()
+
+
Closes the split console.
+
+
toggleSplitConsole()
+
+
Toggles the state of the split console.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the operation has finished.
+
+
switchHost(hostType)
+
+
Switches the location of the toolbox
+
+ Parameters:
+ hostType {Toolbox.HostType} - The type of the new host.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the new host is ready.
+  
+
+
reloadTarget(force)
+
+
Reloads the current target of the toolbox.
+
+ Parameters:
+ force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.
+
+
zoomIn()
+
+
Increases the zoom level of the Toolbox document.
+
+
zoomOut()
+
+
Decreases the zoom level of the Toolbox document.
+
+
zoomReset()
+
+
Resets the zoom level of the Toolbox document.
+
+
setZoom(value)
+
+
Set the zoom level to an arbitrary value.
+
+ Parameters:
+ value {Number} - The zoom level such as 1.2.
+
+
destroy()
+
+
Closes the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is resolved once the Toolbox is destroyed.
+
+ +

Events

+ +

The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.

+ +
+
+
host-changed
+
+
The Host for this Toolbox has changed.
+
+
ready
+
+
The Toolbox is ready to use.
+
+
select(toolId)
+
+
A tool has been selected. This event is emitted before the corresponding {toolId}-selected event.
+
+
{toolId}-init(frame)
+
+
A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.
+
+
{toolId}-build(panel)
+
+
The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-ready(panel)
+
+
The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-selected(panel)
+
+
A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-destroy(panel)
+
+
A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.
+
+
destroy
+
+
The Toolbox is about to be destroyed.
+
+
destroyed
+
+
The Toolbox has been destroyed.
+
+ +

ToolDefinition

+ +

A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.

+ +

Methods

+ +
+
+
isTargetSupported(target)
+
+
A method that is called during toolbox construction to check if the tool supports debugging the given target.
+
+ Parameters:
+ target {Target} - The target to check.
+
+ Return value:
+ A boolean indicating if the tool supports the given target.
+
+
build(window, toolbox)
+
+
A method that builds the {{anch("ToolPanel")}} for this tool.
+
+ Parameters:
+ window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.
+ toolbox {Toolbox} - The {{anch("Toolbox")}} the tool is being built for.
+
+ Return value:
+ A {{anch("ToolPanel")}} for the tool.
+
+
onKey(panel, toolbox)
+
+
Optional. A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
+
+ Parameters:
+ panel {ToolPanel} - The {{anch("ToolPanel")}} for the tool.
+ toolbox {Toolbox} - The toolbox for the shortcut was triggered for.
+
+ Return value:
+ Undefined.
+
+ +

Properties

+ +

The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.

+ +
+
+
id
+
+
String, required. An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.
+
+
url
+
+
String, required. An URL of the panel document.
+
+
label
+
+
String, optional. The tool's name. If undefined the icon should be specified.
+
+
tooltip
+
+
String, optional. The tooltip for the tool's tab.
+
+
panelLabel
+
+
String, optional. An accessibility label for the panel.
+
+
ordinal
+
+
Integer, optional. The position of the tool's tab within the toolbox. Default: 99
+
+
visibilityswitch
+
+
String, optional. A preference name that controls the visiblity of the tool. Default: devtools.{id}.enabled
+
+
icon
+
+
String, optional. An URL for the icon to show in the toolbox tab. If undefined the label should be defined.
+
+
highlightedicon
+
+
String, optional. An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). Default: {icon}
+
+
iconOnly
+
+
Boolean, optional. If true, the label won't be shown in the tool's tab. Default: false
+
+
invertIconForLightTheme
+
+
Boolean, optional. If true the colors of the icon will be inverted for the light theme. Default: false
+
+
key
+
+
String, optional. The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.
+
+
modifiers
+
+
String, optional. {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.
+
+
preventClosingOnKey
+
+
Boolean, optional. If true the tool won't close if its keybinding is pressed while it is active. Default: false
+
+
inMenu
+
+
Boolean, optional. If true the tool will be shown in the Developer Menu. Default: false
+
+ +
+
String, optional. A label for the Developer Menu item. Default: {label}
+
+
accesskey
+
+
String, optional. {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.
+
+ +

Example

+ +

Here's a minimal definition for a tool.

+ +
let def = {
+  id: "my-tool",
+  label: "My Tool",
+  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
+  url: "about:blank",
+  isTargetSupported: target => true,
+  build: (window, toolbox) => new MyToolPanel(window, toolbox)
+};
+
+// Register it.
+gDevTools.registerTool(def);
+
+ +

TargetType

+ +

FIXME:

+ +

HostType

+ +

FIXME

+ +

ToolPanel

+ +

The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.

+ +

Methods

+ +
+
+
open()
+
+
Optional. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or toolbox.selectTool()) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.
+
+ Return value:
+ The method should return a {{domxref("Promise")}} that is resolved with the ToolPanel object once it's ready to be used.
+
+
destroy()
+
+
+

A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.

+ +

Return value:
+ A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.

+
+
+ +

Example

+ +

Here's a basic template for a ToolPanel implementation.

+ +
// In the ToolDefintion object, do
+//   build: (window, target) => new MyPanel(window, target),
+
+function MyPanel(window, target) {
+  // The window object that has loaded the URL defined in the ToolDefinition
+  this.window = window;
+  // The Target this toolbox is debugging.
+  this.target = target;
+
+  // Do synchronous initialization here.
+  window.document.body.addEventListener("click", this.handleClick);
+}
+
+MyPanel.prototype = {
+  open: function() {
+    // Any asynchronous operations should be done here.
+    return this.doSomethingAsynchronous()
+      .then(() => this);
+  },
+
+  destroy: function() {
+    // Synchronous destruction.
+    this.window.document.body.removeEventListener("click", this.handleClick);
+
+    // Async destruction.
+    return this.destroySomethingAsynchronosly()
+      .then(() => console.log("destroyed"));
+  },
+
+  handleClick: function(event) {
+    console.log("Clicked", event.originalTarget);
+  },
+};
+
+ +

EventEmitter

+ +

EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.

+ +

When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.

+ +
+

Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.

+
+ +

Methods

+ +

The following methods are available on objects that have been decorated with the EventEmitter interface.

+ +
+
+
emit(eventName, ...extraArguments)
+
+
Emits an event with the given name to this object.
+
+ Parameters:
+ eventName {String} - The name of the event.
+ extraArguments {...Any} - Extra arguments that are passed to the listeners.
+
+
on(eventName, listener)
+
+
Adds a listener for the given event.
+
+
off(eventName, listener)
+
+
Removes the previously added listener from the event.
+
+
once(eventName, listener)
+
+
Adds a listener for the event that is removed after it has been emitted once.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.
+
+ +

Examples

+ +

Here's a few examples using the {{anch("gDevTools")}} object.

+ +
let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!");
+
+// Attach a listener.
+gDevTools.on("netmonitor-init", onInit);
+
+// Remove a listener.
+gDevTools.off("netmonitor-init", onInit);
+
+// Attach a one time listener.
+gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => {
+  console.log("Network Monitor initialized once!", toolbox, netmonitor);
+});
+
+// Use the Promise returned by the once method.
+gDevTools.once("netmonitor-init").then(toolbox => {
+  // Note that the second argument is not available here.
+  console.log("Network Monitor initialized to toolbox", toolbox);
+});
+
+ +

ToolSidebar

+ +

To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:

+ +
    <splitter class="devtools-side-splitter"/>
+    <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+ +
 
+ +
A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.
+ +
 
+ +
If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.
+ +
 
+ +
If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)ToolSidebar constructor
void addTab(tabId, url, selected=false)Add a tab in the sidebar
void select(tabId)Select a tab
void hide()Hide the sidebar
void show()Show the sidebar
void toggle()Toggle the sidebar
void getWindowForTab(tabId)Get the iframe containing the tab content
tabId getCurrentTabID()Return the id of tabId of the current tab
tabbox getTab(tabId)Return a tab given its id
destroy()Destroy the ToolSidebar object
EventsDescription
new-tab-registeredA new tab has been added
{tabId}-readyTab is loaded and can be used
{tabId}-selectedTab has been selected and is visible
{tabId}-unselectedTab has been unselected and is not visible
showThe sidebar has been opened.
hideThe sidebar has been closed.
+ +

Examples

+ +

Register a tool

+ +
gDevTools.registerTool({
+  // FIXME: missing key related properties.
+  id: "inspector",
+  icon: "chrome://browser/skin/devtools/inspector-icon.png",
+  url: "chrome://browser/content/devtools/inspector/inspector.xul",
+  get label() {
+    let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
+    return strings.GetStringFromName("inspector.label");
+  },
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox, node) {
+    return new InspectorPanel(iframeWindow, toolbox, node);
+  }
+});
+
+ +

Open a tool, or select it if the toolbox is already open:

+ +
let target = TargetFactory.forTab(gBrowser.selectedTab);
+let toolbox = gDevTools.openToolbox(target, null, "inspector");
+
+toolbox.once("inspector-ready", function(event, panel) {
+  let inspector = toolbox.getToolPanels().get("inspector");
+  inspector.selection.setNode(target, "browser-context-menu");
+});
+
+ +

Add a sidebar to an existing tool:

+ +
let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
+sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
+sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
+sidebar.show();
+
diff --git a/files/pt-br/tools/editor_de_estilos/index.html b/files/pt-br/tools/editor_de_estilos/index.html new file mode 100644 index 0000000000..903428edc7 --- /dev/null +++ b/files/pt-br/tools/editor_de_estilos/index.html @@ -0,0 +1,88 @@ +--- +title: Editor de Estilos +slug: Tools/Editor_de_Estilos +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}

O Editor de Estilos permite que você:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A Caixa de Ferramentas aparecerá na parte de baixo da janela do navegador, com o Editor de Estilos ativado:

+ +

+ +

Na esquerda (ou no topo, se sua janela estiver muito estreita) há uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) está a fonte para a folha de estilo que você selecionou no painel de folhas de estilo.

+ +

O painel de folha de estilos

+ +

O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estão sendo usadas no documento atual. Você pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. Você pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botão Salvar que está no canto inferior direito de cada lista de folha de estilos.

+ +

O painel editor

+ +

Na direita fica o painel editor. Aqui é onde o código da folha de estilo seleciona fica disponível para você ler e editar. Quaisquer alterações que você faz são aplicadas na página em tempo real. Isso faz com que fique realmente fácil experimentar, revisar e testar mudanças na aparença de sua página. Uma vez que você estiver satisfeito com suas mudanças, você pode salver uma cópia localmente clicando no botão Salvar que fica no painel de folha de estilos.

+ +

O editor provê números de linha e marcação de sintaxe para ajudar a ficar fácil ler seu CSS. Veja Utilizando o Editor de Fonte para documentação do editor em si, incluindo atalhos de teclado úteis.

+ +

O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fácil trabalhar em páginas que foram otimizadas.

+ +

Autocompletar

+ +
+

Autocompletar é novo no Firefox 29.

+
+ +

Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerá uma lista de sugestões.

+ +

Você pode desligar isso em  Configurações do Editor de Estilos.

+ +

Criando e importando folhas de estilos

+ +

Você pode cirar uma nova folha de estilos clicando no botão Novo na barra de ferramentas. Então você pode começar a inserir CSS em um novo editor e ver como os novos estilos são aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.

+ +

Você pode carregar um estilo do disco e aplicá-lo na página clicando no botão Importar.

+ +

Suporte ao mapa de fonte

+ +
+

Suporte ao mapa da fonte de CSS é uma funcionalidade nova no Firefox 29.

+
+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Desenvolvedores web frequentemente criam arquivos CSS usando pré-processadores como Sass, Less, ou Stylus. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se você fizer isso,  ser capaz de ver e editar CSS gerado não é útil, porque o código que você mantém é a sintaxe do pré-processador, não o CSS gerado. Então você precisaria editar o CSS gerado e então manualmente descobrir como reaplicar na fonte original.

+ +

Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agté sua fonte original, então mostrá-la e permitir que você edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.

+ +

Isso significa que se você usa, por exemplo, Sass, então o editor irá mostrá-lo e permitir que você edite arquivos Sass, ao invés do CSS gerado por ele:

+ +

Para isso funcionar, você deve:

+ + + +

Vendo as fontes originais

+ +

Agora, se você marcar "Mostrar fontes originais"  nas Configurações do Editor de Estilos, os links próximos as regras de CSS em ver Regras irão levar as fontes originais no Editor de Estilos.

+ +

Editando fontes originais

+ +

Você pode também editar fontes originais no Editor de Estilos e ver os resultas aplicados na página imediatamente. Para isso funcionar há dois passos extra:

+ +

Primeiro, configure seu pré-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass você pode fazer isso simplesmente passando a opção --watch:

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

Em seguida, salve a fonte original no Editor de Estilos clicando no botão Salvar, perto do arquivo para então salvar o arquivo original.

+ +

Agora quando você faz mudanças no arquivo fonte no Editor de Estilos é gerado um novo CSS você pode ver as mudanças em tempo real.

+ +

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

diff --git a/files/pt-br/tools/eyedropper/index.html b/files/pt-br/tools/eyedropper/index.html new file mode 100644 index 0000000000..effd65b84d --- /dev/null +++ b/files/pt-br/tools/eyedropper/index.html @@ -0,0 +1,47 @@ +--- +title: Eyedropper +slug: Tools/Eyedropper +tags: + - CSS + - Design + - Eyedropper + - colors +translation_of: Tools/Eyedropper +--- +
{{ToolsSidebar}}
+

O Eyedropper é novidade no Firefox 31.

+
+ +

A ferramenta Eyedropper permite que você selecione cores na página atual. Funciona como uma lupa através da página, permitindo que você selecione com uma precisão de pixels. Abaixo da lupa é mostrado o valor da cor do pixel atual, baseado na representação selecionada em Settings > Inspector > Default color unit:

+ +

Você pode usar para as seguintes finalidades:

+ + + +

Copiando a cor para a clipboard

+ +

Abra o Eyedropper usando uma das seguintes maneiras:

+ + + +

A medida que você movimenta o mouse através da página, você verá o valor da cor atual sendo alterado no Eyedorpper. Ao clicar, a cor atual será copiada à área de trasnferência.

+ +

{{EmbedYouTube("xf2uk6UyRB8")}}

+ +

Alterando o valor de uma cor no visualizador de regras. 

+ +

Valores de cores que aparecem nas regras do Inspetor possuem amostras de cores próximas a elas: clicar na amostra habilita uma popup de seleção de cores. Desde o Firefox 31, a popup possui um ícone do eyedropper: clique neste ícone para ativar o Eyedropper.

+ +

Assim, quando você clicar no Eyedropper, a cor no visualizador de regras estará atribuída com o valor selecionado.

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Keyboard shortcuts

+ +

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

diff --git a/files/pt-br/tools/index.html b/files/pt-br/tools/index.html new file mode 100644 index 0000000000..46d40c34ff --- /dev/null +++ b/files/pt-br/tools/index.html @@ -0,0 +1,189 @@ +--- +title: Ferramentas do Firefox para desenvolvedores +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +
Examine, edite e depure HTML, CSS e JavaScript no computador e no celular
+ +
Instalar o Firefox Developer Edition + +

Quais as novidades no Firefox Developer Edition?

+ +

O Firefox Developer Edition é a versão do Firefox para desenvolvedores, com as mais recentes funcionalidades e ferramentas de desenvolvimento experimentais. Atualmente a Developer Edition inclui as seguintes atualizações para as ferramentas de desenvolvimento:

+ + +
+ +
Compartilhe suas ideias + +

Compartilhe suas ideias

+ +

Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.

+
+ +

+ +
+
+

Criando

+ +

Ferramentas de criação de sites e aplicativos web.

+ +
+
Scratchpad
+
Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.
+
Style Editor
+
Visualize e edite estilos CSS na página atual.
+
Shader Editor
+
Visualize e edite vértices e fragmentos de shaders usados pelo WebGL.
+
Web Audio Editor
+
Examine o gráfico de nós de audio num contexto de audio, e modifique seus parâmetros.
+
+
+ +
+

Explorando e depurando

+ +

Examine, explore e depure sites e aplicativos web.

+ +
+
Web Console
+
Visualize os logs de execução da página e interaja com ela usando JavaScript.
+
Page Inspector
+
Visualize e modifique a página HTML e CSS.
+
JavaScript Debugger
+
Pare, analise e modifique o JavaScript em execução na página.
+
Network Monitor
+
Acompanhe as requisições de feitas à rede enquanto a página é carregada.
+
Storage Inspector
+
Inspecione cookies, armazenamento local, indexedDB e armazenamento da sessão presentes na página.
+
Developer Toolbar
+
Uma interface de linha de comando para as ferramentas de desenvolvimento.
+
3D View
+
Visualização da página em 3D.
+
Eyedropper
+
Obtenha o código da cor de um determinado pixel da página.
+
Trabalhando com iframes
+
Como trabalhar com iframe.
+
+
+
+ +
+
+

Móvel

+ +

Ferramentas para desenvolvimento mobile.

+ +
+
Gerenciador de app
+
Design e desenvolvimento de apps para FirefoxOS +
+
WebIDE
+
O substituto do App Manager, disponível a partir da versão 33 do Firefox.
+
Firefox OS Simulador
+
Simule e faça debug de sua aplicação para o Firefox OS no desktop, sem a necessidade de um aparelho com Firefox OS instalado.
+
Responsive Design View
+
Veja como o seu site ou app responde a diferentes resoluções de tela, sem precisar ficar redimensionando a janela do browser.
+
Debugging no Firefox for Android
+
Developer tools para o Firefox for Android.
+
+
+ +
+

Performance

+ +

Diagnosticando e corrigindo problemas.

+ +
+
Performance tool
+
Renovada o perfil JS e o cronograma de taxa de quadros
+
+ +
+
JavaScript Profiler
+
Descubra onde seu código JavaScript está gastando seu tempo.
+
Paint Flashing Tool
+
Destaque as partes da página que são redesenhados em resposta a eventos.
+
Reflow Event Logging
+
Veja eventos de reflow no web console.
+
Network Performance
+
Veja quanto tempo as partes do seu site levam pra carregar.
+
+
+
+ +
+
+
+

Depurando no navegador

+ +

Por padrão, a ferramenta de desenvolvimento é ligada a uma página web ou web app. Mas você pode também conecta-los ao navegador como um todo. Isso é útil para o desenvolvimento para navegador e para add-ons.

+ +
+
Browser Console
+
Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.
+
Browser Toolbox
+
Anexe o Developer Tools para o próprio navegador.
+
+
+ +
+

Estendendo o devtools

+ +

As ferramentas de desenvolvimentos são desenhadas para serem extensíveis. Add-ons do Firefox podem acessar as ferramentas de desenvolvimento e os componentes que eles usam para estender ferramentas existentes e adicionar novas. Com o protocolo remoto de debugging você pode implementar seu próprio cliente de debugging e servidores, permitindo a você o debug de websites usando suas próprias ferramentas ou debuggando diferentes alvos usando as ferramentas do Firefox.

+ +
+
Remote Debugging Protocol
+
O protocolo usado para conectar o Firefox Developer Tools a um destino de debuggin como uma instância do Firefox ou um aparelho com Firefox OS.
+
Editor de código
+
Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.
+
A interface do Debugger
+
Uma API que permite que o código JavaScript observe a execução de outro código JavaScript. O Firefox Developer Tools usa essa API para implementar o debugger JavaScript.
+
Output do Web Console personalizado
+
Como estender e customizar o output do Web Console  e o Browser Console.
+
+
+
+ +
+

Mais recursos

+ +

Essa seção lista recursos que não são mantidos pela equipe do developer tools da Mozilla, mas que são largamente usados por desenvolvedores web. Nós temos incluído alguns add-ons do Firefox nessa lista, mas para uma lista completa veja a categoria “Web Development” em addons.mozilla.org.

+ +
+
+
+
Firebug
+
Uma ferramenta de desenvolvimento muito popular e poderosa, que inclue um debugger JavaScript, visualizador e editor de HTML e CSS, e um monitor de rede.
+
DOM Inspector
+
Inspeciona, navega e edita o DOM de páginas web ou janelas XUL.
+
Web Developer
+
Adiciona um menu e uma barra de ferramentas ao browser com várias ferramentas de desenvolvimento web.
+
+
+ +
+
+
Webmaker Tools
+
Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.
+
W3C Validators
+
O site W3C hospeda um número de ferramentas para checar a validação do seu website, incluindo HTML e CSS.
+
JSHint
+
Ferramenta de análise de código JavaScript.
+
+
+
diff --git a/files/pt-br/tools/inspetor_de_armazenamento/index.html b/files/pt-br/tools/inspetor_de_armazenamento/index.html new file mode 100644 index 0000000000..82215530a4 --- /dev/null +++ b/files/pt-br/tools/inspetor_de_armazenamento/index.html @@ -0,0 +1,137 @@ +--- +title: Inspetor de Armazenamento +slug: Tools/Inspetor_de_Armazenamento +tags: + - Armazenamento + - Armazenamento Local + - Ferramentas + - Guía + - Sidebar + - ferramentas do desenvolvedor + - inspetor de armazenamento + - seção +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +
+

O Inspetor de Armazenamento é novo no Firefox 34.

+ +

Inspetor de Armazenamento vem desabilitado por padrão. Habilite-o nas Configurações de Ferramentas do Desenvolvedor.

+
+ +

O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:

+ + + +

Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma visão read-only do armazenamento. Mas estamos trabalhando para permitir a você editar o conteúdo do armazenamento em futuros lançamentos.

+ +

Abrindo o Inspetor de Armazenamento

+ +

Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.

+ +

A  Caixa de Ferramentas vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.

+ +

+ +

Interface de Usuário do Inspetor de Armazenamento

+ +

A UI do Inspetor de Armazenamento é dividida em três componentes principais:

+ + + +

+ +

Árvore de armazenamento

+ +

A árvore de armazenamento lista todos os tipos de armazenamentos que o Inspetor de Armazenamento pode inspecionar. Para cada tipo, ele possui uma lista de todas as possíveis origens disponíveis. Uma origem é um domínio ou um hostname para diferentes tipos de armazenamento. Para cookies, o protocolo não diferencia a origem. Para indexedDB ou armazenamento local uma origem é uma combinação de protocolo + hostname. Por exemplo, "http://mozilla.org" e "https://mozilla.org" são duas origens diferentes então itens de armazenamento local não podem ser compartilhados entre eles.

+ +

+ +

Enquanto cookies, armazenamento local e itens de armazenamento de sessão são diretamente associados a uma origem, para indexedDB a hierarquia tem mais níveis. Todos os itens de indexedDB são associados com um objeto de armazenamento que é então associado a um banco de dados, e finalmente um banco de dados é associado a uma origem.

+ +

Você pode clicar em cada item da árvore para expandir ou contrair seus filhos. A árvore funciona em tempo real, então se um novo objeto for adicionado (adicionando um iframe, por exemplo), ele vai ser adicionado para cada tipo de armazenamento automaticamente. Clicar nos itens da árvore vai mudar os dados de na tabela à direita. Por exemplo, clicar em uma origem que é uma filha do tipo armazemento de Cookies  mostrará todos os cookies pertencentes àquele domínio.

+ +

Widget tabela

+ +

O widget tabela é um local onde todos os itens correspondentes ao item da árvore selecionada (seja uma origem, ou banco de dados) são listados. Dependendo do tipo de armazenamento  e do item da árvore, o número de colunas pode variar.

+ +

Todas as colunas no Widget Tabela são redimencionáveis e podem ser ocultados via menu de contexto no cabeçalho da tabela até que apenas duas colunas estejam visíveis.

+ +

+ +

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. The table then has the following columns:

+ + + +

Local storage / Session storage

+ +

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.

+ +

IndexedDB origin

+ +

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:

+ + + +

IndexedDB Database

+ +

When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:

+ + + +

+ +

IndexedDB object store

+ +

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.

+ + + +

Quando você seleciona qualquer linha na tabela de ferramentas de armazenamento, a sidebar é mostrada com detalhes sobre a linha selecionada. Se um cookie é selecionado, a sidebar listará todos os detalhes sobre o cookie selecionado.

+ +

A sidebar pode analisar o valor do cookie, um ítem do armazenamento local ou um ítem do IndexedDB e covertê-lo em um objeto significante ao invés de apenas uma string. Por exemplo, um JSON convertido como '{"foo": "bar"}' é mostrado como a origem JSON {foo: "bar"}, o valor da chave separado como 1~2~3~4 é mostrado como um array [1, 2, 3, 4]. Abaixo há algumas telas mostrando exemplos de diferentes tipos de valores analisados:

+ +

+ +

Um JSON convertido em string sendo mostrado como o JSON original na seção parsed value da sidebar

+ +

+ +

Uma string contendo um par chave-valor sendo mostrada como JSON na seção parsed value da sidebar

+ +

+ +

Uma string contendo chave e valor separados sendo mostrada como um Array na seção parsed value da sidebar

diff --git a/files/pt-br/tools/keyboard_shortcuts/index.html b/files/pt-br/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..273bb3c263 --- /dev/null +++ b/files/pt-br/tools/keyboard_shortcuts/index.html @@ -0,0 +1,968 @@ +--- +title: Atalhos do Teclado +slug: Tools/Keyboard_shortcuts +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}

Essa página Lista todos os atalhos de teclados para usar com as ferramentas de desenvolvedor dentro do Firefox.

+ +

A primeira seção lista o atalho para abrir cada ferramenta e a segunda seção lista atalhos que são aplicáveis à própria caixa de ferramentas. Depois disso há uma seção para cada ferramenta, que lista os atalhos que você pode usar dentro dessa ferramenta.

+ +

Por que as chaves de acesso são dependentes do local, eles não estão documentadas neste página.

+ +

Ferramentas de abertura e fechamento

+ +

Esses atalhos funcionam na janela principal do navegador para abrir a ferramenta especificada. Para ferramentas que são hospedados na caixa de ferramentas, eles trabalham para fechar a ferramenta se estiver ativo. Para ferramentas como o Console do navegador que abrir em uma nova janela, você tem que fechar a janela para fechar a ferramenta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Abre o Toolbox (com a ferramenta mais recente ativado)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Traz o Toolbox para primeiro plano (se a caixa de ferramentas está em uma janela separada e não em primeiro plano)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Fechar Toolbox (se a caixa de ferramentas está em uma janela separada e está em primeiro plano)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Abre o Web console1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Alternar InspetorCtrl + Shift + ICmd + Opt + ICtrl + Shift + I
Abre o DebuggerCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre o Editor de Estilo (CSS)Shift + F7Shift + F71Shift + F7
Abre o Desempenho da PáginaShift + F5Shift + F51Shift + F5
Abre o MonitorCtrl + Shift + QCmd + Opt + QCtrl + Shift + Q
Altera a Barra de DesenvolvedorShift + F2Shift + F21Shift + F2
Altera a Visualização de Design ResponsivoCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre o Console do navegador2Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre o Console do Navegador (Apartir do Firefox 39)Ctrl + Alt +Shift + ICmd + Opt +Shift + ICtrl + Alt +Shift + I
Abre o ScratchpadShift + F4Shift + F4Shift + F4
Abre o WebIDEShift + F8Shift + F8Shift + F8
Inspetor de Armazenamento3Shift + F9Shift + F9Shift + F9
+ +

1. Ao contrário das outras ferramentas hospedadas na caixa de ferramentas, esse atalho também não fecha o Web Console. Em vez disso, concentra-se na linha de comando do Web Console. Para fechar o Web Console, use o atalho caixa de ferramentas global de Ctrl+Shift+I (Cmd+Opt+I no MAC).

+ +

2. Até o Firefox 38, quando o navegador Console estava oculta por uma janela do Firefox normal, a mesma combinação de teclas fecha o Console do Navegador. Do Firefox 38 em diante, se o Console do Navegador está oculta por uma janela do Firefox normal, esta combinação de teclas traz o navegador Console de volta ao topo e se concentra nele.

+ +

3. A ferramenta está desativado por padrão, de modo que o atalho não iria funcionar até que seja ativada a partir do Painel de ajustes

+ +

Caixa de Ferramentas

+ +
+

Estes atalhos funcionam sempre que o toolbox estiver aberto, não importando qual ferramenta esteja ativa.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Navega pelas ferramentas da esquerda para direitaCtrl + ]Cmd + ]Ctrl + ]
Navega pelas ferramentas da direita para esquerdaCtrl + [Cmd + [Ctrl + [
Troca entre a ferramenta ativa e configuraçõesCtrl + Shift + OCmd + Shift + OCtrl + Shift + O
Troca entre a ferramenta ativa e configurações (no no Firefox 43)F1F1F1
+

Alterna a caixa de ferramentas entre os dois modos de posicionamento da caixa de ferramentas (novo no Firefox 41).

+ 		Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
Aparece e desaparece o console (exceto quando já está na aba console)ESCESCESC
+
+ +
+

Estes atalhos funcionam em todas as ferramentas que estão disponíveis na caixa de ferramentas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Aumentar o tamanho da fonteCtrl + +Cmd + +Ctrl + +
Diminuir o tamanho da fonteCtrl + -Cmd + -Ctrl + -
Voltar fonte para o tamanho normalCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Editor de Código

+ +
+

Esta tabela lista todos os atalhos padrões do editor de código.

+ +

Na seção preferências do editor em configurações das ferramentas de desenvolvimento, você pode escolher usar as associações do teclado do Vim, Emacs, ou Sublime Text.

+ +

Para selecionar este, acesse about:config, selecione configurações devtools.editor.keymap, e adicione "vim" ou "emacs", ou "sublime" para esta configuração. Se você fazer isso, as associações de tecla serão usadas para todas ferramentas da caixa de ferramentas que utilizam o editor de código. É necessário reabrir o editor de código para as configurações terem efeito.

+ +

A partir do Firefox 33, as configurações mencionadas acima podem ser realizadas nas configurações das ferramentas do desenvolvedor no na seção Editor de Preferências.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
Ir para a linhaCtrl + JCmd + JCtrl + J
Encontrar no arquivoCtrl + FCmd + FCtrl + F
Buscar novamenteCtrl + GCmd + GCtrl + G
Selecionar tudoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
ColarCtrl + VCmd + VCtrl + V
DesfazerCtrl + ZCmd + ZCtrl + Z
RefazerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Desfazer IdentarShift + TabShift + TabShift + Tab
Mover linha(s) acimaAlt + UpAlt + UpAlt + Up
Mover linha(s) abaixoAlt + DownAlt + DownAlt + Down
Comentar/descomentar linha(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspetor de Página

+ +
+ + + + + + + + + + + + + + + +
ComandoWindowsOS XLinux
+

Abrir o Inspetor

+ 		Ctrl + Shift + CCmd + Opt + CCtrl + Shift + C
+ +

HTML pane

+ +

These shortcuts work while you're in the Inspector's HTML pane.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
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 attributeEnterEnterEnter
Hide/show the selected nodeHHH
Focus on the search box in the HTML paneCtrl + FCmd + FCtrl + F
Edit as HTMLF2F2F2
+ +

CSS pane

+ +

These shortcuts work when you're in the Inspector's CSS pane.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
Step forward through properties and valuesTabTabTab
Step backwards through properties and valuesShift + TabShift + TabShift + Tab
Increment selected value by oneUp arrowUp arrowUp arrow
Decrement selected value by oneDown arrowDown arrowDown arrow
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
+
+ +

Debugger

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
Open the DebuggerCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Search in the current source using the script filterCtrl + FCmd + FCtrl + F
Find next in the current sourceEnter / Up arrowEnter / Up arrowEnter / Up arrow
Find previous in the current sourceShift + Enter / Down arrowShift + Enter / Down arrowShift + Enter / Down arrow
Search in all sources using the script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Search for scripts by nameCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Search for function definitionsCtrl + DCmd + DCtrl + D
Filter variables when execution is pausedCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Resume execution when at a breakpointF8F81F8
Step overF10F101F10
Step intoF11F111F11
Step outShift + F11Shift + F111Shift + F11
Toggle breakpoint on the currently selected lineCtrl + BCmd + BCtrl + B
Toggle conditional breakpoint on the currently selected lineCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Add selected text to Watch expressionsCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Go to line using the script filterCtrl + LCmd + LCtrl + L
Search using the script filterCtrl + OCmd + OCtrl + O
+ +

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

+
+ +

Web Console

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
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 outputCtrl + LCtrl + LCtrl + L
+ +

Command line interpreter

+ +

These shortcuts apply when you're in the command line interpreter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
Scroll to start of console output (new in Firefox 34, and only if the command line is empty)HomeHomeHome
Scroll to end of console output (new in Firefox 34, and 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 backwards 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 expressionReturnReturnReturn
Add a new line, for entering multiline expressionsShift + ReturnShift + ReturnShift + Return
+ +

Autocomplete popup

+ +

These shortcuts apply while the autocomplete popup is open:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
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 suggestions (new in Firefox 34)HomeHomeHome
Scroll to end of autocomplete suggestions (new in Firefox 34)EndEndEnd
+
+ +

Style Editor

+ + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
Open the Style EditorShift + F7Shift + F7Shift + F7
Open auto completion popupCtrl + SpaceCmd + SpaceCtrl + Space
+ +
+

Scratchpad

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
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 suggestions (new in Firefox 32)Ctrl + SpaceCtrl + SpaceCtrl + Space
Show inline documentation (Firefox 32 only)Shift + SpaceShift + SpaceShift + Space
Show inline documentation (Firefox 33 onwards)Ctrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

Eyedropper

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsOS XLinux
Select the current colorEnterEnterEnter
Dismiss the EyedropperEscapeEscapeEscape
Move by 1 pixelArrow keysArrow keysArrow keys
Move by 10 pixelsShift + arrow keysShift + arrow keysShift + arrow keys
+
+ +

 

diff --git a/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html new file mode 100644 index 0000000000..005813bc8f --- /dev/null +++ b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html @@ -0,0 +1,38 @@ +--- +title: Medir uma porção da página +slug: Tools/Medir_uma_porcao_da_pagina +tags: + - DevTools + - Exibir coordenadas + - Ferramentas de estilo + - Medir com o mouse + - ferramentas do desenvolvedor + - régua +translation_of: Tools/Measure_a_portion_of_the_page +--- +
{{ToolsSidebar}}
+ +

Novidade do Firefox 59.

+ +

Desde o Firefox 59, você pode medir uma área específica da página web ao utilizar a ferramenta de medida de porção da página.

+ +

Esta ferramenta está oculta por padrão. Para habilitar o seu botão faça:

+ + + +

Você verá o botão da ferramenta de medida de porção da página na parte superior direita da tela DevTools, no mesmo local dos botões de opções e configurações do mesmo.

+ +

+ +

Quando você quiser utilizar a ferramenta, clique em seu botão. A partir de agora, quando você passar o mouse sobre a página web, você verá que o cursor do mouse será em formato de cruz e a sua coordenada atual será exibida ao lado do cursor.

+ +

+ +

Quando você manter pressionado o botão esquerdo do mouse e arrastá-lo, será desenhado um retângulo, com as suas dimensões  X,Y e diagonal sendo exibidas. A unidade de medida se dá em pixels.

+ +

Quando você soltar o botão do muose, o retângulo permanecerá exibido em tela até que você clique novamente dentro da página web, isso permite que durante esse meio tempo, você possa efetuar screenshots da tela, tomar os dados exibidos para anotações externas, etc.

+ +

diff --git a/files/pt-br/tools/memory/index.html b/files/pt-br/tools/memory/index.html new file mode 100644 index 0000000000..9dce9be076 --- /dev/null +++ b/files/pt-br/tools/memory/index.html @@ -0,0 +1,60 @@ +--- +title: Memory +slug: Tools/Memory +translation_of: Tools/Memory +--- +
{{ToolsSidebar}}

A ferramenta de memória permite que você tire um snapshot da aba atual de memória heap. Então fornece um número de visualizações do heap que lhe mostrar quais objetis account for memory usage and exactly where in your code you are allocating memory.

+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

Básico

+ +
+ +
+ +
+

Analisando snapshots

+ +
+

A visualização do mapa de arvore é nova no Firefox 48, and the Dominators view is new in Firefox 46.

+
+ +

Uma vez que você tirou um snapshot, existem três principais visualizações que a ferramenta de Memória fornece:

+ + + +

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

+ +

Exemplos usados na documentação da Memory took.

+ +
+ +
diff --git a/files/pt-br/tools/modo_design_adaptavel/index.html b/files/pt-br/tools/modo_design_adaptavel/index.html new file mode 100644 index 0000000000..a5b6935fd3 --- /dev/null +++ b/files/pt-br/tools/modo_design_adaptavel/index.html @@ -0,0 +1,121 @@ +--- +title: Modo Design Adaptável +slug: Tools/Modo_Design_Adaptavel +tags: + - Desenvolvimento Web + - Design + - Design Adaptável + - Design Responsivo + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox + - Guia(2) + - Guide + - Guía + - 'I10n:priority' + - Responsive Design + - Tools +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +
+
Designs Responsivos se adaptam a diferentes tamanhos de tela para fornecer uma apresentação que seja adequada para diferentes tipos de dispositivos, como telefones celulares ou tablets. O Modo de Design Adaptável tornar mais fácil de ver como seu site ou aplicativo web vai olhar para diferentes tamanhos de tela.
+
+ +

{{EmbedYouTube("LBcE72sG2s8")}}

+ +
+
A imagem abaixo mostra uma página na versão móvel da Wikipedia visto com uma área de 320 por 480 de conteúdo.
+
+ +

+ +

O Modo de Design Adaptável é conveniente porque você pode rapidamente e precisamente alterar o tamanho da área de conteúdo.
+
+ Claro, você pode simplesmente redimensionar a janela do navegador: mas diminuir a janela do navegador torna menor todas as suas outras abas menores também, e pode fazer a interface do navegador ficar muito mais difícil de usar.
+
+ Enquanto o Modo de Design Adaptável estiver ativado, você pode continuar a navegação, como faria normalmente na área de conteúdo redimensionada.

+ +

Ativando e Desativando

+ +

Existem três maneiras de ativar o Modo de Design Adaptável:

+ + + +

e três maneiras de retirar o Modo Design Adaptável:

+ + + +

Redimensionamento

+ +

Você pode redimensionar a área de contéudo de duas maneiras:

+ + + +

Se você redimensionar usando clique-e-arraste você pode manter pressionada a tecla Control (Cmd no Max OS X) para abrandar a velocidade com que a área é redimensionado. Isto faz com que seja mais fácil para ajustar o tamanho precisamente.

+ +
+

Controles do Modo Design Adaptável

+ +

Na parte superior da janela em que o Modo Design Adaptável exibe a página, existem cinco controles:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Close (Fechar)Fechar Modo Design Adaptável e retornar à navegação normal
+

Select size (Selecionar o tamanho)

+ 		+
+
Escolher entre uma série de largura predefinida x combinações de altura, ou definir o seu próprio.
+ + +
Firefox 33 em diante, os números exibidos aqui são editáveis diretamente, assim você pode facilmente definir dimensões personalizadas.
+
+
Portrait/Landscape (Retrato/Paisagem) +
+
Alterne a tela entre visualização retrato e paisagem.
+
+
+

Simulate touch events (Simular eventos de toque)

+ 		+
+
Ativar/desativar simulação de eventos de toque: enquanto a simulação de eventos de toque está habilitada, eventos de mouse são traduzidos em eventos de toque.
+
+
+

Take screenshot (Captura de Tela)

+ 		Tira uma captura de tela da área de conteúdo. +
Capturas de Tela são salvas para o local de download padrão do Firefox.
+
+
diff --git a/files/pt-br/tools/network_monitor/index.html b/files/pt-br/tools/network_monitor/index.html new file mode 100644 index 0000000000..04db23ec53 --- /dev/null +++ b/files/pt-br/tools/network_monitor/index.html @@ -0,0 +1,192 @@ +--- +title: Monitor de Rede +slug: Tools/Network_Monitor +tags: + - Depuração + - Desenvolvimento + - Ferramentas + - Guía + - Redes +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +

O Monitor de Rede mostra todas as solicitações realizadas por uma página, o quanto a solicitação demorou, entre outros detalhes. Ao ir no menu "Ferramentas do Desenvolvedor Web" e clicar em "Rede" o monitor irá aparecer na parte de baixo da janela.

+ +

+ +

Lista de Requisições de Rede

+ +

O Monitor de Rede irá mostrar as solicitações em uma tabela ao carregar uma página, cada requisição aparece em uma linha diferente:
+

+ +

A cada atualização, o monitor é limpo antes de mostrar as novas solicitções. Para modificar essa opção marque "Ativar logs persistentes" na Caixxa de Ferramentas.

+ +

Campos solicitados

+ +

Cada linha mostra:

+ + + +

Ao clicar no nome de uma das colunas, as requisições são organizadas pela coluna selecionada.

+ +

A partir do Firefox 30, se o arquivo for uma imagem, a linha mostrá uma miniatura da imagem, e ao por o apontador sobre o nome poderá visualizá-la um pouco maior:

+ +

+ +

Linha de Tempo

+ +

 A lista de requisição também mostra a linha de tempo para diferentes partes de cada requisição. Cada linha de tempo é dada pela posição horizontal em cada linha relativa a outra requisição de rede, entaão você pode ver o tempo total levado para carregar a página. Para mais detalhes sobre a cor do código usado aqui, veja a sessão Tempos.

+ +

Filtrando pelo Tipo de Conteúdo

+ +

Na parte inferior da janela uma linha de botões lhe abilita a filtrar requisições pelo tipo de conteúdo da resposta:

+ +

Na extrema direita há um botão chamado "Limpar": como você pode imaginar, ele permite limpar a lista de requisições de rede.

+ + + +

Clique-direito em uma linha da lista exibe um menu de contexto com as seguintes opções:

+ + + +

Editar e Reenviar

+ +

Esta opção abre um editor e lhe abilita a editar o método, a URL e os parametros da requisição, editar os cabeçalhos, e reenviar a requisição.

+ +

Copiar como cURL

+ +
+

Isto é novo no Firefox 31.

+
+ +

Esta opção copia a requisição de rede para a área de transferência como um comando cURL, de modo a você poder executá-lo em uma linha de comando. O comando pode incluir as seguintes opções:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Se o método não for GET ou POST
--dataPara parâmetros da requisição codificados para URL
--data-binaryPara parâmetros de requisição multipart
--http/VERSIONSe a versão HTTP não for 1.1
-ISe o método for HEAD
-H +

Um para cada cabeçalho de requisição.

+ +

Desde o Firefox 34, se o cabeçalho "Accept-Encoding" está presente, o comando cURL incluirá --compressed em vez de -H "Accept-Encoding: gzip, deflate". Isto significa que a resposta será automaticamente descomprimida.

+
+ +

Detalhes de Requisições de Rede

+ +

O clique em uma linha exibe um novo painel à direita do monitor de rede, que dá informações mais detalhadas sobre a requisição.

+ +

As abas no topo deste painel lhe permitem alternar entre cinco páginas diferentes:

+ + + +

Do Firefox 30 em diante, há uma sexta página que aparece se o tipo de conteúdo é HTML, a página Preview.

+ +

Um clique no ícone à esquerda das abas fecha o painel e retorna à visão de lista.

+ +

Headers

+ +

Esta aba lista informações básicas sobre a requisição incluindo URL e código de status, e também os cabeçalhos HTTP de requisição e resposta que foram enviados:

+ +

Você pode filtrar os cabeçalhos que são exibidos:

+ +

+ +

Cookies

+ +

Esta aba lista detalhes completos de qualquer cookie enviado com a requisição ou a resposta:

+ +

Asim como os Headers, você pode filtrar a lista de cookies exibidos.

+ +

Params

+ +

Esta aba exibe os parâmetros de GET e os dados de POST de uma requisição:

+ +

+ +

Response

+ +

O conteúdo completo da resposta. Se a resposta é HTML, JS, ou CSS, ela será mostrada como texto:

+ +

Se a resposta for JSON, será exibida como um objeto inspecionável:

+ +

Se a resposta é uma imagem, a aba exibe uma amostra:

+ +

+ +

Timings

+ +

A aba Timings tem uma visão mais detalhada, anotada, da barra da linha do tempo para a requisição, mostrando a divisão do tempo total entre os vários estágios:

+ +

Preview

+ +
+

Este recurso é novo no Firefox 30.

+
+ +

Do Firefox 30 em diante, se o tipo de arquivo é HTML uma sexta aba aparece, rotulada de "Preview". Ela renderiza o HTML:

+ +

+ +

Análise de Desempenho

+ +
+

A ferramenta de análise de desempenho é nova no Firefox 29.

+
+ +

Do Firefox 29 em diante, o Monitor de Rede inclui uma ferramenta de análise de desempenho, para ajudar a lhe mostrar quanto tempo o navegador levou para descarregar as diferentes partes de seu sítio.
+
+ Para executar a ferramenta de análise de desempenho clique no ícone de cronômetro na barra de ferramentas, no rodapé do Monitor de Rede:

+ +

(Alternativamente, se você acabou de abrir o Monitor de Rede e ele ainda não está populado com a lista de requisições, você terá o ícone de cronômetro na janela principal.)

+ +

O Monitor de Rede, então, carrega o sítio duas vezes: uma com o cache do navegador vazio e outra com o cache já preparado. Isto simula a primeira visita de um usuário ao seu sítio, e as visitas subsequentes. Ele exibe os resultados de cada execução lado a lado ou verticalmente, se a janela for estreita:

+ +

Os resultados de cada execução são sumarizados em uma tabela e em um gráfico de pizza. A tabela agrupa os recursos por tipo, e mostra o tamanho total de cada recurso e o tempo total que ele levou para carregá-los. O gráfico de pizza mostra o tamanho relativo de cada tipo de recurso.

+ +

Para voltar à lista de requisições de rede do Monitor de Rede clique no botão "Back" à esquerda.

+ +

Clicar em uma fatia da pizza leva você ao Monitor de Rede daquela execução, com um filtro automaticamente aplicado para ver só aquele tipo de recurso.

diff --git a/files/pt-br/tools/notas_de_lancamento/index.html b/files/pt-br/tools/notas_de_lancamento/index.html new file mode 100644 index 0000000000..fcfcc58fb3 --- /dev/null +++ b/files/pt-br/tools/notas_de_lancamento/index.html @@ -0,0 +1,427 @@ +--- +title: Notas de lançamento +slug: Tools/Notas_de_lancamento +tags: + - Notas de lançamento +translation_of: Mozilla/Firefox/Releases +--- +
{{ToolsSidebar}}

Firefox 53

+ + + +

Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53.

+ +

Firefox 52

+ + + +

All devtools bugs fixed between Firefox 51 and Firefox 52.

+ +

Firefox 51

+ + + +

All devtools bugs fixed between Firefox 50 and Firefox 51.

+ +

Firefox 50

+ + + +

All devtools bugs fixed between Firefox 49 and Firefox 50.

+ +

Firefox 49

+ + + +

All devtools bugs fixed between Firefox 48 and Firefox 49.

+ +

Firefox 48

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 47 and Firefox 48.

+ +

Firefox 47

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 46 and Firefox 47.

+ +

Firefox 46

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 45 and Firefox 46.

+ +

Firefox 45

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 44 and Firefox 45.

+ +

Firefox 44

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 43 and Firefox 44.

+ +

Firefox 43

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 42 and Firefox 43.

+ +

Firefox 42

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 41 and Firefox 42.

+ +

Firefox 41

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 40 and Firefox 41. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

+ +

Firefox 40

+ +

Highlights:

+ + + +

More:

+ + + +

Everything: all devtools bugs fixed between Firefox 39 and Firefox 40.

+ +

Firefox 39

+ +

Highlights:

+ + + +

All devtools bugs fixed between Firefox 38 and Firefox 39.

+ +

Firefox 38

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 37 and Firefox 38.

+ +

Firefox 37

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 36 and Firefox 37.

+ +

Firefox 36

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 35 and Firefox 36.

+ +

Firefox 35

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 34 and Firefox 35.

+ +

Firefox 34

+ +

Destaques:

+ + + +

All devtools bugs fixed between Firefox 33 and Firefox 34.

+ +

Firefox 33

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 32 and Firefox 33.

+ +

Firefox 32

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 31 and Firefox 32.

+ +

Firefox 31

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 30 and Firefox 31.

+ +

Firefox 30

+ +

Destaques:

+ + + +

Mais detalhes:

+ + + +

All devtools bugs fixed between Firefox 29 and Firefox 30.

+ +

Firefox 29

+ +

Firefox 29 Hacks post. Highlights:

+ + + +

Firefox 28

+ +

Firefox 28 Hacks post. Highlights:

+ + + +

Firefox 27

+ +

Firefox 27 Hacks post. Highlights:

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..26eb590aae --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,32 @@ +--- +title: Edit CSS filters +slug: Tools/Page_Inspector/How_to/Edit_CSS_filters +tags: + - CSS + - DevTools + - Ferramentas + - Filtros + - Inspetor de Página +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +
{{ToolsSidebar}}

propriedades do filter nas Rules view tem uma amostra de cinza e branco circular ao lado deles:

+ +

+ +

Clicando na amostra abre um editor de filtro:

+ +

Você pode adicionar, remover e editar os filtros, e arrastá-los para alterar a ordem em que eles são aplicados:

+ +

{{EmbedYouTube("yws01SEPTvg")}}

+ +

Salvar predefinições de filtro

+ +

Do Firefox 42 em diante, você também pode adicionar filtros para uma lista de predefinições:

+ +

Você pode salvar o filtro atual na lista de predefinições:

+ +

{{EmbedYouTube("bHcfLlZE8T8")}}

+ +

Em seguida, você pode aplicar filtros salvos para novos elementos:

+ +

{{EmbedYouTube("PK85L7ztQto")}}

diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html new file mode 100644 index 0000000000..b1c8414a5b --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html @@ -0,0 +1,26 @@ +--- +title: Examinando Eventos de Escuta +slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

+ +

+ +

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

+ +

Cada linha contém:

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..5779b9403f --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,216 @@ +--- +title: Examinar e editar CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Barra de Ferramentas + - CSS + - Estilos + - Ferramentas + - Firefox + - Guia(2) + - Inspetor + - Regras de CSS + - Utilidades +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}

Você pode examinar e editar CSS no painel CSS do Inspetor.

+ +

Analisar regras de CSS

+ +

A visualização das listas de todas regras que se aplicam a um elemento selecionado são ordenados das formas mais específica até a menos específica:

+ +

+ +

As regras também podem ser visualizadas pelo estilo de agente-visualizador (estilos que são aplicados pelo navegador), para ativar esta opção, a própria dever ser marcada nas configurações da barra de ferramentas. Note que essa configuração é independente da checkbox "Estilo do Navegador" na aba de visualização de estilos "Computado".

+ +

Do Firefox versão 44 em diante, todas as Regras do CSS são exibidas, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:

+ +

+ +

Regra de exibição

+ +

Cada regra é exibida como uma folha de estilo, com uma lista de seletores seguida de uma lista de declarações propriedade:valor;.

+ +

+ + + +

User-agent styles são exibidos com o fundo diferente, e o link com nome do arquivo e o número da linha contendo o prefixo (user agent):

+ +

+ +

Regras de Filtragem

+ +

Iniciado no Firefox 40, ela é uma caixa que fica no topo da vizualização das regras "Filter Styles":

+ +

Enquanto você digita:

+ + + +

Clique no "X" para fechar a caixa de pesquisa e remover os filtros.

+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Pesquisa restrita

+ +
+

Novo no Firefox 43

+
+ +

Por padrão, a caixa de pesquisa destaca todas as declaraçõs que contem qualquer parte do valor digitado. Por exemplo, pesquise por "color" irá destacar uma linha que tenha o valor digitado border-bottom-color e background-color bom como apenas color.:

+ +

+ +

Iniciado no Firefox 43, se você incluir aspas simples na pesquisa , dessa forma: `color`, a pesquisa será restringida a ter somente o que está entre aspas simples:

+ +

+ +

Mostrando pseudo-elementos

+ +

Do Firefox 41, a regra é exibir os seguintes pseudo-elementos, se forem aplicados ao elemento selecionado:

+ +

::after
+ ::backdrop (Novo no Firefox 46)
+ ::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

+ +

Se o elemento selecionado for um pseudo-elemento aplicado a ele, ele mostrará antes do elemento selecionado porém oculto por um triângulo de divulgação:

+ +

+ +

Clicando no triângulo irá mostrar os elementos:

+ +

+ +

Configuração :hover, :active, :focus

+ +

Do Firefox 41, ele é um novo botão a direita da caixa de filtros:

+ +

Clique no botão para ver três checkboxes, que você pode usar para {{cssxref(":hover")}}, {{cssxref(":active")}} e {{cssxref(":focus")}} pseudo-classes para o elemento selecionado:

+ +

Apesar desse botão ser novo no Firefox 41, o recurso já existia em versões anteriores do Firefox. Poderia - e ainda pode - ser acessado a partir do na janela HTML.

+ +
+

Novo no Firefox 43

+
+ +

Iniciado no Firefox 43, se você definir uma dessas pseudo-classes para um nó, um ponto laranja aparecerá na exibição de marcação ao lado de todos os nós aos quais a pseudo-class foi aplicada:

+ +

+ + + +

No canto superio direito de cada regra, O nome do arquivo fonte e o número da linha é exibida como link: cliquenele para abrir no Style Editor.

+ +

Do Firefox 41 você pode copiar o local do arquivo fonte: Clique com botão direito no link e selecione "Copar localização".

+ +

O Inspetor entende os mapas de origem CSS. Isso significa que se você estiver usando um pré-processador CSS que tenha suporte para mapas de origem e ativado o suporte ao mapa de origem nas configurações do editor de estilo, o link o levará para a fonte original e não para o CSS gerado . Leia mais sobre o suporte ao mapa de origem CSS na documentação do edtiro de estilo.

+ +

Obtendo ajuda para propriedades CSS

+ +

Iniciado no Firefox 40, se você clicar no nome da propriedade na visualização das regras, você pode abrir uma janela mostrando ajuda com aquela propriedade no MDN:

+ +

{{EmbedYouTube("ptVtAEOK7y4")}}

+ +

Perceba que nesse momento, isso não armazena em cache respostas de MDN, por isso requer conectividade de rede.

+ +

Substituir declarações

+ +

Se uma declaração no CSS pode ser substituído por qualquer regra CSS com um peso maior, Então a declaração é mostrada com uma linha através dele.

+ +
+

Novo no Firefox 43

+
+ +

Iniciado no Firefox 43, d eclarações de substituição têm uma lupa ao lado deles . Clique na lupa para filtrar a regra para mostrar apenas as regras que se aplicam ao notação atual que tentam definir a mesma propriedade: isto é, a cascata completa para a propriedade dada.

+ +

Isso torna mais fácil ver qual regra está substituindo a declaração:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examine CSS calculado

+ +

Para ver o calculo compelo to CSS par ao elemento selecionado, altere para a Janela Computed. This shows the calculated value that each CSS property has for the selected element:

+ +

+ +

Clicando na flecha próximo ao nome da propriedade mostra a regra que define esse valor, juntamente com um link para o nome do arquivo fonte e o número da linha:

+ +

+ +

Por padrão, exibe apenas valores expicitamente definidos pela página: para ver todos os valores clique na caixa "Browser styles"

+ +

 

+ +

Digitar na caixa de pesquisa executa uma filtragem automática na lista, portanto, por exemplo, se você quiser apenas ver as configurações relacionadas a fontes, você pode digitar “font” na caixa de pesquisa e somente propriedades com “font” no nome serão listados. Você também pode pesquisar para valores das propriedades: para encontrar a regra responsável por definir a fonte para “Lucida Grande”, digite isso na caixa de pesquisa.

+ +

Editar regras

+ +

Se você clicar na declaração ou em algum seletor na visualização das regras, poderá editar e ver o resultado imediatamente. Para adicionar uma nova declaração para uma regra, clique na última linha da regra(a linha ocupada pela chave de fecho)

+ +

Quando você começar a digitar o nome da propriedade, você verá uma lista de sugestões de auto-preenchimento. Pressione Tab para aceitar a sugestão destacada ou Cima e Baixo para mover entre as sugestões.

+ +

Iniciado no Firefox 48, a escolha padrão é a propriedade mais comum que começa com as letras que você digitou . Por exemplo, aqui nós escrevemos "c" e o padrão escolheu "color":

+ +

+ +

Se você colocar um valor inválido para uma propriedade ao editar, ou uma propriedade desconhecida, um icone de alerta amarelo aparece além da declaração.

+ +

Qualquer mudança é temporária: Atualizando a página voltará ao normal.

+ +

Você pode usar as teclas de seta para aumentar/diminuir regras numéricas durante a edição . O botão Cima transformará "1px" para 2px, e Shift + Cima/Baixo irá acrescentar ou diminuir 10. Alt + Cima/Baixo altera os valores por 0.1, e Shift + Page up/Page down você adiciona ou subtrai 100 do valor.

+ +

Do Firefox 44, a s edições feitas na visualização regras são refletidas no editor de estilo, e vicce-versa.

+ +

Regras adicionais

+ +

Você pode adicionar novas regras na vizualização de regras. Basta clicar com o botão direito para exibirr um menu e selecionar "Add rule". Isso vai adionar uma nova regra cujo o seletor corresponde a seleção atual.

+ +

+ +

Inicio no Firefox 41, Há um botão que permite que você faça a mesma coisa:

+ +

+ +

Copiando regras

+ +

Inciado no Firefox 41, há itens extras no menu de regras que permite copiar regras ou partes de regras para a área de transferência:

+ + + +

+ +

Veja também

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..9feb12e545 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,34 @@ +--- +title: 'CSS Grid Inspector: Examine grid layouts' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +tags: + - Ferramentas + - Guía + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}

Ícones da grade na visão de Réguas

+ +
Novo no Firefox 52
+ +

Começando na Ferramenta de Desenvolvedores do Firefox 52, você pode soliciar ao inspetor que sobreponha uma representação da grid quando inspecionar layouts com grids.

+ +

Quando um elemento na visão de Régua possui uma declaração display: grid, ele leva um ícone de grade (grid) ao lado dele: . Clique no ícone para apresentar a grade (grid) sobreposta na página, incluindo as linhas da grid e faixas:

+ +

A sobreposição (overlay) continua a ser apresentada quando você seleciona outros elementos, então você pode editar o CSS de outros itens da grid e ver como a grid é afetada.

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

O painel de layout da grid

+ +
Novo no Firefox 56
+ +

Firefox 56 baseia-se nos recursos anteriores de grade, provendo um inteiramente novo painel de layout cheio de opções e informações para grades de depuração. Você pode encontrar todas as informações que precisa sobre isto em Novas adições poderosas para o Inspetor de grades CSS no Firefox Nightly.

+ +

{{EmbedYouTube("dU7xtnzfqxQ")}} 

+ +

See also

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/index.html b/files/pt-br/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..3f7af895dd --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,19 @@ +--- +title: Open the Inspector +slug: Tools/Page_Inspector/How_to/Open_the_Inspector +tags: + - Ferramentas + - Guía + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}

Há duas formas principais de abrir o Inspector:

+ + + +

O Inspector aparecerá no final da janela do navegador:

+ +

The all-new Inspector in Firefox 57 DevTools.Para começar a utilizar o Inspector, veja a UI tour.

diff --git "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" new file mode 100644 index 0000000000..8d2d788d50 --- /dev/null +++ "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" @@ -0,0 +1,175 @@ +--- +title: Trabalho Com Animações +slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

+ + + +

Animation inspector

+ +
+

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

+
+ +

The Page Inspector's Animations view displays animations in the page 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.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

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

+ +
    +
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. +
  2. Make sure the selected element is the <div class="channel">
    3. +
  3. Switch over to the "Animations" tab
    4. +
  4. Play the animation
    5. +
+ +

{{EmbedYouTube("OYkFARSgQB8")}}

+ +

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

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ + + +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

{{EmbedYouTube("AvICwiWpYiE")}}

+ +

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ + + +

Further information about animation compositing

+ +

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ + + +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

+ + + +

+ +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

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("Xo6rUf0kGyM")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

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")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

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

diff --git a/files/pt-br/tools/page_inspector/index.html b/files/pt-br/tools/page_inspector/index.html new file mode 100644 index 0000000000..9bb012d40d --- /dev/null +++ b/files/pt-br/tools/page_inspector/index.html @@ -0,0 +1,276 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.

+ +

Abrindo o Inspector

+ +

Há várias maneiras de abrir o Inspector:

+ + + +

O Toolbox vai aparecer na parte inferior da janela do seu navegador, com o Inspector ativo.

+ +

Se você abrir o Inspector clicando em "Inspect Element", algum elemento já estará selecionado e o Inspector vai funcionar conforme demonstrado na seção abaixo chamada "Selecionando Elementos".

+ +

Outro caminho é mover o mouse por toda a página: o elemento abaixo do mouse fica em desdwataque e com uma borda pontilhada e são exibidas as informações sobre a sua tag HTML. Ao mesmo tempo, do lado esquedo da janela do Inspector, é exibida sua definição HTML contextualizada. Para quem usa o Firefox 30, serão exibidos também os grid lines do elemento seu modelo de caixa, conforme a imagem a seguir:

+ +

+ +

Após selecionar um elemento, o Inspector funcionará conforme demonstrado na próxima seção "Selecionando Elementos".

+ +

Selecionando elementos

+ +

Quando um elemento é selecionado, seu HTML é destacado do lado esquerdo do Inspector e suas informações de estilo são exibidas no painel de CSS que fica ao lado direito:

+ +

A forma como funciona a seleção de elementos teve mudanças significativas no Firefox 29 e, no Firefox 30 , o Inspector mostra o modelo de caixa de cada elemento da página.

+ +

Antes do Firefox 29

+ +

Quando você seleciona um elemento clicando sobre ele na página, o painel do Inspector fica travado neste elemento. Assim, mesmo se você mover o mouse para outro lugar na página, o Inspector não muda sua exibição para outro elemento. 

+ +

Ao clicar sobre o elemento selecionado, dois botões são exibidos: o do lado esquerdo desbloqueia o Inspector do elemento e permite que você selecione outro elemento na página. O do lado direito mostra um menu popup sobre o elemento.

+ +

+ +

Firefox 29

+ +

No Firefox 29, a borda pontilhada ao redor do elemento e suas anotações são mostradas quando você passa o mouse sobre o elemento na página e não apenas quando o mesmo for selecionado. Além disso, o Inspector não fica travado no elemento selecionado: ele exibe as informações do elemento correspondente ao que o mouse está em cima. Para selecionar um elemento diferente na página, clique no botão "Select element" que aparece na Barra de ferramentas do Toolbox:

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

A partir do Firefox 30

+ +

Aqui, o comportamento de seleção é o mesmo do Firefox 29, mas o Inspector também mostra o modelo de caixa e as grid lines para o elemento selecionado na página:

+ +

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

 

+ + + +

Você pode executar algumas tarefas específicas no menu popup. Para ativá-lo, clique no contexto do elemento no painel de HTML:

+ +

+ +

O menu oferece as seguintes opções para você:

+ + + +
Veja outras opções:
+ +
 
+ + + +

+ + + +

+ +

Copiar a URL de imagens

+ +

A partir do Firefox 29, se o elemento selecionado for uma imagem, há também a opção de copiar A URL da imagem.:

+ +

+ +

Editando HTML

+ +


+ Para editar um elemento externamente (outerHTML), selecione no menu popup a opção "Edit As HTML". Uma caixa para edição de HTML será aberta:

+ +

Você pode adicionar qualquer código HTM aqui: alterando tags ou adicionando novas. Para sair, basta clicar fora da caixa e as modificações serão realizadas na página.

+ +

Painel de HTML

+ +

O painel de HTML exibe a página HTML como uma árvore, em que é possível expandir e recolher cada nó. O início e o fim de cada tag para os elementos selecionados ficam em destaque com a cor fundo acizentada.

+ +

Você pode editar o HTML - tags, atributos e conteúdo - diretamente no painel: clique no elemento que você deseja editar, realize as modificações e dê Enter que as mudanças podem já ser vistas na página.

+ +

Barra de ferramentas do painel de HTML

+ +

Na parte de cima do painel, há uma barra de ferramentas dividida em três partes:

+ +
+

A partir do Firefox 29, o botão "Select element" foi movido para a Toolbox.

+
+ + + +

Painel de CSS

+ +

O painel de CSS mostra as informações de estilo relacionadas ao elemento que está sendo inspecionado. Há 4 opções de visualização nesse painel:  "Rules", "Computed", "Fonts", and "Box Model". Você pode chavear entre elas clicando no menu superior:

+ +

+ + + +

Aqui são mostradas todas as regras aplicadas ao elemento selecionado, na ordem da mais específica à menos:

+ +

+ +

Aqui também são listados os pseudo-elements e as regras que eles aplicam.

+ +

Tela da opção Rules

+ +

Essa tela mostra todas as regras como em um folha de estilo, com uma lista de seletores seguida de uma lista de propriedade:valor; declarações.

+ +

Você pode realizar testes com todas as declarações deixando-as desabilitadas. Para isso, basta clicar no checkbox ao lado de cada uma, alterando entre habilitada ou não.

+ + + +

À direita de cada declaração, é exibido o link com o nome do arquivo CSS e o número da linha em que ela se encontra. Se você clicar ali, o arquivo será aberto no Style Editor.

+ +

A partir do Firefox 29, o Inspector entende o mapa do código CSS (CSS source map). Isso significa que se você estiver utilizando um editor CSS em que funcionem os mapas de código e se você habilitar o mapa de código no Style Editor settings, o link levará você até o código original e não ao CSS gerado.

+ +

+ +

Leia mais sobre isso em Style Editor documentation.

+ +

Amostra de cores

+ +
+

A partir do Firefox 27,  você pode ver a amostra da cor próxima ao seu valor:

+
+ +

+ +

Seletor de cor

+ +
+

A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.

+
+ +

+ +

Pré-visualização da imagem de fundo (Imagem background-image preview)

+ +
+

A partir do Firefox 27,  você pode pré-visualizar a imagem especificada utilizando o background-image que funciona ao passar o mouse sobre o link da imagem:

+
+ +

+ +

Visualização transform 

+ +
+

Isto é novo no Firefox 29.

+
+ +

A partir do Firefox 29 , se você passar o mouse sobre a propriedade transform na tela Rules,  você consegue visualizar a transformação que ali ocorre:

+ +

+ +

Editando rules

+ +

Se você clicar em uma declaração para editar sua propriedade ou valor, você visualiza o resultado imediatamente (aqui você também pode adicionar novas declarações, basta clicar no fim de uma já existente e dar Enter). O Inspector reconhece inclusive se você inserir um valor ou propiedade errado ou inexistente: ele coloca um alerta amarelo no local.

+ +

Qualquer mudança que você fizer é temporária: com um reload a página volta com seu estilo original.

+ +

Dica: Você pode usar as setinhas do seu teclado para fazer ajustes nos valores numéricos enquanto edita, como se fosse um ajuste fino.

+ + + +

Nesta opção, o estilo do elemento é organizado pela propriedade. Isso lista todas as propriedades CSS que foram aplicadas ao elemento em ordem alfabética e os valores para cada uma:

+ +

+ +

Clicando na propriedade, você vê a declaração referente àquele valor mais o link para o arquivo de código e número da linha:

+ +

Como padrão, só são mostrados os valores que estão sendo explicitamente usados na página: para ver todos valore, selecione a opção "Browser styles" que fica na parte de baixo do painel. 

+ +

Utilize o campo de busca (search box) para buscar na página as declarações tanto por propriedades quanto por valores. Por exemplo, se você bucar por "font", serão exibidas todas as propriedades que estão na página que contêm a palavra "font" em seu nome.

+ + + +

Aqui são listadas todas as fontes (ou a única) que estão sendo utilizadas pelo elemento selecionado. Mas, veja que são mostradas as fontes usadas no seu sistema, que não necessariamente é a fonte especificada no CSS original:

+ +

+ +

Menu Box model

+ +

Aqui é exibida uma representação gráfica do modelo de caixa (box model) aplicado ao elemento:

+ +

+ + + +

+ +

Usando o Inspector com um Web Console

+ +

Você tamabém pode utilizar um web console ao mesmo tempo em que usa o inspetor de página. Na verdade, você inclusive possui uma feature a mais: o elemento selecionado que está sendo inspecionado pelo inspetor de página pode ser referenciado em JavaScript no Web Console através da utilização da variável $0.

+ +

+ +

Developer API

+ +

O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:

+ +

window.inspector

+ +

definido em inspector-panel.js. Atributos e funções:

+ + + +

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

+ +

Atalhos de teclado

+ +

{{ Page ("en-pt-BR/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Global shortcuts

+ +

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

diff --git a/files/pt-br/tools/rulers/index.html b/files/pt-br/tools/rulers/index.html new file mode 100644 index 0000000000..4712700308 --- /dev/null +++ b/files/pt-br/tools/rulers/index.html @@ -0,0 +1,32 @@ +--- +title: Rulers +slug: Tools/Rulers +tags: + - Desenvolvimento + - Design + - régua +translation_of: Tools/Rulers +--- +
{{ToolsSidebar}}

Recente no Firefox 40.

+ +

Desde o Firefox 40, é possível sobrepor réguas horizontais e verticais em uma página da web:

+ +

As unidades são em pixels.

+ +

Desde a versão 59 do Firefox, as dimensões da tela estão exibidas perto do canto superior direito da tela.

+ +

Há duas formas de ativar/desativar as réguas para um página :

+ + + +

+ +

É importante manter em mente algumas coisas ao utilizar a régua:

+ + diff --git a/files/pt-br/tools/scratchpad/index.html b/files/pt-br/tools/scratchpad/index.html new file mode 100644 index 0000000000..00e9b9d019 --- /dev/null +++ b/files/pt-br/tools/scratchpad/index.html @@ -0,0 +1,77 @@ +--- +title: Scratchpad +slug: Tools/Scratchpad +translation_of: Archive/Tools/Scratchpad +--- +
{{ToolsSidebar}}
+ +

{{ gecko_minversion_header("6.0") }}

+ +

O Scratchpad, disponível no Firefox 6 ou superior, fornece um ambiente para experiências com código em Javascript. Você pode escrever e testar suas ideias de código interagindo com a página antes de usar suas ferramentas de desenvolvimento corriqueiras para finalizar e limpar o resultado final.

+ +

Diferentemente do Console, desenhado para interpretar uma única linha de código, o Scratchpad lhe permite editar grandes trechos de código Javascript e então executá-los de várias formas, dependendo de como você quer usar a saída da execução.

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +

Usando o Scratchpad

+ +

Para abrir o Scratchpad, pressione Shift+F4, ou vá ao menu Desenvolvedor Web (um submenu em Ferramentas no Mac OSX e no Linux), e selecione Scratchpad. Isso abrirá a janela do editor do Scratchpad, que inclui um comentário que contém algum resumo de como usar o editor. De la você ja pode começar a escrever seu Javascript e testá-lo.

+ +

A janela do Scracthpad se parece com essa abaixo (no Mac OSX a barra de menus fica no topo da tela):

+ +

Veja  Usando o Editor de código fonte para documentação sobre o editor em si, incluindo atalhos de teclado que serão bem úteis.

+ +

O menu Arquivo oferece opções para salvar e carregar trechos de Javascript, de forma que você possa reusar código mais tarde caso queira.

+ +

Executando seu código

+ +

Uma vez que você tenha escrito seu código, selecione a parte que desenha executar. Se você não selecionar nada, todo o código no editor será executado. Clique com o botão direito do mouse (ou vá até o menu Executar na barra superior) e escolhar a forma que deseja rodar seu código. Há quatro opções disponíveis.

+ +

Executar

+ +

Quando você escolhe essa opção, o código selecionado é executado. Essa opção é a que você escolherá caso queira executar uma função ou outro trecho que manipule o conteúdo da página sem que você precise ver o resultado.

+ +

Inspecionar

+ +

A opção de inspeção executa o código da mesma forma que a opção Executar; entretanto depois que a execução terminar e houver um retornar, um inspetor de objeto é aberto, o que te permite analizar o valor retornado.

+ +

Por exemplo, se você entrasse com o código:

+ +
window
+
+ +

E então escolher inspecionar, o inspetor de objetos abrirá e se parecerá com algo assim:

+ +

Visualizar

+ +

A opção de visualizar executa o código selecionado e então insere o resultado diretamente no editor como um comentário. Essa é uma forma conveniente de manter um log dos seus testes enquanto você trabalha. Você também pode usar esse recurso como uma calculadora num momento de pressa, apesar de que se você não tem um programa que sirva como uma calculadora melhor, você deve ter problemas maiores para resolver.

+ +

Recarregar e executar

+ +

A opção de recarregar e executar primeiro recarrega a página e então executa o código assim que o evento "load" da página é disparado. Isso é útil para executar código em um ambiente fresquinho.

+ +

Cenários de uso do Scratchpad

+ +

Existem várias formas de usar o Scratchpad de maneira interessante. Essa seção cobre alguns como exemplo.

+ +

Testando seu código

+ +

O Scratchpad é particularmente útil para testar seu novo código em um ambiente real de navegador; você pode copiar o código que você está debugando no Scracthpad e então executá-lo e, na sequência, melhorá-lo até que ele funcione corretamente. Uma vez isso aconteça, copie o código de volta para o seu arquivo com o script de interesse e seu trabalho terminou. Em muitos casos, você pode escrever, debugar e testar seu código sem nem recarregar a página.

+ +

Trechos de código reutilizáveis

+ +

O menu Arquivo do Scratchpad oferece comandos para salvar e carregar código Javascript. Isso ajuda  a manter por perto pedações de Javascript que você usa com frequência. Por exemplo, se você está trabalhando em um site que usa requisições AJAX para carregar dados, você pode manter trechos que façam essas operações para teste e verificação dos dados. De forma semelhante, você pode manter funções de interesse com propósito geral para debugar, como funções de dump, saída ou outros tipos de informação sobre o DOM.

+ +

Escopo do Scratchpad

+ +

O código rodado no Scratchpad é executado em escopo global do aba selecionada no momento da execução. Quaisquer variáveis que você declare fora de uma função serão adiconadas ao objeto global da aba.

+ +

Usando Scratchpad para acessar partes internas do Firefox

+ +

Se você está trabalhando sobre o próprio Firefox, ou desenvolvendo complementos, você pode achar útil acessar as áreas internas do browser usando o Scratchpad. Para fazer isso modifique o devtools.chrome.enabled para true usando about:config. Feito isso, o menu Ambiente terá a opção Browser; estando ela selecionada, o seu escopo é todo o navegador ao invés de somente o conteúdo da página.

+ +

{{ languages( { "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise", "ja": "ja/Tools/Scratchpad", "pt": "pt/Ferramentas/Scratchpad" } ) }}

+ +

Atalhos do Teclado

+ +

{{ Page ("pt-BR/docs/Tools/Keyboard_shortcuts", "scratchpad") }}

diff --git a/files/pt-br/tools/settings/index.html b/files/pt-br/tools/settings/index.html new file mode 100644 index 0000000000..4474928ecc --- /dev/null +++ b/files/pt-br/tools/settings/index.html @@ -0,0 +1,155 @@ +--- +title: Configurações +slug: Tools/Settings +tags: + - Barra de Ferramentas + - Desenvolvimento + - Ferramentas + - Firefox +translation_of: Tools/Settings +--- +
{{ToolsSidebar}}

Configurações de Abertura

+ +

Para ver o painel de configurações, abra qualquer uma das Ferramentas do Desenvolvedor e então:

+ + + +

O painel de Configurações deve ser assim:

+ +

Depicts the Toolbox options

+ +

Categorias

+ +

Ferramentas de Desenvolvedor Padrão do Firefox

+ +

Esse grupo de checkboxes determina as ferramentas habilitadas na caixa de ferramentas. Novas ferramentas são frequentemente incluídas no Firefox, mas não habilitadas por padrão.

+ +

Botões Disponíveis na Caixa de Ferramentas

+ +

Esse grupo de checkboxes determina as ferramentas com um ícone disponível na barra de ferramentas.

+ +

Altere o Tema das Ferramentas de Desenvolvedor

+ +

É permitido alterar entre três temas diferentes.

+ +

O tema light, que é o padrão:

+ +

Light theme for DevTools

+ +

O tema dark (que é tema padrão no Firefox Developer Edition):

+ +

Dark theme for DevTools

+ +

Uma novidade no Firefox 48!

+ +

Existe também o tema Firebug, que se parece com a extensão Firebug, permitindo que você se sinta em casa caso já esteja acostumado com o Firebug:

+ +

Firebug theme for DevTools

+ +

Preferências Comuns

+ +

As configurações que se aplicam para mais de uma ferramenta, são as seguintes:

+ +
+
Habilitar logs (registros) persistentes
+
A configuração para o controlar ou não o Console Web e Monitor de Rede não são limpas quando você navegar para uma nova página.
+
+ +

Inspetor

+ +
+
Mostrar os estilos no navegador
+
Uma configuração para controlar os estilos aplicados pelo navegador (agente-de-estilo-de-usuario) deve ser mostrada na Regras de exibição do inspetor. Observe que esta configuração é independente dos "estilos do navegador" nos inspetores de Exibição computada.
+
Retirar atributos DOM (novidade no Firefox 47)
+
Por padrão, o inspetor trunca atributos DOM e mais de 120 caracteres. Desmarque essa caixa para impedir esse comportamento.  Essa configuração funciona alternando o about:config  "devtools.markup.collapseAttributes". Para mudar o limiar no qual atributos são truncados, você consegue editar o about:config preferência "devtools.markup.collapseAttributeLength".
+
Unificar a cor padrão
+
Uma configuração para controlar como as cores são representadas no inspetor:
+
+
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • Nome da cor
    • +
  • Como autor ( novo no Firefox 44).
    • +
+
+
+ +

Console Web

+ +
+
Habilitar timestamps
+
+
+
Controla se o Console Web exibe os carimbos de hora. O Console Web padrão escondendo os timestamps.
+
+ .
+
+ +

Editor de Estilos

+ +
+
Mostrar fonte original
+
Quando o pré-processador suporta a fonte do mapa usado, isto abilita o estilo de editor no display original, pré-processador, fontes preferidas quando gerado o CSS. Aprenda mais sobre o Editor de Estilo suportado para fontes dos mapas CSS. Com a configuração estando checada, a Exibição de página do inspetor de regras também irá fornecer links para as fontes originais.
+
Autocomplete CSS
+
+
Ative o Editor de Estilos para oferecer sugestões do auto completar.
+
+
+ +

Perfil JavaScript

+ +
+
Mostrar a plataforma de dados Gecko
+
+
+
Uma configuração para controlar ou não perfis devem incluir símbolos de plataforma Gecko.
+
+
+
+ +

Editor de Preferências

+ +

Preferências para o CodeMirror editor de código fonte, que é incluido no Firefox e usado por várias ferramentas de desenvolvedor, incluindo Bloco de anotações e o Editor de Estilo.

+ +
+
Detectando identação
+
Auto identar novas linhas baseadas na atual identação.
+
+
Colchetes de fechamento automático
+ + +
Identação usando espaços
+ + +
Tamanho da aba
+
+
 
+
Atalhos de teclado
+
Escolha o padrão CodeMirror atalho de teclado, ou atalhos de teclado de um dos vários editores populares: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Configurações avançadas

+ +
+
Desabilitar cache
+
Desabilite o simulador de cache do navegador para simular uma primeira performance de carregamento. Essa configuração persiste, significa que se ele estiver definido, o cache será desativado qua você reabrir o devtools. Cache é reativado quado os devtools estão fechados.
+
Desabilitar JavaScript
+
Recarregue a aba atual com o JavaScript desabilitado.
+
Habilitar Service Workers over HTTP
+
Habilitar Service Worker para registro de sites inseguros.
+
Habilitar browser chrome e add-on depuração toolboxes
+
Possibilita que você use as ferramentas de desenvolvimento no contexto do próprio navegador (Firefox), e não somente no conteúdo da web.
+
Habilitar depuração remota
+
Permite que as ferramentas de desenvolvimento depurem remotamente as instâncias do Firefox.
+
diff --git a/files/pt-br/tools/shader_editor/index.html b/files/pt-br/tools/shader_editor/index.html new file mode 100644 index 0000000000..71bb9c0d74 --- /dev/null +++ b/files/pt-br/tools/shader_editor/index.html @@ -0,0 +1,56 @@ +--- +title: Shader Editor +slug: Tools/Shader_Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

O Shader Editor permite que você veja e edite os vértices e fragment shaders usados pela WebGL.

+ +

{{EmbedYouTube("hnoKqFuJhu0")}}

+ +

A WebGL é uma API JavaScript para renderizar gráficos 3D interativos e gráficos 2D no navegador sem usar plugins. Com WebGL você fornece dois programas chamados de "shaders" que são chamados na fase adequada do OpenGL rendering pipeline: o vertex shader, que fornece as coordenadas para cada vértice a ser desenhado, e um fragment shader, que proporciona a cor para cada pixel a ser desenhado.
+
+ Esses shaders são escritos em OpenGL Shading Language, ou GLSL. Na WebGL eles podem ser incluídos em uma página de várias maneiras: com texto escrito em JavaScript, como arquivos separados inclusos usando a tag <script>, ou obtidos do servidos como somente texto (plain text). O código JavaScript em execução na página então os envia para compilação usando as API de WebGL, e eles são executados na GPU do equipamento (computador).

+ +

Com o Shader Editor você pode examinar e editar o fonte dos vertices e dos fragment shaders.

+ +

Veja aqui outro video mostrando como usar o Shader Editor em aplicações complexas (nesse caso, a demo da Unreal Engine):

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Abrindo o Shader Editor

+ +

O Shader Editor está desabilitado por padrão. Para habilitar abra os ajustes da Caixa de Ferramentas (Toolbox settings) e marque a caixa "Shader Editor" no item "Ferramentas de Desenvolvimento Padrão do Firefox". Agora você verá "Shader Editor" na barra de ferramentas. Clique no item e o Shader Editor vai abrir.
+
+ A princípio você verá apenas uma janela vazia com somente um botão pedindo para você recarregar a página:

+ +

+ +

Para iniciar, carregue uma página que crie um contexto WebGL e carregue um programa nela. A figuras abaixo são da demo da Unreal Engine.

+ +

Você verá uma janela dividida em três paineis: uma lista de todos os programas em GLSL do lado esquerdo, o vertex shader para o programa atualmente selecionado no meio, e o fragment shader para o programa atualmente selecionado a direita:

+ +

+ +

Gerenciando os programas

+ +

O painel da esquerda lista toos os programas em uso no momento por um contexto WebGL. Se você parar o mouse sobre um entrada da lista, a parte desenhada por aquele programa é destacada em vermelho:

+ +

Se você clicar no ícone de olho ao lado esquerdo da entrada do programa, esse programa é desabilitado. Isso é útil para que você se concentre em certos shaders ou oculte as figuras que se sobrepõem:

+ +

Se você clicar na entrada, o vertex e o fragment shaders ligados a ela são exibidos nos outros dois painéis, e voce pode editá-los.

+ +

Editando shaders

+ +

Os painéis do meio e da direita mostram o vertex e os fragment shaders para o programa atualmente selecionado.
+
+ Você pode editar esses programas e ver os resultados na próxima vez o contexto WebGL for redesenhado (por exemplo, no próxmo quadro da animação). Por exemplo, você pode modificar as cores:

+ +

O editor destaca os erros de sintáxe em seu código:

+ +

Se você parar o mouse sobre o 'x' que aparece perto de uma linha que contem algum erro, você vai ver mais detalhes sobre o problema:

+ +

+ +

 

+ +

Nota: a palavra entrada no texto acima refere-se a um item em uma lista.

diff --git a/files/pt-br/tools/simulador_firefox_os_1.1/index.html b/files/pt-br/tools/simulador_firefox_os_1.1/index.html new file mode 100644 index 0000000000..8b710a1cea --- /dev/null +++ b/files/pt-br/tools/simulador_firefox_os_1.1/index.html @@ -0,0 +1,359 @@ +--- +title: Simulador Firefox OS 1.1 +slug: Tools/Simulador_Firefox_OS_1.1 +tags: + - Ferramentas + - Firefox OS + - Guia(2) + - Guía +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
{{ToolsSidebar}}
+
+
+

Esta página descreve o "velho" Firefox OS Simulator. Você deve apenas usar se você desenvolve apps para Firefox 1.1, e que só pode ser instalado no Firefox 24 ou Firefox 25.

+ +

Se você desenvolve apps para Firefox OS 1.2 ou superior, invés disso você precisa usar o App Manager.

+ +

Se você precisar de ajuda, tente perguntar na lista ou em dev-developer-tools mailing list ou em #devtools on irc.mozilla.org.

+
+ +

Resumo

+ +

O complemento Firefox OS Simulator é uma ferramenta que permite você testar e depurar seu aplicativo Firefox OS no seu desktop. O ciclo de codificar-testar-depurar é muito mais rápido com o simulador do que com um dispositivo real, e claro, você não precisa de um dispositivo real para usar.

+ +

Essencialmente, o complemento Simulador consiste em:

+ +
    +
  • o Simulador: inclui o Firefox OS desktop client, que é uma versão das camadas superiores do Firefox OS que funciona em seu desktop. O Simulador também inclui alguns recursos adicionais de emulação que não estão nas compilações padrões do Firefox OS para desktop.
    • +
  • o Painel de Instrumentos: uma ferramenta embarcado pelo Firefox que permite iniciar e parar o Simulador e instalar, desinstalar, e depurar aplicativos rodando nele. O Painel de Instrumentos também lhe ajuda a subir(?) aplicativos para um dispositivo real, e checar os manifests do aplicativo para problemas comuns.
    • +
+ +

O screenshot abaixo mostra uma sessão de depuração usando o Simulador.

+ +

The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

+ +

+ +

This guide covers the following topics:

+ + + +
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+ +

Installing the Simulator add-on

+ +

The Simulator is packaged and distributed as a Firefox add-on. To install it:

+ +
    +
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
    2. +
  2. Click "Add to Firefox".
    3. +
  3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
    4. +
+ +

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
+
+ Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.

+ +

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

+ +


+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

+ +

Adding, removing and refreshing apps

+ +

Adding apps

+ +

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+ +

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

+ +

Managing apps

+ +

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +
    +
  • its name, taken from the manifest
    • +
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
    • +
  • a link to its manifest file
    • +
  • the result of manifest validation
    • +
+ +

It also gives us four commands:

+ +
    +
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.
    • +
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
    • +
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
    • +
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
    • +
+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+ +

Manifest validation

+ +

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +
    +
  • manifest errors: problems that will prevent your app from installing or running
    • +
  • manifest warnings: problems that may prevent your app from working properly
    • +
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
    • +
+ +

It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.

+ +

Manifest errors

+ +

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +
    +
  • the manifest does not include the mandatory "name" field
    • +
  • the manifest is not valid JSON
    • +
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
    • +
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
    • +
+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+ +

Manifest warnings

+ +

The Dashboard will report the following manifest issues as warnings:

+ +
    +
  • missing icons
    • +
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
    • +
  • the type field is unrecognized
    • +
  • the manifest requests a permission that is unrecognized
    • +
  • the manifest requests a permission which will be denied
    • +
  • the manifest requests a permission for which access could not be determined
    • +
+ +

Simulator-specific warnings

+ +

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +
    +
  • the type field is "certified", but the Simulator does not yet fully support certified apps
    • +
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
    • +
+ +

Running the Simulator

+ +

There are two different ways the Simulator may be started:

+ +
    +
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
    • +
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
    • +
+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+ +

+ +

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+ +

+ +

Simulator toolbar

+ +

In the bottom toolbar, from left to right, there are the Home button, the Screen Rotation button, and the Geolocation button.

+ +
    +
  • The Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).
    • +
  • The Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
    • +
  • The Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the Geolocation API.
    • +
+ +

+ +

Simulator menubar

+ +

In the top menubar, you can access some useful commands to make development more efficient:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
    • +
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
    • +
+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
    +
  • make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)
    • +
  • type the keyboard shortcut to refresh the app running in the Simulator
    • +
+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+ +

Attaching developer tools

+ +

You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler, and the Network Monitor, but we're working on adding support for more developer tools.

+ +
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+ +

To attach developer tools to the Simulator, click the "Connect" button for an app:

+ +

+ +

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+ +

+ +

Web Console

+ +

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+ +

Debugger

+ +

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+ +

Style Editor

+ +

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+ +

Profiler

+ +

Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+ +

Network Monitor

+ +

Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+ +

Receipts

+ +

If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+ +

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+ +

+ +

Push to device

+ +

If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.

+ +

Connecting a device

+ +

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+ +

Pushing apps to the device

+ +

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +
+

Manual Steps:

+ +
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.

    +
    • +
  • +

    If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.

    +
    • +
+
+ +

Firefox OS Device Connection Confirmation

+ +

On every device reboot, the first "Push" request needs to be confirmed on the device:

+ +

+ +

Troubleshooting on Linux

+ +

If you are unable to connect your device after creating udev rules, please see this bug.

+ +

Limitations of the Simulator

+ +

Note that the Firefox OS Simulator isn't a perfect simulation.

+ +

Hardware limitations

+ +

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+ +

Audio/video codecs

+ +

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+ +

Unsupported APIs

+ +

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ + + +

Getting help

+ +

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+ +

How to enable verbose logging

+ +

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+
+
+ +
+

 

+
+ +

 

diff --git a/files/pt-br/tools/web_console/helpers/index.html b/files/pt-br/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..2ef39bc366 --- /dev/null +++ b/files/pt-br/tools/web_console/helpers/index.html @@ -0,0 +1,55 @@ +--- +title: Web Console Helpers +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}
{{ gecko_minversion_header("2.0") }}
+ +

Os comandos

+ +

A linha de comando JavaScript fornecida pelo Console Web oferece algumas funções auxiliares embutidos que tornam certas tarefas mais fáceis.

+ +
+
$()
+
FX16+ Procura uma seqüência de seletor CSS, retornando o primeiro elemento que corresponda. equivalente a {{ domxref("document.querySelector()") }} ou chama a função de $ na página, se ele existir.
+
FX4 to FX16 Procura uma string como um ID de um nó DOM; este é um atalho para {{ domxref("document.getElementById()") }} ou chama a função de $ na página, se ele existir.
+
$$()
+
Procura uma seqüência de seletor CSS, retornando uma lista de DOM nós que correspondem. Este é um atalho para {{ domxref("document.querySelectorAll()") }}.
+
$0
+
O elemento atualmente inspecionados na página.
+
$x()
+
Avaliar uma expressão XPath e retornar um array de nós correspondentes.
+
keys()
+
Dado um objeto, retorna uma lista de keys (ou nomes de propriedade) no objeto. Este é um atalho para object.keys.
+
values()
+
Dado um objeto, retorna uma lista de valores nesse objeto, serve como um complemento para keys ().
+
clear()
+
Limpa a área de saída do console.
+
inspect()
+
Dado um objeto, abre o inspetor de objeto para aquele objeto.
+
pprint()
+
Formata o valor especificado de forma legível, o que é útil para despejar o conteúdo de objetos e arrays.
+
help()
+
Exibe o texto de ajuda. Na verdade, em um exemplo maravilhoso de recursão, ele vai lhe trazer a esta página.
+
+ +

Exemplos

+ +

Exemplo: Olhando para o conteúdo de um nó DOM

+ +

Digamos que você tem um nó DOM com o ID "título". Na verdade, esta página que você está lendo agora tem um, assim você pode abrir o Web Console e tentar isso agora.
+
+ Vamos dar uma olhada no conteúdo desse nó, usando as funções $() e inspect() :

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

Isso abre automaticamente o inspetor de objeto, mostrando-lhe o conteúdo do nó DOM que coincide com o CSS selector "# title", que é, claro, o elemento com ID "título".

+ +

Exemplo: despejar o conteúdo de um nó DOM

+ +

Isso é muito bom se acontecer de você estar sentado no navegador exibindo algum problema, mas vamos dizer que você está depurando remotamente para um usuário, e precisa de um olhar para o conteúdo de um nó. Você pode ter seu usuário abrir o Web Console e despejar o conteúdo do nó para o registro, em seguida, copiar e colá-lo em um e-mail para você, utilizando a função pprint ():

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

Este expele o conteúdo do nó para que você possa dar uma olhada. Claro, isso pode ser mais útil com outros objetos do que um nó DOM, mas essa é a idéia.

diff --git a/files/pt-br/tools/web_console/index.html b/files/pt-br/tools/web_console/index.html new file mode 100644 index 0000000000..c657ba96ab --- /dev/null +++ b/files/pt-br/tools/web_console/index.html @@ -0,0 +1,53 @@ +--- +title: Console Web +slug: Tools/Web_Console +tags: + - Ajuda + - Debugging + - Desenvolvimento + - Desenvolvimento Web + - Dicas + - Ferramentas + - Ferramentas Para Desenvolvimento Web + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

O Web Console

+ +
    +
  1. Registra informações associadas a uma página da internet: solicitações de rede, JavaScript, CSS, erros de segurança e avisos, bem como mensagens de erro, avisos e informações explicitamente registradas pelo código JavaScript em execução na página
    2. +
  2. Permite que você interaja com uma página da web, executando expressões JavaScript na página
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Abrindo o Console
+
Como começar a usar o Console.
+
O interpretador de linhas de comando
+
Como interagir com uma página usando o Console.
+
Dividir a página com o Console
+
Use o Console ao lado de outras ferramentas.
+
+
+ +
+
+
Mensagens do Console
+
Detalhes das mensagens de log do Console.
+
Saída detalhada
+
Veja e interaja com os itens registrados pelo Console.
+
Atalhos do teclado
+
Referência para atalhos.
+
+
+
diff --git a/files/pt-br/tools/web_console/opening_the_web_console/index.html b/files/pt-br/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..ae0c05f78e --- /dev/null +++ b/files/pt-br/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,63 @@ +--- +title: Abrindo o Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +tags: + - Ferramentas + - Navegador + - console + - web console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Para abrir o Web Console:

+ + + +

As Ferramentas vão aparecer na parte inferior da janela do navegador, com o Web Console ativado (é chamado apenas de "Console" nas Ferramentas):

+ +

+ +

A interface do console da Web é dividida em três seções horizontais, detalhadas nas seções abaixo.

+ +

Barra de ferramentas

+ +

A barra de ferramentas na parte superior contém vários recursos:

+ +

Lata de lixo: Clique neste ícone para limpar o conteúdo do console.
+ Funil: Clique neste ícone para filtrar as mensagens exibidas no console.
+ Categorias de filtro: você pode clicar em uma categoria de filtro (como Erros, Avisos, CSS ou XHR) para exibir apenas esses tipos de mensagens.
+ Configurações (menu "engrenagem"): novo no Firefox 71, você pode clicar no ícone de engrenagem para acessar o novo menu de configurações, onde é possível ativar e desativar os seguintes recursos:
+ Persistir logs: quando ativado, o console não limpa na recarga da página ou no carregamento da nova página.
+ Mostrar carimbos de data / hora: quando ativado, os carimbos de hora são mostrados no lado esquerdo de cada linha da mensagem para dizer quando as mensagens foram registradas.
+ Agrupar mensagens semelhantes: quando ativado, tipos semelhantes de mensagens são agrupados.

+ + + +

Painel de exibição de mensagens

+ +

É aqui que as mensagens aparecem, tanto as geradas pelo código na página quanto as geradas pelos comandos inseridos na linha de comandos.

+ +

Consulte Mensagens do console para obter mais detalhes sobre o que as mensagens podem conter.

+ +

        

+ + + + + +

Linha de comando

+ +


+ A linha de comando começa com colchetes de ângulo duplo (>>). Use-o para inserir expressões JavaScript.

+ +

No Firefox 71 em diante, existe um novo ícone de "painel de divisão" no lado direito da linha de comando - clicar nele abrirá o novo modo de várias linhas do console.

diff --git a/files/pt-br/tools/web_console/the_command_line_interpreter/index.html b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..80eb0f4c92 --- /dev/null +++ b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,183 @@ +--- +title: O interpretador de entrada JavaScript +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Você pode interpretar expressões JavaScript em tempo real usando o intérprete fornecido pelo console da web. Possui dois modos: entrada de linha única e entrada de várias linhas.

+ +

Modo linha-simples

+ +

Para entrada em linha única, você pode digitar expressões JavaScript no campo na parte inferior do log do console, no prompt >>.

+ +

The Web Console, showing single-line mode

+ +

Para inserir expressões no modo de linha única, digite no prompt e pressione Enter. Para inserir expressões com várias linhas, pressione Shift + Enter após digitar cada linha e, em seguida, Enter para executar todas as linhas inseridas.

+ +

A expressão digitada é ecoada no prompt de entrada, seguido pelo resultado.

+ +

Se sua entrada não parece estar completa quando você pressiona Enter, o console trata isso como Shift + Enter, permitindo que você termine sua entrada.

+ +

Por exemplo, se você digita:

+ +
function foo() {
+ +

e, em seguida, Enter, o console não executa a entrada imediatamente, mas se comporta como se você tivesse pressionado Shift + Enter, para que você possa terminar de inserir a definição da função.

+ +

Modo linhas-multíplas

+ +

Para entrada em várias linhas, clique no ícone "painel dividido" no lado direito do campo de entrada em linha única ou pressione Ctrl + B (Windows / Linux) ou Cmd + B (macOS). O painel de edição de várias linhas é aberto no lado esquerdo do console da Web.

+ +

Web Console in multi-line mode

+ +

Você pode inserir várias linhas de JavaScript por padrão neste modo, pressionando Enter após cada uma. Para executar o snippet que está atualmente no painel de edição, clique no botão Executar ou pressione Ctrl + Enter (ou Cmd + Return no MacOS). O trecho é ecoado no prompt de entrada (no painel do lado direito), seguido pelo resultado. Você também pode selecionar um intervalo de linhas no painel de edição e executar apenas o código nessas linhas.

+ +

A partir do Firefox 76, se o trecho de código tiver mais de cinco linhas, apenas as cinco primeiras serão ecoadas no console, precedidas por um triângulo de divulgação (ou "twistie") e seguidas de reticências (…). Clique em qualquer lugar na área que contém o código ecoado para mostrar todo o trecho; clique novamente nessa área para recolhê-lo.

+ +

Você pode abrir arquivos no modo de várias linhas e salvar o conteúdo atual do painel de edição em um arquivo.

+ + + +

Para voltar ao modo de linha única, clique no ícone X na parte superior do painel de edição de várias linhas ou pressione Ctrl + B (Windows / Linux) ou Cmd + B (MacOS).

+ +

Acessando variáveis

+ +

Você pode acessar variáveis definidas na página, variáveis internas como janela e variáveis adicionadas por bibliotecas JavaScript como jQuery:

+ +

+ +

Autocomplemento

+ +

O editor foi preenchido automaticamente: insira as primeiras letras e um pop-up aparecerá com possíveis conclusões:

+ +

+ +

Pressione Enter, Tab ou a tecla de seta para a direita para aceitar a sugestão, use as setas para cima / para baixo para ir para uma sugestão diferente ou continue digitando se não gostar de nenhuma das sugestões.

+ +

As sugestões de preenchimento automático do console não diferenciam maiúsculas de minúsculas.

+ +

O console sugere conclusões do escopo do quadro de pilha em execução no momento. Isso significa que, se você atingir um ponto de interrupção em uma função, será preenchido automaticamente para objetos locais para a função.

+ +

Você também recebe sugestões de preenchimento automático para elementos da matriz:

+ +

+ +

Você pode ativar ou desativar o preenchimento automático por meio do menu Configurações ("engrenagem") na barra de ferramentas do console da web. O menu Ativar preenchimento automático tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.

+ +

Avaliação instantânea

+ +
+

Esse recurso está disponível no Firefox Nightly, nas versões rotuladas 74 e posterior.

+
+ +

Quando o recurso "avaliação instantânea" está ativado, o intérprete exibe os resultados das expressões enquanto você as digita no modo de linha única. Observe que o resultado pode ser uma mensagem de erro. Expressões que têm efeitos colaterais não são avaliadas.

+ +

Você pode ativar ou desativar a avaliação instantânea através do menu Configurações ("engrenagem") na barra de ferramentas do Console da Web. A avaliação instantânea do menuitem tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.

+ +

Contexto de execução

+ +

O código que você executou se torna parte do contexto de execução, independentemente do modo de edição em que você estava quando o executou. Por exemplo, se você digitar uma definição de função no editor de várias linhas e clicar em Executar, poderá alternar para o modo de linha única e ainda usar sua função.

+ +

Realce de sintaxe

+ +

Console output showing syntax highlighting

+ +

O texto digitado possui uma sintaxe destacada assim que você digitou o suficiente para o marca-texto analisá-lo e inferir o significado das "palavras".

+ +

A saída é destacada também onde apropriado.

+ +
+

Nota: O realce da sintaxe não é visível no seu navegador se os recursos de acessibilidade estiverem ativados.

+
+ +

Histórico de execução

+ +

O intérprete lembra as expressões que você digitou. Para voltar e avançar no seu histórico:

+ + + +

O histórico de expressões é mantido nas sessões. Para limpar o histórico, use a função auxiliar clearHistory ().

+ +

Você pode iniciar uma pesquisa reversa através do histórico de expressões, da mesma forma que no bash no Linux e Mac ou no PowerShell no Windows. No Windows e Linux, pressione F9. No Mac, pressione Ctrl + R (nota: não Cmd + R!) Para iniciar a pesquisa reversa.

+ +

+ +

Digite o texto que deseja pesquisar na caixa de entrada na parte inferior do console. Comece a digitar parte da expressão que você está procurando e a primeira correspondência será exibida no console. Digitar repetidamente F9 no Windows e Linux (Ctrl + R no Mac) alterna entre as correspondências.

+ +

+ +

Depois de iniciar a pesquisa reversa, você pode usar Shift + F9 no Windows ou Linux (Ctrl + S no Mac) para pesquisar na lista de correspondências. Você também pode usar os ícones ⋀ e ⋁ na barra de pesquisa de expressões.

+ +

Quando encontrar a expressão desejada, pressione Enter (Return) para executar a instrução.

+ +

Trabalhando com iframes

+ +

Se uma página contiver iframes incorporados, você poderá usar a função cd () para alterar o escopo do console para um iframe específico e executar as funções definidas no documento hospedado por esse iframe. Existem três maneiras de selecionar um iframe usando cd ():

+ +

Você pode passar o elemento DOM iframe:

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

Você pode passar um seletor CSS que corresponda ao iframe:

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

Você pode passar o objeto de janela global do iframe:

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

Para alternar o contexto novamente para a janela de nível superior, chame cd () sem argumentos:

+ +
cd();
+ +

Por exemplo, suponha que tenhamos um documento que incorpore um iframe:

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

O iframe define uma nova função:

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

Você pode alternar o contexto para o iframe assim:

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

Agora você verá que o documento da janela global é o iframe:

+ +

E você pode chamar a função definida no iframe:

+ +

+ +

Comandos auxiliares

+ +

{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}

diff --git a/files/pt-br/tools/webide/index.html b/files/pt-br/tools/webide/index.html new file mode 100644 index 0000000000..155c119f26 --- /dev/null +++ b/files/pt-br/tools/webide/index.html @@ -0,0 +1,271 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - pt-br +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+
O WebIDE está disponível a partir do Firefox 34 em diante. 
+
+ +
+
O WebIDE é o substituto para o App Manager. Como o App Manager, ele lhe permite executar e depurar os aplicativos do Firefox OS usando o Firefox OS Simulator ou um dispositivo Firefox OS real . 
+ +
 
+ +
No entanto, ele também oferece um ambiente de edição para que você possa criar e desenvolver aplicativos do Firefox OS, incluindo uma exibição em árvore de todos os arquivos em seu aplicativo com a capacidade de editá-los e salvá-los, e dois modelos de aplicativos para ajudar você a começar.
+ +
 
+ +
Finalmente, WebIDE permite conectar as ferramentas de Firefox para Desenvolvedores a uma série de outros navegadores, incluindo o Firefox para Android, Chrome no Android, e Safari no iOS. Veja a página de Depuração Remota  para obter instruções sobre como se conectar a um navegador específico.
+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

Com a WebIDE, você primeiro deve configurar um ou mais runtimes (tempo de execução). Um runtime  é um ambiente no qual você vai executar e depurar o aplicativo. Um runtime pode ser um dispositivo Firefox OS conectado a um Desktop através de USB, ou poderia ser um Firefox OS Simulator instalado no próprio desktop.

+ +

Em seguida, você cria um aplicativo ou abre um aplicativo existente. Se você estiver criando um novo aplicativo  você inicia com um modelo que inclui a estrutura de diretórios e o mínimo que você precisa para começar, ou com um modelo mais completo que mostra como usar a API privilegiada. O WebIDE mostra os arquivos do seu aplicativo em estrutura de árvore, e você pode editar e salvá-los usando um editor embutido de código . Claro, você não tem que usar o editor embutido: você pode desenvolver seu aplicativo inteiramente fora do WebIDE, e só usá-lo para depurar ..

+ +

Finalmente, você pode instalar o aplicativo em uma das runtimes e executá-lo. Você pode, então, abrir o conjunto habitual de ferramentas de desenvolvimento - o Inspector, Console, JavaScript Debugger e assim por diante - para examinar e modificar o aplicativo em execução.

+ +

Requisitos do sistema

+ +

Para desenvolver e depurar aplicativos usando o WebIDE, tudo o que você precisa é o Firefox versão 33 ou superior. Para testar em um dispositivo Firefox OS real , você precisa de um dispositivo rodando o Firefox OS 1.2 ou superior, e um cabo USB.

+ +

Você só pode usar o WebIDE visando o Firefox OS 1.2 ou superior.

+ +

Abrindo a WebIDE

+ +

O WebIDE está escondido atrás de uma preferência. Para torná-lo visível visite about:config, procure a preferência chamada devtools.webide.enabled e a defina como true. Agora você verá uma nova entrada no menu  Web Developer chamado WebIDE. Clique nele e o WebIDE abre:

+ +

+ +

O dropdown na esquerda rotulado "Open App" permite abrir aplicativos existentes ou criar novos. O menu suspenso à direita chamado "Select Runtime" permite que você selecione um tempo de execução ou criação de um novo tempo de execução.

+ +

Os botões no meio, executam, param e depuram o app: eles só são ativados quando você abrir um app e selecionar um tempo de execução.

+ +

A partir do Firefox 36, você pode alterar o tamanho da fonte em todo WebIDE usando os atalhos de teclado padrão (use Command em vez de Controle no OS X):

+ + + +

Configurando runtimes (tempos de execução)

+ +

Sob o dropdown "Select Runtime", runtimes são agrupados em três tipos:

+ + + +

Da primeira vez que você clicar no dropdown, pode ser que você não veja nenhum tempo de execução:

+ +

O restante desta seção descreverá como você pode adicionar alguns runtimes.

+ +

Conectando um dispositivo Firefox OS

+ +

Antes de conectar um dispositivo OS Firefox , existem algumas configurações que você deve fazer:

+ + + +
+

Somente Linux :

+ + +
+ +
+

Somente Windows:

+ + +
+ +

Se existem outros dispositivos Android conectados ao seu computador, desconecte todos eles. Agora conecte o dispositivo ao computador usado o USB. Você deve ver o dispositivo aparecer em "USB DEVICES":

+ +

+ +

Se você não visualizar o seu dispositivo, veja a página de Solução de Problemas.

+ +

Adicionando um Simulador

+ +

O Firefox OS Simulator é uma versão das altas camadas do Firefox OS  que simula o dispositivo Firefox OS, mas roda no desktop. Ele roda em uma janela com o mesmo tamanho de um dispositivo com Firefox OS, inclui a interface de usuário do Firefox OS e aplicativos padrão, e simula muitas APIs de dispositivos Firefox OS.

+ +

Isso significa que em muitos casos, você não precisa de um dispositivo real para testar ou depurar sua aplicação.

+ +

O Simulador é grande, então não é distribuído junto com o Firefox mas como um add-on Firefox. Se você clicar em "Install Simulator" no menu de Runtimes, você vai para um página onde você pode instalar simuladores para várias versões do Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

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

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. If your device can be rooted, clicking "request higher privileges" will enable certified apps debugging (Firefox OS will restart).

+ +

Now in the WebIDE you should see all the certified apps on the device.

+ +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html b/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html new file mode 100644 index 0000000000..517e30a16a --- /dev/null +++ b/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html @@ -0,0 +1,53 @@ +--- +title: Trabalhando com Cordova apps na WebIDE +slug: Tools/WebIDE/Trabalhando_com_Cordova_apps_na_WebIDE +tags: + - App + - Cordova + - FirefoxOS +translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE +--- +
{{ToolsSidebar}}
+

Novo no Firefox 39.

+
+ +

Apache Cordova permite escrever um aplicativo utilizando HTML, JavaScript, and CSS, e gerar versões nativas para plataformas como iOS e Android. Com Cordova você também pode gerar versões do aplicativo para o Firefox OS.

+ +

A partir do Firefox 39, a WebIDE tem suporte direto para Apps desenvolvidos com Cordova, o que quer dizer que vocÊ pode utilizá-la para editar os aplicativos e gerar a versão para o Firefox OS diretamente a partir dela.

+ +

Primeiro, crie um app Cordova:

+ + + + + + + +

Em seguida:

+ + + +

Agora você pode editar o aplicativo como uma aplicação Cordova, e sempre que executar, a própria WebIDE irá gerar a versão para  o Firefox OS.Now you can edit the app as a Cordova app, and whenever you run the app, WebIDE takes care of generating the Firefox OS version behind the scenes. Sempre que você fizer uma alteração no manifesto do aplicativo, a WebIDE vai gerar uma nova versão do app e executar a validação do manifesto.

+ +

Clicando aqui você pode ver exemplos de Cordova App.

+ +

Mais detalhes sobre desenvolvimento para Firefox OS podem ser encontrados também no livro Desenvolvimento para firefox os - guia rápido, do André Garzia.

+ +

 

diff --git a/files/pt-br/tools/webide/troubleshooting/index.html b/files/pt-br/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..7f36c6749e --- /dev/null +++ b/files/pt-br/tools/webide/troubleshooting/index.html @@ -0,0 +1,62 @@ +--- +title: Resolução de Problemas WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

Conectando a um dispositivo Firefox OS

+ +

Se você está tentando conectar um dipositivo FirefoxOS ao WebIDE e ele não é exibido, aqui estão alguma coisas que você pode tentar:

+ + + +

Unrestricted debugging (including certified apps, built-in apps, apps already installed on a device)

+ +

If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on Unrestricted app debugging (including certified apps, main process, etc.).

+ +

Conectando a outros navegadores (Chrome, Safari)

+ +

WebIDE makes use of Valence (formerly Firefox Tools Adapter) to reach other browsers, like Chrome and Safari. 

+ +

If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the Valence page.

+ +

Ativando logging

+ +

You can also enable verbose logging to gather diagnostics:

+ +
    +
  1. visit about:config, and add a new preference called .console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true
    2. +
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. +
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. +
+ +

Obtenha Ajuda

+ +

Vá para #devtools sala no IRC e nós tentaremos te ajudar.

diff --git a/files/pt-br/tools/working_with_iframes/index.html b/files/pt-br/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..d9ea9662f8 --- /dev/null +++ b/files/pt-br/tools/working_with_iframes/index.html @@ -0,0 +1,32 @@ +--- +title: Working with iframes +slug: Tools/Working_with_iframes +tags: + - pt-br +translation_of: Tools/Working_with_iframes +--- +
{{ToolsSidebar}}
+
+

Este é um novo recurso no Firefox 34.

+
+ +

 no Firefox 34  em diante , você podera usar novas Ferramentas de desenvolvedor em um iframe especifico dentro do documento.

+
+ +
<iframe width="560" height="315" src="https://www.youtube.com/embed/Me9hjqd74m8" frameborder="0" allowfullscreen></iframe>
+ +

 

+ +

Este Recurso é por padrão  desativado e para  habilitál-o , abra as configurações  de ferramentas do desenvolvedor e marque a opção "Selecione um iframe que o documento atualmente "

+ +

Você vai ver agora um novo botão na Barra de Ferramentas:

+ +

Clique nele e você verá um poup listando todos os iframe no documento,bem como o proprio documento principal,

+ +

+ +
+

Nota-se que no momento em que você vai prescisar recarregar a pagina ou fechar e reabrir as ferramentas de desenvolvimento, a fim de ver o pop-up isso esta sendo rastreado como  bug 1062233.

+
+ +

Se você selecionar uma entrada na lista ,todas as ferramentas na caixa de ferramentas o  Inspector (inspetor), o Console (console ), o Debugger (depurador) e assim por diante  - e serão agora alvo apenas que  iframe, e será, essencialmente , se comportam como se o resto da pagina não existisse.

-- cgit v1.2.3-54-g00ecf