0

i've been working on a react app and i thought that the react dev tools is only available on the dev version of the app but i was surprised that I can use it on the production version, can even change routes and states and other stuff. And I don't want to completely disable react dev tools from the app (by adding a script to the index.html to unload it). So what i wanna do is disable editing on the react dev tools like in facebook.com's (you can open the react dev tools there but you can't edit any prop or state which is cool) So is there any good way to do it without disabling the whole react dev tools ?

Salah Eddine Makdour
  • 1,023
  • 1
  • 12
  • 24
  • 1
    dev tools are meant for development and shouldn't be used on production because they can expose sensitive information. What features from the dev tools do you want for your users? – Code-Apprentice Apr 14 '20 at 17:23
  • i just want it to be like in facebook.com, dev tools is available but read only, you can't modify the states – Salah Eddine Makdour Apr 14 '20 at 17:55

1 Answers1

4

You can't and you shouldn’t. Dev tools meant to build for development purposes, hence why should someone make it available in production.

Your only option is to remove the devtools completely with this code:

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

Or you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering:

#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}

Anyway it would be still a good practice to put the business logic and the sensitive data back to your server.

IVIosi
  • 497
  • 4
  • 10
  • but why do websites like facebook, twitter make it available ? especially facebook, it is availabl there but read only cant modify – Salah Eddine Makdour Apr 14 '20 at 17:54
  • 1
    @SalahEddineMakdour Are you sure the website makes it available? Or is it the devtools feature in your browser or a browser addon that you have installed that allow you to see the React props/state/etc? – Code-Apprentice Apr 14 '20 at 18:03
  • @Code-Apprentice yes i'm 100% sure, just using react dev tools, here is a pic from facebooc.com: https://i.imgur.com/S8yEixC.png you can see the components but you can't modify anything. – Salah Eddine Makdour Apr 14 '20 at 18:09
  • @SalahEddineMakdour facebook doesn't have any sensitive information in components hierarchy and dev tools is available. So you can change components states. Also remember that props are read only (as shown in image provided in your comment). – IVIosi Apr 14 '20 at 18:33
  • thanks man, this kinda helped, now ik when to disable the dev tools – Salah Eddine Makdour Apr 14 '20 at 18:40
  • 1
    @SalahEddineMakdour I don't think the developers at Facebook have done anything specific to enable devtools. Rather you yourself installed the browser addon that allows you to see React props and state. This addon will allow you to view React components no matter what the developer does. – Code-Apprentice Apr 14 '20 at 19:26
  • yeah but on every other website that uses react (like twitter) i can edit states (like colors and stuff like that) but only on facebook i can't idk why or how, i'm using the official react dev tools, and i can actually disable it with the script that @IVIosi has answered with above – Salah Eddine Makdour Apr 14 '20 at 20:11
  • in my experience it's only the new facebook design where they have disabled the ability to edit props using react tools, if you switch back to the old facebook design, you can edit the props using the react developer tools extension – user280109 Jul 31 '20 at 05:30
  • 1
    has anyone found a way around this, so they can edit the react props in the new facebook design? – user280109 Mar 01 '21 at 23:55