Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React dev tools - Deactivate "break on warnings"

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

Paused in debugger

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?

like image 538
Noan Cloarec Avatar asked Jul 10 '20 13:07

Noan Cloarec


People also ask

How to disable DevTools in react?

Luckily, there’s a way to disable it. All you need to do is override the devtools global hook before React is loaded: You can find more information by checking out the issue.

What is the react profiler for developer tools?

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

How to disable react developer tool in Redux?

This answer concerns Redux DevTools. Not relevant. You can use @fvilers/disable-react-devtools package to disable React Developer tool Call the disableReactDevTools () method before React is loaded, in your main file.

How can I deactivate the break on error warning in chrome?

// 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? Show activity on this post. Go to Chrome Devtools → in the Chrome console, go to Component → Click on Settings → unset Break on Warning.


Video Answer


2 Answers

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

Enter image description here

like image 135
Naresh Kumar Avatar answered Sep 20 '22 01:09

Naresh Kumar


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.

like image 37
Chris Weiss Avatar answered Sep 20 '22 01:09

Chris Weiss