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 --- .../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 +++ 4 files changed, 561 insertions(+), 60 deletions(-) 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 (limited to 'files/pt-br/tools/debugger') 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

+ + -- cgit v1.2.3-54-g00ecf