JavaScript: como definir um ponto de interrupção condicional nas ferramentas de depuração do Chrome

100

Eu tenho um arquivo js simples, que imprime a data continuamente.

Estou usando as ferramentas do depurador do Google Chrome (F12)

Minha pergunta é: é possível definir um ponto de interrupção condicional no Google Chrome?

No meu código, eu quero definir um ponto de interrupção se o valor de segundos for igual a 50 ??

s = date.getSeconds();

Este é o jsfiddle onde está minha fonte

(Não sei por que não está funcionando no jsfiddle)

De qualquer forma, minha pergunta é: É possível definir um ponto de quebra de condição nas ferramentas do depurador do Chrome ??

javascript google-chrome

— Pawan
fonte

+1 porque não sabia que era possível até fui verificar a documentação para responder a esta questão. Obrigado!

— Theraot

Respostas:

141

Sim, é possível.

Clique com o botão direito no marcador do ponto de interrupção e selecione "Editar ponto de interrupção ..." lá você pode definir a condição.

Das Ferramentas do desenvolvedor do Chrome em pontos de interrupção em developers.google.com (ênfase minha):

Nota: Todos os pontos de interrupção que você definiu aparecem em Breakpoints na barra lateral direita. Clicar na entrada salta para a linha destacada no arquivo de origem. Depois de definir um ponto de interrupção, clique com o botão direito no indicador de ponto de interrupção de tag azul para definir uma declaração condicional para esse ponto de interrupção . Digite uma expressão e o ponto de interrupção só pausará se a condição for verdadeira.

— Theraot
fonte

Obrigado, fiz como você mencionou, editei o ponto de interrupção e defini if (s == 50), mas por que não parando nessa condição ??

— Pawan

@PreethiJain escreva apenas a condição "s == 50" (sem as aspas). A propósito, consegui fazer funcionar o jsfiddle em: jsfiddle.net/nVpXN/6

— Theraot

Você nem mesmo precisa adicionar um ponto de interrupção para começar. Basta clicar com o botão direito em uma linha imediatamente e clicar em "Adicionar ponto de interrupção condicional ..." .

— Martin Ender de

Cara, estamos em 2017 e estou aprendendo novas coisas básicas sobre o Chrome. #Awesomeness

— The Qodesmith

Isso apenas verificará a instrução neste ponto da execução do código e, se for o caso, interromperá, da mesma forma que um ponto de interrupção em uma instrução if. Acho que o OP queria saber se o depurador verifica em cada execução de instrução se a condição é atendida e se é o depurador quebra nesta linha. Esse comportamento é muito mais útil, pois você não precisa brincar de detetive para descobrir quando uma variável faz algo inesperado.

— ejectamenta

Dê uma olhada na debuggerdeclaração. Basicamente, ele invoca qualquer ferramenta de depuração disponível e, no Chrome, atua como se o interpretador tivesse atingido um ponto de interrupção.

Seu código seria:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

Da referência :

[depurador] Invoca qualquer funcionalidade de depuração disponível. Se nenhuma funcionalidade de depuração estiver disponível, esta instrução não terá efeito.

— amiga louca
fonte

Embora isso esteja de acordo com o espírito da forma original, a pergunta original foi feita, e é uma ótima informação; Acho que a verdadeira questão era sobre as ferramentas do Chrome, não o ECMAscript. Dito isso; há uma advertência que deve ser adicionada: remova todas as debuggerchamadas no código de produção. (Tenho certeza de que o linting gerará um erro se o depurador estiver disponível, mas vale a pena chamá-lo sempre que o tópico for levantado).

— Crispen Smith

você não precisa da instrução do depurador, você também pode ter uma instrução vazia dentro do if e apenas adicionar um ponto de interrupção lá.

— ejectamenta

Você pode definir um ponto de interrupção condicional no Google Chrome, seguindo estas etapas:

1. clique com o botão direito do mouse no ponto de interrupção onde deseja parar, por favor, marque

2.clique em "Adicionar ponto de interrupção condicional", um texto aparecerá, então você pode adicionar condição (o resultado será 'verdadeiro' se a condição for satisfeita, senão 'falso'), a cor do ponto de interrupção irá para laranja após a condição adicionada, chk on

3. recarregue a mesma página, você pode ver que o ponto de interrupção funcionará se a condição for satisfeita, como

— Deepan Raj
fonte