CODEWITHSUNDEEP
reactjs
Blazing
Blazing

Reputation: 95

How to hide "Download the React DevTools for a better development experience:"

every time I launch or reload my react app I received the same console log message of "**Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools**".

How do you go by disabling this message so that when you deploy your site, it does not be seen?

Image of console log

I have found other post about this, but no solution.

Upvotes: 0

Views: 1948

Answers (3)

Viet Nezo
Viet Nezo

Reputation: 1

This solution worked for me. In head tag of your html file, add below javascript code:

<script>
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true }
</script>

Upvotes: 0

Mpilonhle Ngcoya
Mpilonhle Ngcoya

Reputation: 51

If you are using React+Vite, then go to the file location: "node_modules/.vite\deps/react-dom_client.js"

then remove the line:


if (/^(https?|file):$/.test(protocol)) {
   console.info("%cDownload the React DevTools for a better development experience: https://reactjs.org/link/react-devtools" + (protocol === "file:" ? "\nYou might need to use a local HTTP server (instead of file://): https://reactjs.org/link/react-devtools-faq" : ""), "font-weight:bold");
}

If you are not using vite then just search through all the files in the node.js for:

"Download the React DevTools for a better development experience"

you will find one whereby it has a match, then just remove the code

Upvotes: 2

Slava Knyazev
Slava Knyazev

Reputation: 6081

The console log will not be printed once you make a product build of your React application. It is only seen because you are running it in development mode.

Upvotes: 3

Related Questions