使用SourceMap还原源代码

前言

心血来潮,打开ofo的网站,看到/#,预感用vue技术开发,用wappalyzer插件一看,又右键源代码了一看,确定了我的预感

关键一抖

手一抖,切换到Sources面板,竟然看到了熟悉的src和.,经验告诉我,生产环境的sourcemap没有关闭,我要拿到这个项目的代码

右键左边的src目录,竟然没有保存选项,试了试Overrides,添加了一个本地文件夹,只能一个文件一个文件的去重写,这样才能保存到本地,太不方便了。

开启SAO模式

既然浏览器能根据sourcemap和压缩混淆后的代码,显示出来源项目的文件夹路径和源代码,于是乎就查找sourcemap转源代码相关方案,查找了各大搜索引擎和一些社区,都没有找到太好的解决办法,但是还是有一些线索的,试了好多种方案最后都失败了。不过功夫不负有心人。最终在npm上找到了这个库 reverse-sourcemap 完美的实现了我的想法

全局安装
cnpm i -g reverse-sourcemap
拿到sourcemap和源文件

下载以下文件,后缀加载.map就可以拿到sourcemap文件

浏览器会直接打开,可以复制到迅雷里边下载或其他命令等下载,最后拿到这些文件

开始转换
//反解js
 reverse-sourcemap -v app.18d4addd00d0fa6576b1.js.map -o dist 

//反解css
 reverse-sourcemap -v app.78f69c368b762bd155e08d6cd67f88fc.css.map -o css

解码后的代码放在dist目录下,用vscode查看,大部分代码都在

运行起来,就算了吧

建议

1,打生产环境包的时候记得关闭sourcemap
2,css感觉有点乱呀,bem用上(大型项目乱写css,后期坑会很多,不过你这个官网项目算了吧,看你用了vue的份上)
3,官网不建议使用单页面开发方式,对搜索引擎不太友好