Demonstração da IU

Esta tradução não está completa. Por favor ajude a traduzir este artigo a partir do Inglês.

Este artigo é uma demonstração rápida das secções principais da interface do utilizador do Depurador de JavaScript. A IU está dividida em 6 secções principais, que nós iremos abranger uma de cada vez:

Barra de Ferramentas

The toolbar consists of four sections:

The four buttons on the left perform the following functions:

  • Pause/Resume (F8): pauses or resumes execution of the script you're debugging. When it's blue and "pressed", as above, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.
  • Step Over (F10): steps across the current line of JavaScript code.
  • Step Into (F11): steps into the function call on the current line of JavaScript code.
  • Step Out (Shift-F11): runs the script until the current function exits.

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

Painel da lista fonte

The source list pane lists all the JS source files loaded into the page, and enables you to select one to debug. The source list pane shares its screen real estate with the call stack pane, and you can use the tabs at the top of the pane to switch between them.

Source files are grouped under different headings according to where they are loaded from. You can select any of these files and they will be loaded into the Source pane.

Any breakpoints you've set in a source file are listed in the source list pane under the filename. The check box next to each breakpoint lets you enable/disable it. Right-clicking on the breakpoint's entry in the list shows a context menu enabling you to:

  • enable, disable or remove this breakpoint, all breakpoints, or all breakpoints except this one
  • make this breakpoint conditional (or edit its conditions, if it is already conditional)

The three icons at the bottom of the source list pane enable you to black box a source, pretty-print minified JS files, and disable/enable all breakpoints.

There's a context menu for items in the source list, which enables you to copy the URL from which they were served, or to open the URL in a new tab:

Painel de stack de chamada

The other tab on the left-hand side of the debugger displays a vertical call stack:

Each row represents a level in the call stack, with the current stack frame on top. The row shows the name of the function currently executing, and a link to its source file and line number.

Painel fonte

This shows the JavaScript file currently loaded. Breakpoints have a blue arrow overlaid on the line number, while breakpoints you've hit have a green arrow:

In the source pane, the context menu enables you to:

  • set a breakpoint
  • set a conditional breakpoint
  • add a watch expression for the selection
  • search or filter using the script filter

Starting in Firefox 44, you can jump from a function call to its definition. Just hold the control key (command key on Mac OS X) and click the function's name.

Aviso de variáveis

If you hover the mouse over a variable in the source pane, a popup appears showing you that variable's current value:

This enables you to get a quick look at a variable without having to open and search the variables pane.

Painel de variáveis

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.

Painel de eventos

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.

Etiquetas do documento e contribuidores

 Contribuidores para esta página: mansil
 Última atualização por: mansil,