React dev tools - Deactivate "break on warnings"

Question

While developing with create-react-app, my browser enters debugger mode on warnings:

It breaks on the source code of 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.

How can I deactivate this behavior?

This behavior is totally annoying. I really would like to know how to disable it — guillaume, Jul 10 '20 at 14:06
here is a step by step instruction by Dan https://github.com/facebook/react/issues/19308#issuecomment-656682924 to remove this behavior for now — Alireza, Jul 10 '20 at 14:22
My solution was to blackbox that particular file so the debugger skips it entirely. Unless you're developing that plugin you should be good to do that. — Derek, Jul 11 '20 at 02:53

score 86 · Accepted Answer · edited Jul 13 '20 at 22:39

86

Go to Chrome Devtools → in the Chrome console, go to Component → Click on Settings → unset Break on Warning. Do the same in Profiler → Settings → unset Break on warning.

@cadoman pointed check and then uncheck to make work for sure.

P.S: Image from https://github.com/facebook/react/issues/19308#issuecomment-656669792

edited Jul 13 '20 at 22:39

Peter Mortensen

30,738
21
105
131

answered Jul 10 '20 at 14:11

Naresh Kumar

1,706
1
14
26

31

And you need to check then uncheck if it is not already checked – Noan Cloarec Jul 10 '20 at 14:47
There also seems to be a bug where the checkbox is getting confused between the Profiler and the Component settings. Check or uncheck on one, then the other shows the last value. So as cadoman said, just check and uncheck. – reactive-core Jul 10 '20 at 15:22
haaa, I found you :) – 7urkm3n Jul 13 '20 at 22:16

score 16 · Answer 2 · edited Jul 13 '20 at 22:33

16

Based on pull request DevTools: Make break-on-warn off by default #19309 it seems it's a bug.

The Break On Warnings box was unchecked for me and it still would break. Removing and readding the extension to force an update fixed it for me.

I don't know of another way to force Chrome to update an extension outside of its regular schedule.

edited Jul 13 '20 at 22:33

Peter Mortensen

30,738
21
105
131

answered Jul 10 '20 at 14:09

Chris Weiss

161
4

score 5 · Answer 3 · answered Jul 10 '20 at 14:09

5

Go to your ReactDev tools in the tab Debugging and disable "Break on Warning".

I think this new behavior started today with this new PR: https://github.com/facebook/react/pull/19048

answered Jul 10 '20 at 14:09

Adriano Costa

59
4

score 4 · Answer 4 · edited Jul 13 '20 at 22:37

The issue is due to a recent release. A Workaround proposed by the React team is:

Go to Chrome Developer Tools
Click on the Components Tab (React Developer Tools Extension)
Click on the Settings icon (located next to the component search box)
Once modal opens select the Debugging tab
Finally, double click on the Break on Warnings checkbox (check and unchecked)

Make sure at last the Break on Warnings checkbox is unchecked.

Reference: Issue link

score 3 · Answer 5 · edited Jul 13 '20 at 22:31

3

It's a known issue. A workaround is posted on GitHub: Bug: Unexpected debugger statement in DevTools (solved) #19308

edited Jul 13 '20 at 22:31

Peter Mortensen

30,738
21
105
131

answered Jul 10 '20 at 14:09

Doug G

161
2
8

score 3 · Answer 6 · answered Jul 12 '20 at 17:39

3

Chrome has a "BlackBox script" feature which is useful in this case.

Go to Chrome Developer tools -> source tab
Select "react_developer_tools.js" from the left pane
Right-click file and select "Blackbox script"

answered Jul 12 '20 at 17:39

Bidyashish Kumar

306
4
10

React dev tools - Deactivate "break on warnings"

6 Answers6

Linked