From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../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/css_coverage/index.html | 136 ------- .../index.html | 60 --- .../how_to/set_watch_expressions/index.html | 60 +++ files/pt-br/tools/debugger/index.html | 448 +++++++++++++++++++++ .../pt-br/tools/debugger/set_a_logpoint/index.html | 53 +++ .../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/editor_de_estilos/index.html | 88 ---- .../tools/firefox_os_1.1_simulator/index.html | 359 +++++++++++++++++ .../tools/inspetor_de_armazenamento/index.html | 137 ------- .../tools/measure_a_portion_of_the_page/index.html | 38 ++ .../tools/medir_uma_porcao_da_pagina/index.html | 38 -- files/pt-br/tools/modo_design_adaptavel/index.html | 121 ------ files/pt-br/tools/notas_de_lancamento/index.html | 428 -------------------- .../how_to/examinando_eventos_escuta/index.html | 26 -- .../how_to/examine_event_listeners/index.html | 26 ++ .../trabalho_com_anima\303\247oes/index.html" | 175 -------- .../how_to/work_with_animations/index.html | 175 ++++++++ files/pt-br/tools/performance/index.html | 380 +++++++++++++++++ files/pt-br/tools/remote_debugging/index.html | 31 ++ .../pt-br/tools/responsive_design_mode/index.html | 121 ++++++ .../tools/simulador_firefox_os_1.1/index.html | 359 ----------------- files/pt-br/tools/storage_inspector/index.html | 137 +++++++ files/pt-br/tools/style_editor/index.html | 88 ++++ .../web_console/opening_the_web_console/index.html | 63 --- files/pt-br/tools/web_console/ui_tour/index.html | 63 +++ 32 files changed, 1979 insertions(+), 2722 deletions(-) delete mode 100644 files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html delete mode 100644 files/pt-br/tools/add-ons/index.html delete mode 100644 "files/pt-br/tools/atua\303\247\303\243o/index.html" delete mode 100644 files/pt-br/tools/css_coverage/index.html delete 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/set_watch_expressions/index.html create mode 100644 files/pt-br/tools/debugger/index.html create mode 100644 files/pt-br/tools/debugger/set_a_logpoint/index.html delete mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/pt-br/tools/debugger_(before_firefox_52)/index.html delete mode 100644 files/pt-br/tools/depurador/index.html delete mode 100644 files/pt-br/tools/depurador/set_a_logpoint/index.html delete mode 100644 "files/pt-br/tools/depura\303\247\303\243o_remota/index.html" delete mode 100644 files/pt-br/tools/editor_de_estilos/index.html create mode 100644 files/pt-br/tools/firefox_os_1.1_simulator/index.html delete mode 100644 files/pt-br/tools/inspetor_de_armazenamento/index.html create mode 100644 files/pt-br/tools/measure_a_portion_of_the_page/index.html delete mode 100644 files/pt-br/tools/medir_uma_porcao_da_pagina/index.html delete mode 100644 files/pt-br/tools/modo_design_adaptavel/index.html delete mode 100644 files/pt-br/tools/notas_de_lancamento/index.html delete 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_event_listeners/index.html delete 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/how_to/work_with_animations/index.html create mode 100644 files/pt-br/tools/performance/index.html create mode 100644 files/pt-br/tools/remote_debugging/index.html create mode 100644 files/pt-br/tools/responsive_design_mode/index.html delete mode 100644 files/pt-br/tools/simulador_firefox_os_1.1/index.html create mode 100644 files/pt-br/tools/storage_inspector/index.html create mode 100644 files/pt-br/tools/style_editor/index.html delete mode 100644 files/pt-br/tools/web_console/opening_the_web_console/index.html create mode 100644 files/pt-br/tools/web_console/ui_tour/index.html (limited to 'files/pt-br/tools') 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 deleted file mode 100644 index 6e70f0a1f6..0000000000 --- a/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 deleted file mode 100644 index 97b6d72ed1..0000000000 --- a/files/pt-br/tools/add-ons/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -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" deleted file mode 100644 index 880187e7e2..0000000000 --- "a/files/pt-br/tools/atua\303\247\303\243o/index.html" +++ /dev/null @@ -1,380 +0,0 @@ ---- -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/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html deleted file mode 100644 index 31d1c8be34..0000000000 --- a/files/pt-br/tools/css_coverage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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 deleted file mode 100644 index 232074130f..0000000000 --- a/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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 -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -
{{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/set_watch_expressions/index.html b/files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..232074130f --- /dev/null +++ b/files/pt-br/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,60 @@ +--- +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 +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +
{{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/index.html b/files/pt-br/tools/debugger/index.html new file mode 100644 index 0000000000..225f4cb20a --- /dev/null +++ b/files/pt-br/tools/debugger/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/debugger/set_a_logpoint/index.html b/files/pt-br/tools/debugger/set_a_logpoint/index.html new file mode 100644 index 0000000000..0a9b75f07d --- /dev/null +++ b/files/pt-br/tools/debugger/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/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index a4e9aa924c..0000000000 --- a/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -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 deleted file mode 100644 index 7d06312bdc..0000000000 --- a/files/pt-br/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -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 deleted file mode 100644 index 225f4cb20a..0000000000 --- a/files/pt-br/tools/depurador/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -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 deleted file mode 100644 index 0a9b75f07d..0000000000 --- a/files/pt-br/tools/depurador/set_a_logpoint/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -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" deleted file mode 100644 index 6359eededd..0000000000 --- "a/files/pt-br/tools/depura\303\247\303\243o_remota/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/editor_de_estilos/index.html b/files/pt-br/tools/editor_de_estilos/index.html deleted file mode 100644 index 903428edc7..0000000000 --- a/files/pt-br/tools/editor_de_estilos/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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/firefox_os_1.1_simulator/index.html b/files/pt-br/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..8b710a1cea --- /dev/null +++ b/files/pt-br/tools/firefox_os_1.1_simulator/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/inspetor_de_armazenamento/index.html b/files/pt-br/tools/inspetor_de_armazenamento/index.html deleted file mode 100644 index 82215530a4..0000000000 --- a/files/pt-br/tools/inspetor_de_armazenamento/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -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/measure_a_portion_of_the_page/index.html b/files/pt-br/tools/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..005813bc8f --- /dev/null +++ b/files/pt-br/tools/measure_a_portion_of_the_page/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/medir_uma_porcao_da_pagina/index.html b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html deleted file mode 100644 index 005813bc8f..0000000000 --- a/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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/modo_design_adaptavel/index.html b/files/pt-br/tools/modo_design_adaptavel/index.html deleted file mode 100644 index a5b6935fd3..0000000000 --- a/files/pt-br/tools/modo_design_adaptavel/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -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/notas_de_lancamento/index.html b/files/pt-br/tools/notas_de_lancamento/index.html deleted file mode 100644 index c74b2f5b90..0000000000 --- a/files/pt-br/tools/notas_de_lancamento/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: Notas de lançamento -slug: Tools/Notas_de_lancamento -tags: - - Notas de lançamento -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes ---- -
{{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/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html deleted file mode 100644 index b1c8414a5b..0000000000 --- a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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_event_listeners/index.html b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..b1c8414a5b --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_event_listeners/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/trabalho_com_anima\303\247oes/index.html" "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" deleted file mode 100644 index 8d2d788d50..0000000000 --- "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" +++ /dev/null @@ -1,175 +0,0 @@ ---- -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/how_to/work_with_animations/index.html b/files/pt-br/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..8d2d788d50 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/work_with_animations/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/performance/index.html b/files/pt-br/tools/performance/index.html new file mode 100644 index 0000000000..880187e7e2 --- /dev/null +++ b/files/pt-br/tools/performance/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/remote_debugging/index.html b/files/pt-br/tools/remote_debugging/index.html new file mode 100644 index 0000000000..6359eededd --- /dev/null +++ b/files/pt-br/tools/remote_debugging/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/responsive_design_mode/index.html b/files/pt-br/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..a5b6935fd3 --- /dev/null +++ b/files/pt-br/tools/responsive_design_mode/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/simulador_firefox_os_1.1/index.html b/files/pt-br/tools/simulador_firefox_os_1.1/index.html deleted file mode 100644 index 8b710a1cea..0000000000 --- a/files/pt-br/tools/simulador_firefox_os_1.1/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -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/storage_inspector/index.html b/files/pt-br/tools/storage_inspector/index.html new file mode 100644 index 0000000000..82215530a4 --- /dev/null +++ b/files/pt-br/tools/storage_inspector/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/style_editor/index.html b/files/pt-br/tools/style_editor/index.html new file mode 100644 index 0000000000..903428edc7 --- /dev/null +++ b/files/pt-br/tools/style_editor/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/web_console/opening_the_web_console/index.html b/files/pt-br/tools/web_console/opening_the_web_console/index.html deleted file mode 100644 index ae0c05f78e..0000000000 --- a/files/pt-br/tools/web_console/opening_the_web_console/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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/ui_tour/index.html b/files/pt-br/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..ae0c05f78e --- /dev/null +++ b/files/pt-br/tools/web_console/ui_tour/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.

-- cgit v1.2.3-54-g00ecf