Como você depra os programas JavaScript? O método mais primitivo é usar o alert () para imprimir o conteúdo da página, e um método ligeiramente aprimorado é usar o console.log () para produzir conteúdo no console JavaScript. Bem, o uso desses dois métodos resolveu muitos problemas de depuração de pequenos scripts JavaScript. No entanto, seria uma pena não usar ferramentas de desenvolvedor que estão se tornando cada vez mais poderosas no Chrome. Este artigo apresenta principalmente as funções de configuração e depuração do ponto de interrupção JavaScript, ou seja, o painel de fontes (anteriormente chamado de scripts). Se você é proficiente em várias técnicas de depuração de Java no Eclipse, os conceitos aqui são semelhantes. A versão Chrome usada ao escrever este artigo é 25.0.1364.172.
Ambiente básico
À esquerda do FontesPanel está a fonte de conteúdo, incluindo vários recursos na página. Entre eles, é dividido em fontes e scripts de conteúdo. Fontes são vários recursos contidos na própria página. Eles são organizados de acordo com os domínios que aparecem na página, e é para isso que precisamos prestar atenção. Os arquivos JS carregados com assíncrona também aparecerão aqui após o carregamento. Scripts de conteúdo é uma extensão do Chrome que é organizado de acordo com o ID da extensão. Esse tipo de extensão é na verdade um recurso incorporado na página e eles também podem ler e escrever DOM. Somente os desenvolvedores que escrevem e depuraram extensões como essa devem se preocupar com eles. Se o seu navegador não tiver nenhuma extensão instalada, os scripts de conteúdo não verão nada.
A área principal do painel de fontes é usada para exibir o conteúdo do arquivo de recursos à esquerda.
No lado direito do painel de fontes está a área funcional de depuração. A linha superior dos botões é pausa/continua, passo a passo, passo a passo, salto passo a passo, desativar/ativar todos os pontos de interrupção. Abaixo estão várias áreas funcionais específicas. Isso será introduzido mais tarde.
Observe que as áreas de ambos os lados podem encolher por padrão e não exibidas nos dois lados. Clique nos botões telescópicos nos dois lados para exibir. Quando a área esquerda é exibida, o padrão é diminuir automaticamente. Clique no botão PIN ao lado e ele não se retrairá.
Existem também alguns botões de recurso na parte inferior que são muito úteis.
Defina pontos de interrupção no código -fonte
Através da fonte de conteúdo à esquerda, abra o arquivo JavaScript correspondente, clique no número da linha de arquivo e defina e exclua pontos de interrupção. Cada ponto de interrupção adicionado aparecerá na lista dos pontos de interrupção na área de depuração à direita. Clicar no ponto de interrupção da lista localizará o ponto de interrupção na área de conteúdo. Se você tiver vários arquivos e vários pontos de interrupção, é muito conveniente localizar rapidamente pontos de interrupção na lista de pontos de interrupção.
Existem dois estados para cada ponto de interrupção adicional: ativar e desativar. Os pontos de interrupção que acabam de ser adicionados são todos estados ativados, e o estado desativado é manter o ponto de interrupção, mas cancelar temporariamente a função do ponto de interrupção. Há uma caixa de seleção antes de cada ponto de interrupção na lista de pontos de interrupção, e desmarcking desativará o ponto de interrupção. Os pontos de interrupção também podem ser desativados no menu do clique com o botão direito do mouse da posição do ponto de interrupção. Você também pode desativar temporariamente todos os pontos de interrupção adicionados no botão na fita direita e clicar nele para restaurar o estado original.
Ponto de interrupção condicional : selecione "Editar ponto de interrupção ..." no menu do clique com o botão direito da posição da posição do ponto de interrupção para definir a condição para acionar o ponto de interrupção, ou seja, escreva uma expressão e o ponto de interrupção será acionado apenas quando a expressão for verdadeira. Verifique a pilha de chamadas do ambiente de pontos de interrupção (pilha de chamada): Quando o ponto de interrupção parar, a pilha de chamadas na área de depuração à direita exibirá a pilha de chamadas do método onde está o ponto de interrupção atual. Por exemplo, existe uma função g () na qual a função f () é chamada e eu defino um ponto de interrupção em f (). Então, quando eu executar a função g () no console, o ponto de interrupção será acionado e a pilha de chamadas será exibida da seguinte forma:
O topo é f () e depois g (). Cada camada na pilha de chamadas é chamada de quadro. Clicar em cada quadro pode pular para o ponto de chamada desse quadro.
Além disso, você pode reiniciar a execução do quadro atual no quadro usando o menu do clique com o botão direito do mouse, ou seja, do início do quadro. Por exemplo, no quadro da função f (), o ponto de interrupção saltará para o início de f () e reexectará, e o valor variável no contexto também será restaurado. Dessa forma, combinando funções como modificação variável e edição de código, você pode depurar repetidamente no quadro atual sem atualizar a página e acionar o ponto de interrupção novamente. Ver variáveis
Abaixo da lista de pilhas de chamadas está a lista de variáveis do escopo, onde você pode visualizar os valores das variáveis locais e globais no momento. Executar o código selecionado
Durante a depuração do ponto de interrupção, você pode usar o mouse para selecionar a variável ou expressão que deseja visualizar e clique com o botão direito do mouse no menu para executar "avaliar no console" para ver o valor atual da expressão. O botão "Interrupção/continuação" na parte superior da área de depuração no lado direito da instrução JavaScript a ser executada na próxima vez que tiver uma função. Quando não houver ponto de interrupção acionado, clicar neste botão inserirá o estado de interrupção de "preparação". Na próxima vez que a página executar a instrução JavaScript, ela interrompe automaticamente, como o código que será executado quando uma ação de clique for acionada. Modificando temporariamente o código JavaScript. Normalmente nos acostumamos a esse loop ao depurar o código: Modifique o código → Atualize a página → Recheque. Mas, de fato, o conteúdo no arquivo JS pode ser modificado temporariamente no Chrome. Salvar (Ctrl+S) pode entrar em vigor imediatamente e o re-Estofugar imediatamente com o console e outras funções. Mas observe que essa modificação é temporária e a modificação da página de atualização desaparecerá.
Ponto de interrupção na exceção
Você pode ver o botão abaixo da interface. É um interruptor que define se o programa é interrompido quando encontra uma exceção quando está em execução. Clicar neste botão alternará entre 3 estados:
Por padrão, nenhuma interrupção será encontrada
Todas as exceções serão interrompidas, incluindo situações capturadas
Só interrompa se uma exceção não capturada ocorrer
Explique principalmente a diferença entre o Estado 2 e o Estado 3
tentar{
jogue 'uma exceção';
} catch (e) {
console.log (e);
}
O código na tentativa acima encontrará uma exceção, mas o código de captura atrás pode capturar a exceção. Se todas as exceções forem interrompidas, o código interrompe automaticamente quando for executado na declaração de arremesso que produzirá uma exceção; E se for interrompido apenas quando encontrar uma exceção não capturada, não interromperá aqui. Geralmente, estaremos mais preocupados em encontrar exceções não capturadas.
Defina pontos de interrupção nos elementos DOM
Às vezes, precisamos ouvir um certo DOM sendo modificado sem se preocupar com qual linha de código é modificada (ou pode haver muitos lugares que serão modificados). Em seguida, podemos definir pontos de interrupção diretamente no DOM.
Conforme mostrado na figura, no painel de elementos de revisão de elementos, você pode definir três pontos de interrupção no menu do clique com o botão direito do mouse em um elemento: depois que o nó filho modifica seus próprios atributos e modifys, seu próprio nó for excluído, o ponto de interrupção do DOM aparecerá na lista de pontos de interrupção do DOM no lado direito do painel de fontes. Depois de executado para fazer modificações correspondentes ao DOM, o código vai parar por aí, como mostrado na figura abaixo.
XHR Ponto de quebra
Há um ponto de interrupção XHR na área de depuração à direita. Clique em + e digite a sequência contida no URL para ouvir a solicitação do AJAX para o URL. O conteúdo de entrada é equivalente ao filtro do URL. Se nada for preenchido, ouça todas as solicitações XHR. Depois que a chamada XHR for acionada, ela será divulgada no local onde o solicitação.send () será solicitado.
Trigger Breakpoint por tipo de evento
A lista de ouvintes de eventos na área de depuração à direita, onde vários tipos possíveis de eventos estão listados. Verifique o tipo de evento correspondente e ele interrompe automaticamente quando o código JavaScript que aciona o evento desse tipo.
Chaves de atalho de depuração
As teclas de atalho em todas as ferramentas de desenvolvimento podem ser encontradas nas configurações no canto inferior direito da interface. F8, F10, F11 ou SHITF+F11 é geralmente usado ao depurar pontos de interrupção, mas as teclas de função como F10 podem entrar em conflito com as teclas de atalho padrão do sistema. Não importa, eles podem ser substituídos por CMD+/, CMD+', CMD+; , Turno+cmd+; respectivamente. //@ Sourceurl Nome O código produzido por Eval. Às vezes, algum código muito dinâmico é criado no contexto JavaScript atual na forma de uma string através da função Eval (), em vez de carregar como um arquivo JS separado. Dessa forma, você não encontrará o arquivo na área de conteúdo à esquerda, por isso é difícil depurar. De fato, apenas adicionamos uma linha "//@ Sourceurl = nome" no final do código criado por Eval para nomear este código (o navegador tratará essa forma especial de comentários especificamente), para que ele apareça na área de conteúdo à esquerda, assim como você carrega um arquivo JS com um nome especificado, você pode definir pontos de interrupção e depuração. Na figura abaixo, executamos um pedaço de código através da avaliação e usamos o SourceUrl para nomeá -lo dynamicscript.js. Após a execução, esse "arquivo" aparece na área de conteúdo à esquerda e seu conteúdo é o conteúdo da avaliação. Você também pode dar uma olhada neste exemplo de nomear o código CoffeeScript compilado dinamicamente:
var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
Eval (café);
De fato, //@ Sourceurl não só pode ser usado no código de avaliação, mas qualquer arquivo JS ou mesmo o código inserido pelo JavaScript Console pode ser usado, com o mesmo efeito! O botão Format Code (Pretty Print) é usado para reformar o código confuso em um código bonito, como alguns arquivos JS compactados que são basicamente ilegíveis ou depurados. Clique no formato e depois não formate -o. Antes do embelezamento
Referência embelezada: Documentação oficial do Chrome Developer Tools