From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../configura\303\247\303\265es/index.html" | 59 ++++++++++++++ .../tools/debugger/demonstracao_iu/index.html | 94 ++++++++++++++++++++++ .../debugger/how_to/abrir_o_depurador/index.html | 18 +++++ files/pt-pt/tools/debugger/how_to/index.html | 11 +++ .../debugger/how_to/use_a_source_map/index.html | 32 ++++++++ files/pt-pt/tools/debugger/index.html | 62 ++++++++++++++ .../tools/debugger/source_map_errors/index.html | 70 ++++++++++++++++ 7 files changed, 346 insertions(+) create mode 100644 "files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" create mode 100644 files/pt-pt/tools/debugger/demonstracao_iu/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/index.html create mode 100644 files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/pt-pt/tools/debugger/index.html create mode 100644 files/pt-pt/tools/debugger/source_map_errors/index.html (limited to 'files/pt-pt/tools/debugger') diff --git "a/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" "b/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" new file mode 100644 index 0000000000..bd111e5058 --- /dev/null +++ "b/files/pt-pt/tools/debugger/configura\303\247\303\265es/index.html" @@ -0,0 +1,59 @@ +--- +title: Configurações +slug: Tools/Debugger/Configurações +translation_of: Archive/Tools/Debugger_settings +--- +
{{ToolsSidebar}}

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

+ +

+ +

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

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

If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.

+ +

This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.

+
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesDo not display non-enumerable JavaScript properties.
Show Variables Filter BoxEnabling this option adds a "Filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
Show Original SourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.
Automatically Black Box Minified Sources +
+

New in Firefox 33.

+
+ +

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

+
+ +

 

diff --git a/files/pt-pt/tools/debugger/demonstracao_iu/index.html b/files/pt-pt/tools/debugger/demonstracao_iu/index.html new file mode 100644 index 0000000000..9402c890b7 --- /dev/null +++ b/files/pt-pt/tools/debugger/demonstracao_iu/index.html @@ -0,0 +1,94 @@ +--- +title: Demonstração da IU +slug: Tools/Debugger/Demonstracao_IU +translation_of: Tools/Debugger/UI_Tour +--- +
{{ToolsSidebar}}

Este artigo é uma demonstração rápida das secções principais da interface do utilizador do 'Depurador de JavaScript'. A IU está dividida verticalmente em 3 painéis:

+ + + +

+ +

Painel da lista fonte

+ +

The source list pane lists all the JavaScript source files loaded into the page, and enables you to select one to debug. At the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.

+ +

+ +

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

+ +

Painel fonte

+ +

This shows the JavaScript file currently loaded.

+ +

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

+ +

Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:

+ + + +

+ +

Barra de Ferramentas

+ +

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

+ +

+ +

A barra de ferramentas consiste em:

+ + + +

+ +

Lista de ponstos de quebra

+ +

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

+ +

+ +

 

+ +

 

+ +

Call stack

+ +

 

+ +

 

+ +

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

+ +

Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.

+ +

Scopes

+ +

In the right-hand pane you'll see a label "Scopes" with a disclosure arrow next to it. When the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program:

+ +

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

diff --git a/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html b/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html new file mode 100644 index 0000000000..c7e9842588 --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/abrir_o_depurador/index.html @@ -0,0 +1,18 @@ +--- +title: Abrir o depurador +slug: Tools/Debugger/How_to/Abrir_o_depurador +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

Existem três maneiras para abrir o depurador:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

diff --git a/files/pt-pt/tools/debugger/how_to/index.html b/files/pt-pt/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html b/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..93144c1b5f --- /dev/null +++ b/files/pt-pt/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Utilizar um "source map" +slug: Tools/Debugger/How_to/Use_a_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

As fontes de JavaScript executadas pelo navegador são geralmente transformadas de alguma forma a partir das fontes originais criadas por um programador. Por exemplo:

+ + + +

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

+ +

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

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

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

No vídeo acima carregamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Essa página carrega um fonte chamado "main.js" que foi originalmente escrito em CoffeeScript e compilado para JavaScript. O fonte compilado contém um comentário assim, que aponta para o source map:

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

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

diff --git a/files/pt-pt/tools/debugger/index.html b/files/pt-pt/tools/debugger/index.html new file mode 100644 index 0000000000..dc6feaf51b --- /dev/null +++ b/files/pt-pt/tools/debugger/index.html @@ -0,0 +1,62 @@ +--- +title: Depurador +slug: Tools/Debugger +tags: + - Depurador + - Depuração + - Ferramentas + - Ferramentas de Desenvolvimento + - Firefox OS + - 'l10n:prioridade' +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +
O «Depurador» de JavaScript permite-lhe explorar o código de JavaScript e examinar ou modifcar o seu estado para ajudar a rastrear erros (bugs).
+ +
+ +
+

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Pode-o utilizar para depurar código em execução localmente no Firefox ou em execução remotamente, por exemplo num dispositivo Android a executar o Firefox para Android. Consulte depuração remota para saber como ligar o depurador a um destino remoto.

+ +

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

+
+ +

Como...

+ +

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

+ +
+ +
+ +
+

Referência

+ +
+ +
diff --git a/files/pt-pt/tools/debugger/source_map_errors/index.html b/files/pt-pt/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..4e5dfc450a --- /dev/null +++ b/files/pt-pt/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Depurador + - Depuração + - Ferramentas + - Ferramentas de Desenvolvimento + - Referencia + - Source maps +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Source maps são ficheiros JSON que fornecem um modo para associar as fontes transformadas, como visto pelo navegador, com as suas fontes originais, conforme escrito pelo programador. Às vezes, pode encontrar problemas ao trabalhar com source maps. Esta página explica os problemas mais comuns e como os corrigir.

+ +
+

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

+
+ +

Reportar "Source map error" geral

+ +

If you do see a problem, a message will appear in the webconsole. This message will show an error message, the resource URL, and the source map URL:

+ +

Error from invalid JSON

+ +

Here, the resource URL tells us that bundle.js mentions a source map, and the source map URL tells us where to find the source map data (in this case, relative to the resource).  The error tells us that the source map is not JSON data — so we're serving the wrong file.

+ +

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

+ +

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

+ +

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

+ +

Source map file is missing

+ +

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

+ +

"Source map" inválido

+ +

The source map data can be invalid — either simply not a JSON file at all, or with an incorrect structure. Typical error messages here are:

+ + + +

Error: "version" is a required argument

+ +

"Source" original está em falta

+ +

An original source may be missing.  You may encounter this when trying to open one of the original sources in the debugger. The message looks a little different in this case:

+ +

Debugger source tab showing the error

+ +

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

+ +

Debugger source tab showing the error

+ +

"NetworkError" quando tenta obter o recurso

+ +

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

+ +

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

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.

-- cgit v1.2.3-54-g00ecf