React dev tools - Desative o “break on warnings”

87

Durante o desenvolvimento com create-react-app, meu navegador entra no modo de depurador em avisos:

Ele quebra o código-fonte de react-dev-tools:

   // --- Welcome to debugging with React DevTools ---
   // This debugger statement means that you've enabled the "break on warnings" feature.
   // Use the browser's Call Stack panel to step out of this override function-
   // to where the original warning or error was logged.

Como posso desativar esse comportamento?

reactjs javascript-debugger

— cadoman
fonte

16

Esse comportamento é totalmente irritante. Eu realmente gostaria de saber como desativá-lo

— guillaume

3

aqui está uma instrução passo a passo de Dan github.com/facebook/react/issues/19308#issuecomment-656682924 para remover esse comportamento por enquanto

— Alireza

1

Minha solução foi colocar esse arquivo em uma caixa negra para que o depurador o ignore completamente. A menos que esteja desenvolvendo esse plugin, você deve saber fazer isso.

— Derek

81

Ir para o Chrome Devtools → no console Chrome, vá para o Componente → Clique em Configurações → unset Ruptura no Aviso . Faça o mesmo em Perfilador → Configurações → cancelar a definição do aviso de interrupção .

@cadoman apontou para marcar e depois desmarcar para ter certeza de que funciona.

PS: Imagem de https://github.com/facebook/react/issues/19308#issuecomment-656669792

— Naresh Kumar
fonte

31

E você precisa marcar e desmarcar se ainda não estiver marcado

— cadoman

Também parece haver um bug em que a caixa de seleção fica confusa entre o Profiler e as configurações do componente. Marque ou desmarque um e o outro mostra o último valor. Então, como o cadoman disse, basta marcar e desmarcar.

— núcleo reativo de

haaa, encontrei você :)

— 7urkm3n

15

Baseado na solicitação de pull DevTools: Faça break-on-warn off por padrão # 19309 , parece que é um bug.

A caixa Break On Warnings estava desmarcada para mim e ainda iria quebrar. Remover e ler a extensão para forçar uma atualização corrigiu para mim.

Não conheço outra maneira de forçar o Chrome a atualizar uma extensão fora de sua programação normal.

— Chris Weiss
fonte

4

Vá para as ferramentas do ReactDev na guia Depuração e desative "Interrupção em aviso".

Acho que esse novo comportamento começou hoje com este novo PR: https://github.com/facebook/react/pull/19048

— Adriano Costa
fonte

3

O Chrome tem um recurso de "script BlackBox" que é útil neste caso.

Vá para Ferramentas do desenvolvedor do Chrome -> guia fonte
Selecione "react_developer_tools.js" no painel esquerdo
Clique com o botão direito no arquivo e selecione "Blackbox script"

— Bidyashish Kumar
fonte

3

É um problema conhecido. Uma solução alternativa foi postada no GitHub: Bug: declaração do depurador inesperada no DevTools (resolvido) # 19308

— Doug G
fonte

3

O problema é devido a um lançamento recente. Uma solução alternativa proposta pela equipe React é:

Vá para as ferramentas do desenvolvedor do Chrome
Clique na guia Componentes (extensão React Developer Tools)
Clique no ícone Configurações (localizado próximo à caixa de pesquisa do componente)
Assim que o modal abrir, selecione a guia Depuração
Por fim, clique duas vezes na caixa de seleção Break on Warnings (marque e desmarque)

Certifique-se de que, finalmente, a caixa de seleção Interromper em avisos está desmarcada.

Referência: link do problema

— Malaji Nagaraju
fonte