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?

Persiflage

This behavior is totally annoying. I really would like to know how to disable it – Transcribe

here is a step by step instruction by Dan github.com/facebook/react/issues/19308#issuecomment-656682924 to remove this behavior for now – Perceptive

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. – Laurustinus

Answer 1

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

Hollar

And you need to check then uncheck if it is not already checked – Persiflage

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. – Mackenzie

haaa, I found you :) – Mullane

Answer 2

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.

Werner

Answer 3

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

Bahaism

Answer 4

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

Topping

Answer 5

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

Washedup

Answer 6

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

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

Stephanestephani