source-maps的用处

之前一直不知道source-map有什么用，今天在项目中终于体验了一次。真的好用！！ 我们的项目中有一个页面的代码全部丢失了，但是测试环境上面部署的网页是完整的，未丢失过的内容，也包含.js.map文件。今天利用source-map+js文件，成功把丢失的代码找回来了。一般在source-map中能直接看到相应的.vue文件，但是我的项目没有这个文件，所以去去js文件中先是搜索了丢失方法的名字，后来发现组件的名字也能搜到。

了解source-maps

1. Source maps 是由打包工具提供的功能，例如 webpack 和 gulp。当我们开启了 source maps 功能，打包工具会生成一个映射文件，其中包含原始代码和压缩代码之间的映射关系。即能够将编译后的代码映射成源代码。这个文件可以被浏览器自动加载(在sources下面多出一个webpack://目录)，我们在浏览器中就能看到和开发环境一样的代码了。简单拿vue项目举例说，在浏览器里面我们可以直看.vue文件，和在开发环境中看到的一样。 如图

如何使用source-maps

1. 首先项目中要开启这项配置，比如vue+webpack的环境。在配置文件(vue.config.js)做如下配置：devtools:'source-map'。不启用源码映射的话，设置成false。(默认好像是开启的)。

2. 在浏览器的设置中开启js源码映射。以chrome举例，要勾选上JavaScript source maps。

ps

打包后的js，不会一次性全部加载到source里面，是懒加载，用到哪个加载哪个。