1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: Demonstração da IU
slug: Tools/Debugger/Demonstracao_IU
translation_of: Tools/Debugger/UI_Tour
---
<div>{{ToolsSidebar}}</div><p>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:</p>
<ul>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Painel da lista fonte</a></li>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">Painel fonte</a></li>
<li>Um terceiro painel que está subdividido em quatro secções:
<ul>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">Barra de ferramentas</a></li>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Breakpoints list</a></li>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack">Call stack</a></li>
<li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">Scopes</a></li>
</ul>
</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
<h2 id="Painel_da_lista_fonte">Painel da lista fonte</h2>
<p>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.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
<p>You can <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_for_files">search for a file</a> using <kbd>Ctrl</kbd> + <kbd>P</kbd> (<kbd>Cmd</kbd> + <kbd>P</kbd> on a Mac).</p>
<h2 id="Painel_fonte">Painel fonte</h2>
<p>This shows the JavaScript file currently loaded.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">When the source pane is focused you can <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">search for a string in the file</a> using <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac).</p>
<p><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Breakpoints</a> have a blue arrow overlaid on the line number. <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Conditional breakpoints</a> 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:</p>
<ul>
<li>line 19 has a normal breakpoint</li>
<li>line 40 has a normal breakpoint, and the debugger is paused there</li>
<li>line 22 has a conditional breakpoint.</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
<h2 id="Barra_de_Ferramentas"><a name="toolbar">Barra de Ferramentas</a></h2>
<p>No topo do painel à direita, existe uma barra de ferramentas:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
<p>A barra de ferramentas consiste em:</p>
<ul>
<li>four buttons to <a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">control the debugger's movement through the script</a>:
<ul>
<li><strong>Play/pause</strong> (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li>
<li><strong>Step over</strong> (F10): steps across the current line of JavaScript code.</li>
<li><strong>Step in</strong> (F11): steps into the function call on the current line of JavaScript code.</li>
<li><strong>Step out</strong> (Shift-F11): runs the script until the current function exits.</li>
</ul>
</li>
<li>a button to control whether to <a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">(1) ignore all exceptions, (2) break on uncaught exceptions, or (3) break on all exceptions</a>.</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p>
<h2 id="Lista_de_ponstos_de_quebra">Lista de ponstos de quebra</h2>
<p>Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">enable/disable it</a>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
<p> </p>
<p> </p>
<h2 id="Call_stack">Call stack</h2>
<p> </p>
<p> </p>
<p>When the debugger's paused, you'll see a call stack:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;">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.</p>
<h2 id="Scopes">Scopes</h2>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">Objects are organized by scope: the most local appears first, and the global scope (Window, in the case of page scripts) appears last.</p>
|
