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:

Suspendu dans le débogueur

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?

cadoman
la 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

Réponses:

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 ProfilerParamè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

Entrez la description de l'image ici

Naresh Kumar
la 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
la source
3

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

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

entrez la description de l'image ici

Bidyashish Kumar
la 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

Entrez la description de l'image ici

Malaji Nagaraju
la source