Compartilhar via

Depurando scripts com as Ferramentas de Desenvolvimento

  • Artigo

Novidade no Windows Internet Explorer 8

O recurso Ferramentas de Desenvolvimento do Internet Explorer 8 oferece um depurador Microsoft JScript, leve e integrado, que permite que os desenvolvedores definam pontos de interrupção e percorram o código JScript do lado do cliente sem deixar o navegador. Este documento descreve os recursos de alto nível do depurador JScript. Para conhecer os outros recursos das Ferramentas de Desenvolvimento do Internet Explorer 8, consulte Descobrindo as Ferramentas de Desenvolvimento do Internet Explorer. Para obter uma referência completa dos comandos de interface das Ferramentas de Desenvolvimento, consulte Referência de interface do usuário das Ferramentas de Desenvolvimento.

  • Introdução
  • Iniciar Depuração
  • Definindo os pontos de interrupção
  • Controlando a execução
  • Inspecionando variáveis
  • Inspecionando a pilha de chamadas
  • Usando o console para executar instruções de código
  • Usando o console para alertas de registros em log e mensagens de erro
  • Comentários
  • Tópicos relacionados

Introdução

A depuração JScript é uma parte importante do desenvolvimento para a Web. Com o intuitivo e leve depurador JScript, o recurso Ferramentas de Desenvolvimento traz simplicidade com um único clique à experiência de depuração JScript de ponta a ponta. Depois de instalar o Internet Explorer 8, os desenvolvedores podem depurar o JScript em qualquer site carregado no Internet Explorer.

Para abrir as Ferramentas de Desenvolvimento no Internet Explorer 8, pressione F12. Como alternativa, clique no botão Ferramentas de Desenvolvimento na barra de comandos Ferramentas.

Observação  Embora o depurador JScript possa ser usado para depurar qualquer mecanismo implementando as interfaces IActiveScriptSite, como o Microsoft Visual Basic Scripting Edition (VBScript), há suporte apenas para a depuração JScript.

Iniciar Depuração

Mostra a interface de usuário da guia do modo Script

Figura 1. Interface de usuário da guia do modo Script

Com as Ferramentas de Desenvolvimento na guia Script, comece o processo de depuração clicando no botão Iniciar Depuração ou pressionando F5. Ao clicar nesse botão, os seguintes eventos serão disparados:

  • Uma caixa de diálogo A Depuração Exige a Atualização da Página da Web lhe dará a opção de atualizar a página. Se você clicar em OK, a depuração será iniciada e a página será atualizada. Se você clicar em Cancelar, a depuração não será iniciada iniciará e a página não será atualizada.
  • Uma vez iniciada a depuração, se a janela Ferramentas de Desenvolvimento estiver fixada à instância do Internet Explorer 8, ela será tirada. Quando a depuração for interrompida, você poderá fixá-la novamente à instância do Internet Explorer 8.

Para interromper a depuração, clique no botão Interromper Depuração ou pressione SHIFT+F5.

Observação  A caixa de diálogo A Depuração Exige a Atualização da Página da Web somente será exibida se você não tiver habilitado a depuração de scripts no Internet Explorer. Ao clicar em OK na caixa de diálogo, a depuração de scripts será habilitada temporariamente para esta instância do Internet Explorer, até que você feche a janela. Para habilitar a depuração de scripts para todas as instâncias do Internet Explorer, clique na guia Avançado no menu Opções da Internet. Em seguida, na categoria Navegação, desmarque a opção Desabilitar depuração de script (Internet Explorer) e clique em OK. Para que as alterações tenham efeito, feche todas as instâncias do Internet Explorer e as reabra novamente.

Observação  Todos os scripts em uma página, os arquivos separados e os blocos de script embutidos estão disponíveis na caixa suspensa Lista de Scripts, independentemente de a depuração ter sido iniciada ou não. Você pode alternar entre esses arquivos a qualquer momento enquanto estiver na guia do modo Script. A origem do arquivo atualmente selecionado será exibida no Painel de Conteúdo Primário.

Definindo os pontos de interrupção

No Painel de Conteúdo Primário onde o código de script é exibido, você pode definir os pontos de interrupção:

  • Clicando no número de linha para inserir ou excluir um ponto de interrupção
  • Clicando com o botão direito do mouse em uma linha de código e selecionando Inserir Ponto de Interrupção
  • Posicionando o cursor em uma linha de código e pressionando F9 para inserir ou excluir um ponto de interrupção

Os pontos de interrupção podem ser definidos independentemente de o depurador ter sido iniciado ou não. Quando um ponto de interrupção for definido, o ícone do ponto de interrupçãoÍcone do ponto de interrupção será exibido próximo ao número de linha do código, e o código dessa linha será destacado.

Um ponto de interrupção pausa a execução de script imediatamente antes da linha do ponto de interrupção, e o depurador destacará a próxima linha a ser executada. Durante a depuração, qualquer erro em tempo de execução fará com que o depurador seja interrompido no local do erro. Para impedir a interrupção em um erro, desative o botão de alternância Interromper em Erros ou pressione CTRL+SHIFT+E. Enquanto o depurador pausar a execução, o navegador não responderá a qualquer entrada do usuário.

Mostra a configuração e o gerenciamento de pontos de interrupção

Figura 2. Configurando e gerenciando pontos de interrupção

Uma lista de todos os pontos de interrupção está disponível na guia Pontos de Interrupção do depurador. Nela, você pode encontrar o local de todos os pontos de interrupção, juntamente com o nome de arquivo e o número da linha em que um ponto de interrupção foi estabelecido. Para ir para o local do código-fonte de um ponto de interrupção, clique duas vezes no ponto de interrupção na lista. Para desativar o ponto de interrupção sem removê-lo, desmarque a caixa de seleção próxima ao ponto de interrupção. Para remover o ponto de interrupção, clique com o botão direito nele e selecione Excluir no menu de atalho. O Internet Explorer mantém as informações sobre ponto de interrupção até que você feche as Ferramentas de Desenvolvimento, mesmo se você sair do site atual.

Observação  Pontos de interrupção podem se tornar inválidos em muitos cenários. Um ponto de interrupção inválido será desabilitado e um ícone de aviso será exibido em cima do ícone do ponto de interrupção. Um ponto de interrupção se tornará inválido se você sair do site no qual ele está estabelecido. Ele pode ficar inválido se você defini-lo em um local errado no modo de não depuração; ou ainda se você iniciar a depuração em um local onde o depurador não encontra nenhum código compatível. Ele também poderá ficar inválido se você atualizar a página na qual ele está definido e se o código-fonte for alterado.

Quando um ponto de interrupção for definido, a execução pausará no ponto de interrupção sempre que ele for encontrado. Se você desejar que a execução seja pausada nesse ponto de interrupção somente quando uma determinada condição for verdadeira, defina uma condição para o ponto de interrupção. Para definir uma Condição de ponto de interrupção, faça o seguinte:

  1. Clique com o botão direito do mouse no ponto de interrupção no Painel de Conteúdo Primário ou no painel Pontos de Interrupção. Um menu de atalho será exibido.
  2. Selecione a opção Condição.... Uma caixa de diálogo será exibida.
  3. Na caixa de diálogo de Ponto de Interrupção Condicional, digite a condição e clique em OK.

Isso fará com que o depurador pause a execução neste ponto de interrupção somente quando a condição for verdadeira.

Controlando a execução

Os pontos de interrupção são usados para pausar a execução de script a fim de lhe dar a chance de verificar o estado dos códigos em determinado ponto. Quando a execução for interrompida em um ponto de interrupção, você poderá controlar a execução usando um dos seguintes botões de comando:

Mostra os botões de controle de execução do depurador.

  • Continuar

    Continuar executando o script sem interrupções, até que outro ponto de interrupção ou erro de script seja encontrado. Atalho do teclado: F5.

  • Interromper Tudo

    Pausar a execução imediatamente antes da próxima instrução de script ser executada. Clique no botão ou pressione CTRL+SHIFT+B para ativar este comando e, em seguida, execute as ações que você deseja depurar.

  • Interromper em Erros

    Pausar a execução no ponto onde o erro ocorreu. Este comando fica ativo por padrão. Se você não quiser pausar a execução nestes pontos de erro, clique neste botão para desativar o comando. Porém, em ambos os casos, uma mensagem de erro será exibida no console para cada erro encontrado. Atalho de teclado para ativar/desativar o comando: CTRL+SHIFT+E.

  • Depuração Total

    Executa a próxima linha de script e pausa, mesmo se a próxima linha estiver dentro de um novo método. Atalho do teclado: F11.

  • Depuração Parcial

    Continua na próxima linha do script no método atual e então pausa. Útil para a depuração parcial nas chamadas de método. Atalho do teclado: F10.

  • Depuração Circular

    Continua a executar o script na próxima linha no método que chamou o método atual. Útil para a depuração circular de loops e chamadas de método. Atalho do teclado: SHIFT+F11.

Inspecionando variáveis

Qualquer variável pode ser inspecionada nos painéis Locais e Observar. Para inspecionar as variáveis:

  • inicie o depurador clicando em Iniciar Depuração
  • defina o(s) ponto(s) de interrupção ao longo do caminho de execução
  • em seguida, execute os scripts

Durante a execução, o depurador pausará no primeiro ponto de interrupção encontrado. Quando a execução for pausada, as variáveis nos painéis Locais e Observar poderão ser inspecionadas e editadas.

O painel Locais do depurador exibirá o Nome, o Valor e o Tipo de todas as variáveis disponíveis no escopo de execução atual. Se uma variável estiver fora de escopo, ela estará disponível e não será exibida no painel Locais. Para variáveis e objetos 'fora de escopo', use o painel Observar para acompanhá-los a qualquer momento.

Você pode observar variáveis de escopos diferentes adicionando-as ao painel Observar. Você pode adicionar variáveis ao painel Observar de várias maneiras:

  1. No Painel de Conteúdo Primário, selecione um texto de script e clique com o botão direito do mouse para ativar o menu de contexto. Em seguida, clique em Adicionar Inspeção. Essa ação adicionará o texto à lista de inspeção.
  2. No painel Locais, clique com o botão direito do mouse em uma variável ou em um objeto. Em seguida, clique em Adicionar Inspeção para adicioná-lo à lista de inspeção.
  3. No painel Observar, clique em Clique para adicionar e digite o nome de uma variável que deseja observar. O texto Clique para adicionar pode ser encontrado na parte inferior da lista de observação, já que é o último item na lista do painel Observar.

Mostra as variáveis em inspeção no painel Locais.

Figura 3. Inspecionando variáveis no painel Locais.

Com cada execução de uma linha de código, o depurador atualizará os valores das variáveis nos painéis Locais e Observar. Os valores atualizados são exibidos em texto vermelho. Para modificar o valor de uma variável nos painéis Locais ou Observar, clique duas vezes no valor, digite um novo valor e pressione ENTER. Como alternativa, você pode clicar com o botão direito no objeto e clicar em Editar Valor para iniciar a edição. Ao concluir, pressione ENTER para confirmar ou ESC para cancelar sua edição.

Inspecionando a pilha de chamadas

O painel Pilha de Chamadas fornecerá uma lista de contextos de execução sempre que o depurador pausar a execução em um ponto de interrupção. Para ir para algum item da pilha, clique duas vezes no item. O depurador exibirá o método no Painel de Conteúdo Primário. Nesse painel, você pode inspecionar as variáveis no contexto de execução nos painéis Locais e Observar.

Usando o console para executar instruções de código

O painel Console do depurador fornece um console para executar instruções de script rapidamente. Digite qualquer instrução ou nome de variável válido e pressione ENTER (ou clique em Executar Script) para executar a instrução no contexto da página atual e onde a execução está pausada.

Para definir os valores de variáveis, use a sintaxe de atribuição padrão:

s = 'my query string';

Ao clicar no botão Modo Multilinha, a janela de entrada será expandida para permitir a entrada de várias linhas. O comportamento da tecla ENTER também será alterado, de modo que a tecla criará uma nova linha em vez de executar o script. Aqui, você pode digitar várias linhas de código e executá-las clicando em Executar Script. A janela de entrada, que pode ser redimensionada, oferece controles adicionais através do menu de atalho.

Você pode usar o painel Console a qualquer momento, mesmo se o depurador não tiver sido iniciado. Quando a execução parar em um ponto de interrupção, os comandos digitados neste painel serão executados no escopo de execução do ponto de interrupção. Quando a execução não for pausada, os comandos serão executados no escopo global.

Usando o console para alertas de registros em log e mensagens de erro

Todos os erros de script em uma instância específica do Internet Explorer são registrados em log no painel Console assim que as Ferramentas de Desenvolvimento estiverem abertas. Para navegar até o local de erro, clique nas informações de origem fornecidas no erro.

Você também pode registrar as mensagens em log no Console usando as APIs console.log. Em vez de usar window.alert () e gerar inúmeras caixas de diálogo, use console.log para produzir sequencias de saída no painel Console. Para diferenciar as mensagens, use as APIs console.log. Por exemplo:

  • console.log
  • console.info
  • console.warn
  • console.error
  • console.assert

Estes comandos de console podem ser chamados com uma lista de argumentos que serão concatenados para gerar a sequencia de saída. Os argumentos também podem ser formatados usando os padrões de substituição no estilo de printf. Por exemplo, você pode chamar console.log de uma das seguintes maneiras:

  • console.log("Variável x = " + x + " e variável y = " + y)
  • console.log("Variável x = ", x, " e variável y = ", y)
  • console.log("Variável x = %d e variável y = %d", x, y)

Entretanto, o comando console.assert exige uma expressão em seu primeiro argumento para ser avaliada como verdadeiro ou falso. Se a expressão for avaliada como verdadeiro, a mensagem de asserção não será produzida no console; caso contrário, a mensagem será produzida no console. Por exemplo: 



var x = 1;
var y = 1;


//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);


//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

Essas mensagens de console podem ser filtradas no painel Console de modo a serem exibidas ou ocultadas. Para selecionar as mensagens que você deseja exibir ou ocultar no painel Console, defina o Filtro da seguinte maneira: clique com o botão direito do mouse no painel Console e mova o cursor sobre Filtro. Uma lista de filtros disponíveis será exibida, na qual o filtro com uma marca de seleção está ativo.

Além disso, o objeto de console pode ser estendido para adicionar novas funcionalidades para atender suas necessidades de desenvolvimento. Por exemplo, é possível que você queira criar um método personalizado para produzir suas mensagens de depuração no console. Para adicionar um comando console.debug, talvez você tenha que adicionar os seguintes trechos de código ao seu código JScript:

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

O exemplo anterior capta dois argumentos e simplesmente os produz no painel Console com uma formatação mínima. Como você consegue definir console.debug, é possível personalizar argumentos e comportamentos de função da forma mais apropriada para atender às suas necessidades. Desta maneira, o objeto de console pode ser usado para adicionar qualquer número de novos comandos que você precisar.

Observação  Como você está usando comandos de console existentes em seu novo comando, o Filtro ainda será aplicado. Por exemplo, o comando console.debug no exemplo anterior usa console.warn para produzir mensagens no painel Console. Se você desmarcar Avisos do Console na lista Filtro, nenhuma saída do console.warn será exibida no painel Console.

Comentários

  • Para limpar todas as mensagens de console.log, use console.clear () em seu código ou na linha de comando do Console. O console.clear() não limpará códigos ou mensagens de erro de script que você digitou na linha de comando do Console.
  • Para limpar completamente o painel Console, clique com o botão direito do mouse no painel Console e escolha as opções de Limpar Console. Esse procedimento limpará todas as mensagens no painel Console.

Tópicos relacionados