React dev tools – Deactivate “break on warnings”

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

React dev tools - Deactivate "break 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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Go to Chrome Devtools → in the Chrome console, go to Component → Click on Settings → unset Break on Warning. Do the same in ProfilerSettings → 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

React dev tools - Deactivate "break on warnings"

Method 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.

Method 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

Method 4

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”

React dev tools - Deactivate "break on warnings"

Method 5

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

Method 6

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

React dev tools - Deactivate "break on warnings"


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x