Internet Explorer

1. Inicie o depurador, clicando com o botão direito do mouse em seu projeto na janela Projetos e escolhendo Depurar.
2. Na caixa de diálogo exibida, selecione a opção Java do lado do servidor com JavaScript do lado do cliente no navegador selecionado. Em seguida, selecione Internet Explorer.
   
   

   Observação: Você também pode desativar o depurador do lado do servidor, ou desativar o depurador do lado do cliente em uma fase posterior na caixa de diálogo Propriedades do seu projeto (Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades). Consulte Ativando e desativando o depurador.

3. Clique em Depurar. Quando você seleciona a opção de depuração do lado do cliente para Internet Explorer e clica em Depurar, o IDE primeiro verifica se o framework do depurador de script ativo está instalado. Caso ele não esteja instalado, você será solicitado a baixar e instalar o framework.
   
   Seu navegador é iniciado no local do site da Microsoft em que o framework pode ser baixado. Baixe e instale o framework.
4. Quando você receber a confirmação de que o framework do depurador de script ativo foi instalado, volte para o IDE e clique em OK. O IDE verifica se você possui a extensão do Internet Explorer do NetBeans registrada em seu navegador. Caso não tenha, é exibida uma caixa de diálogo solicitando que você permita ao IDE instalar a extensão do Internet Explorer do NetBeans.
5. Clique em OK. O IDE registra a extensão em seu navegador, a sessão de depuração é iniciada, e a página de boas-vindas do aplicativo em que você está executando a sessão de depuração é exibida em seu navegador.
6. Retorne o foco para o IDE. A barra de ferramentas do depurador é exibida acima do editor. Todos os ícones da barra de ferramentas são ativados quando o código fica suspenso. A página de índice do projeto se abre no editor do IDE.
   
   Por padrão, várias janelas são ativadas na região inferior do IDE, incluindo Inspeções, Variáveis locais e Pilha de chamadas. O console do depurador inicialmente é exibido na janela Saída, indicando que uma sessão de depuração foi iniciada. O console do depurador pode ser usando durante uma sessão de depuração para mostrar erros de avaliação, exceções lançada e outras informações.
   

Firefox

1. Inicie o depurador, clicando com o botão direito do mouse em seu projeto na janela Projetos e escolhendo Depurar.
2. Na caixa de diálogo exibida, selecione a opção Java do lado do servidor com JavaScript do lado do cliente no navegador selecionado. Em seguida, selecione Firefox.
   
   

   Observação: Você também pode desativar o depurador do lado do servidor, ou desativar o depurador do lado do cliente em uma fase posterior na caixa de diálogo Propriedades do seu projeto (Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades). Consulte Ativando e desativando o depurador.

3. Clique em Depurar. Quando você seleciona a opção de depuração do lado do cliente para Firefox e clica em Depurar, o IDE verifica se você possui o suplemento Firebug e a extensão do Firefox do NetBeans instalada no Firefox. Caso os mesmos não estejam instalados, o IDE tenta instalá-los.
   

   Verifique se o Firefox está fechado antes de clicar em OK. Caso não esteja, o navegador não poderá ser carregado com o suplemento e a extensão ativados, e você precisará reiniciá-lo manualmente e, em seguida, executar novamente o depurador.

4. Clique em OK. Ambos os componentes são instalados e o navegador é iniciado, exibindo a página de boas-vindas do aplicativo em que você está executando a sessão de depuração.
   
   Quando o Firebug e a extensão do Firefox do NetBeans tiverem sido instalados com êxito, seus ícones serão exibidos no canto direito inferior do navegador Firefox:
   • Firebug:
   • Extensão do Firefox do NetBeans:

   Clicando no ícone da extensão do Firefox do NetBeans, você pode visualizar uma caixa de diálogo que contém detalhes sobre a extensão.

   
5. Retorne o foco para o IDE. A barra de ferramentas do depurador é exibida acima do editor. Todos os ícones da barra de ferramentas são ativados quando o código fica suspenso. A página de índice do projeto se abre no editor do IDE.
   
   Por padrão, várias janelas são ativadas na região inferior do IDE, incluindo Inspeções, Variáveis locais e Pilha de chamadas. O console do depurador inicialmente é exibido na janela Saída, indicando que uma sessão de depuração foi iniciada. O console do depurador pode ser usando durante uma sessão de depuração para mostrar erros de avaliação, exceções lançada e outras informações.
   

Depurando um projeto

Você pode executar o depurador JavaScript em um projeto inteiro.

1. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Depurar. O arquivo de índice será aberto no editor, caso o depurador não seja suspenso.

Observação: Se o projeto que deseja depurar estiver definido como o projeto principal, você também pode escolher Depurar > Depurar projeto principal no menu principal do IDE, ou escolher o ícone Depurar projeto (  ) na barra de ferramentas principal. Para definir um projeto principal, clique com o botão direito do mouse no projeto que deseja definir e escolha Definir como projeto principal.

Depurando um arquivo

Você pode executar o depurador em um arquivo individual, tal como um arquivo HTML ou JSP.

1. Clique com o botão direito do mouse na janela Projetos e escolha Depurar arquivo. Você também pode escolher Depurar > Depurar arquivo no menu principal do IDE. O arquivo que está sendo depurado se abre no editor, caso o depurador não tenha sido suspenso.

Depurando um código-fonte externo

Se você estiver conectado à Internet, é possível executar o depurador em uma URL externa. Isso permite que você visualize e examine o código JavaScript incluído em páginas disponibilizadas publicamente.

1. Escolha Depurar > Anexar depurador no menu principal do IDE.
2. Na caixa de diálogo Anexar depurador, selecione Depurador da página da Web (JavaScript) na lista suspensa Depurador.
3. Indique a URL da página que em deseja executar o depurador e clique em OK.
   
   

Ao depurar um código-fonte externo, você pode usar a janela Códigos-fonte para visualizar os caminhos da URL de todos os recursos que estão sendo usados. Você também pode usar o editor e a barra de ferramentas para percorrer e examinar o código linha por linha.

Usando a barra de ferramentas do depurador

Quando você executa uma sessão de depuração, a barra de ferramentas do depurador é exibida acima do editor. Dependendo se você configurou o depurador para ficar suspenso em determinadas condições (Você pode especificar as configurações de depuração na janela Opções - consulte Configurando o depurador.), a barra de ferramentas é exibida em um estado ativo ou suspenso.

Estado ativo:
A sessão de depuração está ativa, e as janelas de depuração contêm dados baseados no estado dos arquivos e scripts carregados em seu navegador. Você pode clicar em Pausa para suspender o depurador na próxima chamada de JavaScript.
Estado suspenso:
A sessão de depuração está suspensa. Se a execução for interrompida em um ponto específico em seus arquivos, o editor indica a localização da linha com um emblema de seta e segundo plano verde (  ) na margem esquerda. Você pode usar a barra de ferramentas para passar por seu código.

A barra de ferramentas oferece as seguintes ações:

Terminar sessão (  )	Terminar sessão de depuração
Pausa (  )	Suspender sessão de depuração
Retomar (  )	Retomar sessão de depuração
Passar por cima (  )	Passar por cima de uma instrução de execução
Passar para dentro (  )	Passar para dentro de uma chamada de função
Passar por fora (  )	Passar por fora da chamada de função atual
Executar até o cursor (  )	Executar até a posição do cursor

Observação: Quando há várias instruções do JavaScript em uma única linha, escolher Passar por cima no Internet Explorer resulta em prosseguir para a próxima instrução na mesma linha. No caso do FireFox, o depurador executa todas as instruções em uma determinada linha e, em seguida, se move para a próxima linha.

Configurando pontos de interrupção

Defina pontos de interrupção em seus arquivos para informar ao depurador onde parar durante a execução. Você pode definir pontos de interrupção em arquivos HTML e JavaScript. Você também pode definir pontos de interrupção no código JavaScript de quaisquer arquivos somente leitura ([r/o]) que o IDE tenha acessado no cache do navegador.

Para definir um ponto de interrupção, clique na margem esquerda do editor na linha em que deseja definir o ponto de interrupção.

Você pode remover o ponto de interrupção, clicando no emblema do ponto de interrupção (  ).

Também é possível desativar temporariamente os pontos de interrupção. Para fazê-lo, clique com o botão direito do mouse em um emblema de ponto de interrupção e escolha Ponto de interrupção > Ativado. Isso alterna o ponto de interrupção para um estado desativado, resultando em um emblema cinza (  ) exibido na margem esquerda.

Se o depurador encontrar um ponto de interrupção durante a execução, ele pára no ponto de interrupção, permitindo que você examine as variáveis nas janelas de depuração e passe por qualquer código seguinte ao ponto de interrupção.

Também é possível personalizar pontos de interrupção, configurando uma contagem de ocorrências e/ou expressão condicional, de forma que o depurador pare no ponto de interrupção somente quando a contagem de ocorrências for alcançada, ou a expressão condicional seja avaliada como verdadeira. Instruções sobre a personalização de pontos de interrupção também são discutidas abaixo, na janela Pontos de interrupção. Para personalizar um ponto de interrupção, clique com o botão direito do mouse no emblema de um ponto de interrupção na margem esquerda do editor e escolha Ponto de interrupção (ou Desativar ponto de interrupção) > Propriedades.

Examinando dicas de ferramentas

Quando o depurador é suspenso durante uma sessão de depuração, você pode passar o mouse sobre um identificador JavaScript no editor para exibir uma dica de ferramenta. Se o identificador for válido no quadro da pilha de chamadas selecionado, seu valor é exibido. Você também pode selecionar expressões JavaScript. O valor da expressão é mostrado em uma dica de ferramentas.

Janela Sessões

A janela Sessões mostra quaisquer sessões de depuração que estejam ativas no momento. Quando você inicia uma sessão de depuração do JavaScript, é possível ver uma entrada para o depurador JavaScript na janela Sessões.

O NetBeans IDE também permite que você execute várias sessões do depurador simultaneamente. Por exemplo, se você estiver trabalhando em um projeto baseado em Java e tiver ativado o depurador do lado do cliente e do lado do servidor, será possível identificar duas sessões listadas na janela Sessões.

A sessão atual (ou seja, a sessão que você pode controlar usando a barra de ferramentas do depurador) é indicada pelo ícone proeminente ( ). Para alternar sessões, você pode clicar duas vezes na sessão que deseja tornar atual, ou clicar com o botão direito do mouse em uma sessão não-atual e escolher Tornar atual.

Você também usa a janela do pop-up do lado direito do mouse para terminar uma sessão (clicar com o botão direito do mouse e escolher Terminar), ou alternar entre a depuração do thread atual ou todos os threads da sessão (clicar com o botão direito do mouse e escolher Escopo > Depurar todos os threads ou Depurar thread atual).

Janela Variáveis locais

Quando o depurador é suspenso, a janela Variáveis locais exibe as variáveis locais do objeto window atual do quadro selecionado da pilha de chamadas. Ele mostra dois nós superiores:

• scope: O escopo da chamada da função do quadro atual. Todas as propriedades listadas representam variáveis que você pode buscar no escopo atual.
• this: O valor da palavra-chave this do quadro atual. Todas as propriedades listadas representam a referência atual a this.

scope e this são termos que pertencem à sintaxe JavaScript e devem ser compreendidos para que a janela Variáveis locais seja usada. Para ter uma idéia melhor, consulte os artigos seguintes sobre this e scope.

O nó escopo sempre é expandido. Além de mostrar variáveis locais e parâmetros da chamada de função associada ao quadro selecionado da pilha de chamadas, os seguintes nós adicionais são mostrados:

• arguments: argumentos reais em vez dos parâmetros formais declarados
• arguments.length: o número de argumentos reais passados para a função
• arguments.callee.length: o número esperado de argumentos conforme declarados na assinatura da função
• parent scope: informações sobre o escopo fora do escopo da chamada de função atual

Quando você passa pelo código, os valores de algumas variáveis locais pode ser alterado. Essas variáveis locais são mostradas em negrito na janela Variáveis locais.

Você também pode clicar diretamente na coluna Valor e alterar manualmente os valores das variáveis.

Observações:

• Para usuários do IE, devido a uma limitação nas APIs do depurador de script ativo, nem sempre é possível determinar o tipo de variável. Nesses casos, as variáveis exibidas na janela Variáveis locais indicam que elas são do tipo genérico {Object}.
• O nó parent scope não está disponível na janela Variáveis locais para usuários do IE.

Janela Inspeções

A janela Inspeções permite que você mantenha o controle dos valores de expressões específicas, conforme você passa pelo código.

Você pode adicionar inspeções, clicando com o botão direito do mouse na janela Inspeções ou no editor e escolhendo Nova inspeção no menu popup. Para remover uma inspeção, clique com o botão direito do mouse e escolha Excluir no menu popup.

No editor, primeiro realce a expressão para a qual deseja criar uma inspeção, em seguida, clique com o botão direito do mouse e escolha Nova inspeção. A expressão realçada é automaticamente adicionada no campo de texto da caixa de diálogo.

Você pode adicionar expressões JavaScript arbitrárias na janela Inspeções. O depurador avalia a expressão de inspeção no quadro selecionado da pilha de chamadas e, se houver êxito, ele exibe o valor da expressão. As expressões podem ser variáveis, tais como aquelas listadas na janela Variáveis locais, ou qualquer expressão JavaScript que possa ser avaliada e forneça um valor relevante para a sessão de depuração.

Janela Pilha de chamadas

A janela Pilha de chamadas lista a seqüência de chamadas feitas durante a execução. Quando o depurador é suspenso, a janela Pilha de chamadas mostra a seqüência das chamadas de função (ou seja, a pilha de chamadas). Na suspensão inicial, o quadro da pilha mais superior é selecionado automaticamente.

Você pode clicar duas vezes em um quadro da pilha de chamadas para selecioná-lo, em seguida, explore os valores de variável ou de expressão desse quadro nas janelas Variáveis locais e Inspeções.

A janela Pilha de chamadas contém duas colunas:

• Nome: O nome da função que foi chamada
• Localização resolvida: A URL que indica onde a função foi chamada, incluindo o nome do arquivo e o número da linha

Você também pode navegar diretamente para a localização que a chamada ocorreu, clicando com o botão direito do mouse na janela Pilha de chamadas e escolhendo Ir para código-fonte.

O arquivo que contém a localização do quadro da pilha de chamadas se abre no editor com o cursor posicionado na linha que acionou a chamada. O editor também oferece recursos de realce para quadros de pilha de chamadas, de forma que quadros anteriores na pilha de chamadas sejam indicados por um emblema roxo (  ) na margem esquerda, e exibidos com um plano de fundo roxo claro.

Janela Segmentos

A janela Threads lista a janela e os quadros de páginas existentes na sessão de depuração. Em JavaScript, cada janela ou quadro representa um contexto de execução. Portanto, se você estiver executando o depurador em um arquivo que inclua vários quadros, a janela Threads exibe a estrutura da página, listando cada quadro como um thread individual. A janela Threads também detalha o estado atual de cada janela e quadro, e fornece um motivo para a suspensão.

Semelhante a outras janelas de depuração, você pode usar a opção Ir para código-fonte a fim de navegar diretamente para o caminho ou URL indicada na coluna Nome de sua seleção. Clique com o botão direito do mouse em uma janela ou quadro, e escolha Ir para código-fonte no menu pop-up.

Janela Códigos-fonte

A janela Códigos-fonte exibe todos os arquivos e scripts carregados para a sessão de depuração. Eles são listados na ordem em que foram carregados pelo navegador. Para arquivos JavaScript em seu projeto, o depurador mostra o caminho para o arquivo em seu computador. Para recursos remotos, a URL da lista é mostrada. Como em outras janelas de depuração, você pode usar a opção Ir para código-fonte a fim de navegar diretamente para o caminho indicado em sua seleção. Clique com o botão direito do mouse em um arquivo de código-fonte, e escolha Ir para código-fonte no menu pop-up. O arquivo se abre no editor para você visualizar.

Se você estiver trabalhando com arquivos locais, a janela Códigos-fonte diferencia entre o arquivo de código-fonte real, e o arquivo de código-fonte renderizado contido no cache do seu navegador. Você pode visualizar o arquivo contido no cache do navegador, escolhendo Ir para código-fonte do cliente. O arquivo se abre no editor em formato somente leitura

Janela Pontos de interrupção

Você pode usar a janela Pontos de interrupção para visualizar todos os pontos de interrupção definidos no IDE.

Na janela Pontos de interrupção você pode ativar ou desativar pontos de interrupção individuais, alternando a opção abaixo da coluna Ativado. Você também pode personalizar pontos de interrupção, clicando com o botão direito do mouse em um ponto de interrupção e escolhendo Personalizar. O Personalizador de ponto de interrupção permite que você defina uma contagem de ocorrências e/ou expressão condicional.

É possível definir a condição da contagem de ocorrências de forma que o depurador seja interrompido quando a contagem de ocorrências for igual, maior ou um múltiplo de um determinado número.

Quando uma expressão condicional é especificada, o depurador pára no ponto de interrupção somente se a expressão for avaliada como verdadeira. Semelhantemente, se uma expressão condicional e uma condição de contagem de ocorrências forem especificadas, o ponto de interrupção é confirmado apenas se ambas forem avaliadas como verdadeiras. Você pode usar !(condição) para negar a condição. Um ponto de interrupção personalizado é indicado por um emblema na janela Pontos de interrupção e à esquerda do editor.