// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Usando o Depurador Visual no NetBeans IDE
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Usando o Depurador Visual no NetBeans IDE - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Usando o Depurador Visual no NetBeans IDE

Este documento descreve como usar o Depurador Visual para ajudá-lo a localizar e depurar o código de elementos visuais em sua aplicação GUI. Você pode usar o depurador visual nas aplicações GUI Java e JavaFX.

Neste documento, você irá usar o Depurador Visual para explorar o projeto de amostra Jogo de Anagramas. Este documento irá demonstrar como obter um snapshot da GUI da aplicação, e a seguir trabalhar com o snapshot para localizar os códigos-fonte, adicionar listeners aos eventos e exibir o log de eventos de componentes da GUI.


image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]


*Para seguir este tutorial, são necessários os recursos e o software a seguir.*

|===
|Software ou Recurso |Versão Necessária 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2, 7.3, 7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |versão 7 ou 8 
|===

*Observação sobre JUnit.* Se as bibliotecas JUnit não tiverem sido instaladas quando você instalou o IDE, você será solicitado a resolver os recursos ausentes e instalar o JUnit quando tentar depurar a aplicação.


== Obtendo um Snapshot da GUI

Neste tutorial você irá usar a aplicação de amostra Jogo de Anagramas, uma aplicação desktop Java com uma GUI simples, que está disponível como amostra no assistente Novo Projeto. Após você criar o projeto, irá iniciar uma sessão de depuração e obter um snapshot da GUI da aplicação.

1. Escolha Arquivo > Novo Projeto no menu principal (Ctrl-Shift-N; ⌘-Shift-N no Mac) para abrir o assistente Novo Projeto.
2. Selecione Jogo de Anagramas na categoria Amostras > Java. Clique em Próximo.
3. Selecione uma localização para o projeto. Clique em Finalizar.

Quando você clica em Finalizar, o IDE cria o projeto e o abre na janela Projetos.


. Clique no botão Depurar na barra de ferramentas (Ctrl-F5; -F5 no Mac) para iniciar a sessão de depuração.

Alternativamente, clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Depurar.

Quando você inicia a sessão, o IDE irá iniciar a aplicação Jogo de Anagramas e abrirá a janela Depuração.

Para obter mais informações sobre a execução do depurador, consulte link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG798[+Sobre Execução e Depuração de Projetos de Aplicação Java+] em _Desenvolvendo Aplicações com o NetBeans IDE_.


. Escolha Depurar > Obter Snapshot da GUI no menu principal.

Quando você escolhe Obter um Snapshot da GUI, o IDE irá obter um snapshot da GUI e irá abrir o snapshot na janela principal.

[.feature]
--
image::images/debug-fullscreen.png[role="left", link="images/debug-fullscreen.png"]
--

Neste guia para o depurador visual de erros, você não irá usar a janela Depuração.


== Trabalhando com o Depurador Visual

O snapshot da GUI é uma ferramenta de depuração visual que pode ajudar a localizar os códigos-fonte para componentes da GUI. Os códigos-fonte para componentes da GUI pode ser às vezes difícil de ser localizado e o snapshot fornece um meio para localizar o código com base na GUI ao invés de procurar por meio do código. Você seleciona os componentes no snapshot e chama tarefas no menu pop-up para exibir os códigos-fonte para o componente, mostrar os listeners e definir pontos de interrupção nos componentes.


=== Localizando s Código-fonte para Componentes

Neste exercício iremos demonstrar como usar o snapshot da GUI para navegar para as linhas nos códigos-fonte onde um componente está declarado e definido. Quando você selecionar um componente no snapshot da GUI, poderá usar o menu pop-up para chamar diversos comandos.

Os comandos também podem ser chamados da janela Navegador ao clicar com o botão direito do mouse no componente e ao escolher o comando no menu pop-up.

1. No snapshot da GUI, selecione o botão Adivinhar.

Quando você seleciona o componente no snapshot, o IDE exibe detalhes sobre o componente selecionado na janela Propriedades. Se a janela Propriedades não estiver visível, você poderá escolher Janela > Propriedades no menu principal para abrir a janela.

image::images/debug-snapshot.png[title="Snapshot GUI"]

O IDE também exibe o local do componente na forma hierárquica na janela Navegador.

image::images/debug-navigator.png[title="Snapshot GUI"]


. Clique com o botão direito do mouse no botão Adivinhar no snapshot e escolha Ir para a Declaração do Componente no menu pop-up.

Quando você escolhe Ir para a Declaração do Componente, o IDE abre o arquivo de códigos-fonte no editor e move o cursor para a linha no código onde  ``guessButton``  está declarado.

image::images/debug-gotodeclaration.png[title="Linha de código onde o componente é declarado"]


. Clique novamente com o botão direito do mouse no botão Adivinhar no snapshot e escolha Ir para o Código-fonte do Componente.

Quando você escolhe Ir para o Código-fonte do Componente, o IDE abre o arquivo de códigos-fonte no editor e move o cursor para a linha no código para o componente JButton.

image::images/debug-gotosource.png[title="Linha de código-fonte para o componente"]

Você pode usar o comando Ir Para a Adição de Hierarquia no snapshot GUI para localizar a linha no código-fonte no qual um componente é adicionado ao seu contêiner. O comando Ir Para a Adição de Hierarquia é desativado por default. Você pode ativar o comando na janela Opções.

1. Abra a janela Opções.
2. Clique na guia Depurador Java na categoria Java na janela Opções.

*Observação.* No NetBeans IDE 7.1, a guia Depurador Java está localizada na categoria Diversos na janela Opções.


. Selecione Depuração Visual na lista de categorias e selecione *Rastrear as localizações das alterações de hierarquia do componente*. Clique em OK.


. Interrompa sua sessão de depuração (se uma estiver em execução).

*Observação.* Após ativar o comando na janela Opções, você precisará reiniciar sua sessão de depuração e obter um novo snapshot GUI antes de usar o comando Ir Para a Adição de Hierarquia.


. Inicie uma sessão de depuração e obtenha um snapshot da GUI.


. Clique com o botão direito do mouse em um componente no snapshot da GUI e escolha Ir Para a Adição de Hierarquia.

O IDE irá abrir o código-fonte no editor na linha onde o componente está adicionado.

image::images/debug-hierarchy.png[title="Linha do código-fonte onde o componente é adicionado ao contêiner"]


=== Explorando Eventos do Componente

Este exercício irá demonstrar como você pode usar o snapshot da GUI e a janela Eventos para explorar eventos do componente permitindo localizar os listeners do componente e os eventos que são acionados pelos componentes.

1. Clique com o botão direito do mouse no botão Adivinhar no snapshot e escolha Mostrar listeners no menu pop-up.

Quando você escolhe Mostrar Listeners, o IDE abre a janela Eventos. Você pode ver que o nó Listeners Personalizados está expandido.

image::images/debug-customlisteners.png[title="Linha do código-fonte onde o componente é adicionado ao contêiner"]


. Clique com o botão direito do mouse em *com.toy.anagrams.ui.Anagrams$3* abaixo do nó Listeners Personalizados e escolha Ir para o Código-fonte do Componente no menu pop-up.

O código-fonte é aberto no editor na linha onde o listener está definido.


. Selecione o campo de texto vazio no snapshot.

Outra opção é selecionar o campo de texto  ``guessedWord``  na janela Navegador.

Quando você selecionar o campo de texto, os itens na janela Eventos irá mudar automaticamente para exibir os listeners para o componente selecionado.


. Na janela Eventos, clique duas vezes no nó Log de Eventos para abrir a janela Selecionar Listener.

Se preferir, clique com o botão direito do mouse no nó Log de Eventos e escolha Definir o Log de Eventos do menu pop-up.


. Selecione o listener ``java.awt.event.KeyListener``  na caixa de diálogo. Clique em OK.
image::images/debug-select-listener.png[title="Linha do código-fonte onde o componente é adicionado ao contêiner"]

Este listener está agora fazendo listening para eventos de teclado no campo de texto.


. Na aplicação Jogo de Anagramas, digite alguns caracteres no campo de texto.

Quando você digita um caractere no campo de texto, o evento é registrado no log de eventos. Caso você expanda o nó Log de Eventos, poderá ver que cada tecla pressionada está agora registrada. Novos eventos aparecem todas as vezes que você digita no campo de texto da aplicação Jogo de Anagramas. Se você expandir um evento individual, por exemplo  ``keyPressed`` , poderá ver as propriedades daquele evento no log.

image::images/debug-eventlog.png[title="Linha do código-fonte onde o componente é adicionado ao contêiner"]

Caso você expanda o nó "Chamado de..." para um evento, poderá ver o traço da pilha para o evento.

Este tutorial foi uma introdução básica para o depurador visual no IDE. O depurador visual permite localizar com facilidade o código-fonte e eventos do log para componentes da GUI. Isso pode ser extremamente útil quando você estiver depurando aplicações de GUI.


link:https://netbeans.org/about/contact_form.html?to=3&subject=Feedback:%20Using%20the%20Visual%20Debugger[+Enviar Feedback neste Tutorial+]


== Consulte Também

Para obter mais informações sobre o desenvolvimento e teste de aplicações Java no NetBeans IDE, veja os recursos a seguir:

* link:gui-functionality.html[+Introdução à Construção de GUIs do Java+]
* Demonstração: link:debug-visual-screencast.html[+Usando o Depurador Visual+]
* Demonstração: link:debug-multithreaded-screencast.html[+Depurando uma Aplicação Multithread+]
* Demonstração: link:debug-stepinto-screencast.html[+Ação Visual Step Into no Depurador do NetBeans+]
* Demonstração: link:debug-deadlock-screencast.html[+Detecção de Bloqueio usando o Depurador do NetBeans+]
* Demonstração: link:debug-evaluator-screencast.html[+Usando o Avaliador de Snippet do Código no Depurador do NetBeans+]
* link:../../trails/java-se.html[+Trilha de Aprendizado da Programação Java e IDE Básica+]