我可以使用源映射和捆绑文件来检索原始反应代码吗

Question

I have these two files on my server:

/react/build/static/js/stats.js

and

/react/build/static/js/main.5c7483.js

In the stats.js file, it has this line at the bottom:

//# sourceMappingURL=main.8c33616f.js.map (I noticed the filename does not match)

The react app works fine, but I want to make some small changes. However, the developer has told me they completely lost the original source files due to a hard drive failure.

Is it possible to recover source files (or even anything that resembles source code?) I found this debundle package but couldn't get the configuration to work properly.

They told me the project was created using create-react-app .

In chrome dev tools, it says "Source Map Detected" - but using ctrl+p does not show any components. Just a few random js files like page.js, inject.js, common.js, etc

Answer 1

Well, this answer is late but just in case other people come here looking for answers (like me), here's how I solved it:

If you're lucky and the developers generated and uploaded the source maps then you shouldn't have any issue accessing the source codes.

I am not allowed to embed images yet so you may have to use the image links provided to see sample images.

Using Chrome(or any modern browser), browse to the website where the react app is hosted. Right-click anywhere on the page and select Inspect . Ctrl+Shift+I works too.

This will open up the dev tools window. Select the Sources tab. Image showing the inspector tabs with the Sources option highlighted

Depending on the website's dependencies, you'll probably see several folders here. The first folder will be titled similar to the name of the website's URL. Open that up, that's where the sources for your website is located. Opening that folder will show yet another list of folders (assets, static, modules, react-components, src).

At this point, you may think your source codes are inside the src folder but that's not where yours are. To find yours, open up the static folder. Selecting the static folder

This folder has three inner folders: css, js and node_modules . Your JS source files are inside the js folder so that's where to look for your source codes. Image showing the expanded js folder

So that's it. I hope this helps. It definitely did help me when I needed it!