Hide files in developer tools?

Question

So, I want to apologize ahead of time but I've been googling and stack overflowing for an answer to this question and I just can't find a satisfactory one.

I know that Facebook uses React and, although I don't know what software architecture they use (MVC, Client-Server etc.), I can't see any react files or react components in the dev tools sources tab on any browser.

I'll show you an example in my own react app using create-react-app that shows all my files:

Create-react-apps dev tools sources:

However, when I go to Facebook's page, I don't see anything like that. I see this:

Facebook's dev tools sources:

This isn't only true of react apps, but just node apps I've made as well. Now, I want to know where all of this information is on facebook's page.... Where are the components? Why can't I see them? Where are all the post and get requests being run? How can I put breakpoints in the code for debugging? I mean, I don't even see an HTML page besides the elements tab! And, most importantly, how do I do the same thing to hide my files?

It seems like it adds an extra layer of security that I would think is preferable on all public websites. Once again, thanks in advance and, as far as I know, the answer to this is nowhere near obvious.

Answer 1

I admit, this one little bit confusing when you are quite new on the web development.

You can see your files (source code) via devtool because you also upload your .map files which help map your bundled/minified code into the the original readable one.

However, this is super helpful on development environment, but quite dangerous on production. What you need to do just remove the .map files, as comment suggested.