Strumenti di sviluppo React - Disattiva "interruzione degli avvisi"

87

Durante lo sviluppo con l'app create-react, il mio browser entra in modalità debugger sugli avvisi:

Si interrompe nel codice sorgente di 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.

Come posso disattivare questo comportamento?

reactjs javascript-debugger

— cadoman
fonte

16

Questo comportamento è totalmente fastidioso. Mi piacerebbe davvero sapere come disabilitarlo

— guillaume

3

ecco un'istruzione passo passo di Dan github.com/facebook/react/issues/19308#issuecomment-656682924 per rimuovere questo comportamento per ora

— Alireza

1

La mia soluzione era di mettere in blackbox quel particolare file in modo che il debugger lo salti completamente. A meno che tu non stia sviluppando quel plugin, dovresti essere bravo a farlo.

— Derek

82

Vai a Chrome Devtools → nella console di Chrome, vai su Component → Fai clic su Impostazioni → annulla interruzione su avviso . Fai lo stesso in Profiler → Impostazioni → deseleziona Interruzione su avviso .

@cadoman ha puntato il segno di spunta e quindi deseleziona per far funzionare di sicuro.

PS: immagine da https://github.com/facebook/react/issues/19308#issuecomment-656669792

— Naresh Kumar
fonte

31

E devi selezionare quindi deselezionare se non è già selezionato

— cadoman

Sembra anche esserci un bug in cui la casella di controllo si confonde tra le impostazioni del Profiler e del componente. Seleziona o deseleziona uno, quindi l'altro mostra l'ultimo valore. Quindi, come ha detto Cadoman, seleziona e deseleziona.

— nucleo reattivo

haaa, ti ho trovato :)

— 7urkm3n

15

Basato sulla richiesta di pull DevTools: Make break-on-warn off per impostazione predefinita # 19309 sembra che sia un bug.

La casella Break On Warnings era deselezionata per me e si sarebbe comunque rotta. La rimozione e la lettura dell'estensione per forzare un aggiornamento lo hanno risolto per me.

Non conosco un altro modo per forzare Chrome ad aggiornare un'estensione al di fuori della sua normale pianificazione.

— Chris Weiss
fonte

4

Vai ai tuoi strumenti ReactDev nella scheda Debugging e disabilita "Break on Warning".

Penso che questo nuovo comportamento sia iniziato oggi con questo nuovo PR: https://github.com/facebook/react/pull/19048

— Adriano Costa
fonte

3

Chrome ha una funzione "BlackBox script" che è utile in questo caso.

Vai a Strumenti per sviluppatori di Chrome -> scheda sorgente
Seleziona "react_developer_tools.js" dal riquadro di sinistra
Fai clic con il pulsante destro del mouse sul file e seleziona "Blackbox script"

— Bidyashish Kumar
fonte

3

È un problema noto. Una soluzione alternativa è stata pubblicata su GitHub: Bug: istruzione del debugger imprevisto in DevTools (risolto) # 19308

— Doug G
fonte

3

Il problema è dovuto a una recente versione. Una soluzione alternativa proposta dal team di React è:

Vai a Strumenti per sviluppatori di Chrome
Fare clic sulla scheda Componenti (estensione React Developer Tools)
Fare clic sull'icona Impostazioni (situata accanto alla casella di ricerca del componente)
Una volta aperta la modalità modale, seleziona la scheda Debug
Infine, fai doppio clic sulla casella di controllo Interrompi avvisi (seleziona e deseleziona)

Assicurati che la casella di controllo Interrompi avvisi sia deselezionata.

Riferimento: collegamento al problema

— Malaji Nagaraju
fonte