React dev tools - Désactiver "pause sur les avertissements"

87

Lors du développement avec create-react-app, mon navigateur entre en mode débogueur sur les avertissements:

Il casse sur le code source 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.

Comment puis-je désactiver ce comportement?

reactjs javascript-debugger

— cadoman
source

16

Ce comportement est totalement ennuyeux. J'aimerais vraiment savoir comment le désactiver

— guillaume

3

voici une instruction étape par étape de Dan github.com/facebook/react/issues/19308#issuecomment-656682924 pour supprimer ce comportement pour le moment

— Alireza

1

Ma solution était de blackbox ce fichier particulier afin que le débogueur l'ignore complètement. À moins que vous ne développiez ce plugin, vous devriez être bon pour le faire.

— Derek le

81

Accédez à Chrome Devtools → dans la console Chrome, accédez à Composant → Cliquez sur Paramètres → Annuler la pause en cas d'avertissement . Faites de même dans Profiler → Paramètres → désactivez Break en cas d'avertissement .

@cadoman a pointé la vérification, puis décochez pour être sûr.

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

— Naresh Kumar
source

31

Et vous devez cocher puis décocher si ce n'est pas déjà vérifié

— cadoman

Il semble également y avoir un bogue où la case à cocher se confond entre le Profiler et les paramètres du composant. Cochez ou décochez l'un d'entre eux, puis l'autre affiche la dernière valeur. Donc, comme l'a dit cadoman, il suffit de cocher et de décocher.

— réactif-core

haaa, je t'ai trouvé :)

— 7urkm3n

15

Basé sur la demande de tirage DevTools: Désactivez l'avertissement de rupture par défaut # 19309, il semble que ce soit un bogue.

La case Break On Warnings n'était pas cochée pour moi et elle se cassait toujours. La suppression et la lecture de l'extension pour forcer une mise à jour l'ont corrigée pour moi.

Je ne connais pas d'autre moyen de forcer Chrome à mettre à jour une extension en dehors de son calendrier habituel.

— Chris Weiss
source

4

Accédez à vos outils ReactDev dans l'onglet Débogage et désactivez «Pause sur avertissement».

Je pense que ce nouveau comportement a commencé aujourd'hui avec ce nouveau PR: https://github.com/facebook/react/pull/19048

— Adriano Costa
source

3

Chrome a une fonction "script BlackBox" qui est utile dans ce cas.

Accédez aux outils de développement Chrome -> onglet source
Sélectionnez "react_developer_tools.js" dans le volet gauche
Cliquez avec le bouton droit sur le fichier et sélectionnez "Script Blackbox"

— Bidyashish Kumar
source

3

C'est un problème connu. Une solution de contournement est publiée sur GitHub: Bug: instruction de débogage inattendue dans DevTools (résolu) # 19308

— Doug G
source

3

Le problème est dû à une version récente. Une solution de contournement proposée par l'équipe React est:

Accéder aux outils de développement Chrome
Cliquez sur l' onglet Composants (Extension React Developer Tools)
Cliquez sur l' icône Paramètres (située à côté de la zone de recherche des composants)
Une fois le modal ouvert, sélectionnez l' onglet Débogage
Enfin, double-cliquez sur la case à cocher Pause sur les avertissements (cochée et décochée)

Assurez-vous enfin que la case à cocher Pause sur les avertissements est décochée.

Référence: lien du problème

— Malaji Nagaraju
source