Sometimes you might want to debug your production react apps because there is an issue in your production environment that is not replicable within your local development environment. Some issues make this daunting to do, for instance, the sheer fact that the component names are minified and obfuscated in the production build makes it challenging to make sense of the component tree when looking through it in React Developer Tools.
The easiest way to debug your production app is to replicate your production setup locally. You can do this by creating a production build of your app. Usually by running:
npm run buildThis should create a production build, usually, in a dist or build folder, and you can then serve the contents using
any static file server. The serve package on NPM allows
you do this quite easily:
npx serve -s -p <PORT>Ideally, you might want to set PORT to what you normally use for your local development environment. This way it works
seamlessly with what you already have set up. For instance, things like localStorage state, authentication state, and so on
should automatically work. In any case, you can tweak the configuration to suit your purposes.
I’m not quite sure if you can hook this to your debugging tools like the VSCode debugger and so on, but you can easily
make use of the trusted console.log here and there and then create a new build with your debug logs and serve it as above.
That should help.