之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意义。

从源码转换讲起

JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。

常见的源码转换,主要是以下三种情况:

  1. 压缩,减小体积。
  2. 多个文件合并,减少HTTP请求数。
  3. 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

    这三种情况,都使得实际运行的代码不同于开发代码,除错(debug)变得困难重重。

通常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,这对于转换后的代码毫无用处。你看着报错信息,感到毫无头绪,根本不知道它所对应的原始位。

这就是Source map想要解决的问题。

什么是Source map

简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。

有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。

目前,暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中,确认选中"Enable JavaScript source maps"。

如何启用Source map

只要在转换后的代码尾部,加上一行就可以了。

  

  //@ sourceMappingURL=/path/to/file.js.map

  

map文件可以放在网络上,也可以放在本地文件系统。

如何生成Source map

Source map 可以通过javascript 压缩工具在压缩之后直接生成就行了。在VS.NET中是默认生成的,要使source map有效的唯的条件就是不能将压缩前的js原文件删除,否则浏览器同样会报出找不到源码错误。

如果我们是在纯javascript 的开发环境如 chrome apps / nodejs 下比较推荐使用 gruntuglify 任务插件在完成压缩的同时直接生成source map 并且将source map的引用加入到加压后的js文件中。此功能在 uglify 0.6.0 后得到好很好的支持,在Gruntfile中的具体设置如下:

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
options: {
sourceMap: true,
sourceMapIncludeSources: true,
sourceMapName: 'js/runtime.min.js.map'
},
files: {
'js/runtime.min.js': [
'app/services.js',
'app/directives.js',
'app/controllers.js'
]
}
} }
});

只需要加入 sourceMap, sourceMapIncludeSourcessourceMapName 就可以很好地控制source map的生成了。

结语

我比较重视实用性,至于source map的文件格式也是一篇极长的理论,我想一般程序不会摆着工具不用闲得蛋疼去自己写source map的。如果想了解关于source map的构成和source map中的VLQ编码可以参考HTML5 Rocks 上的这篇 Introduction to JavaScript Source Maps 英文长文。

javascript source map 的使用的更多相关文章

  1. JavaScript Source Map 详解

    源码地址: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 上周,jQuery 1.9发布. 这是2.0版之前的最后 ...

  2. java source map

    Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...

  3. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  4. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  5. 前端工具-调试压缩后的JS(Source Map的使用)

    使用 Source Map 可以在 FF 的调试器. Chrome 的 Sources 和 VSCode 中给压缩前的文件下断点,也可以方便定位错误发生的位置(定位到压缩前的文件). 何为 Sourc ...

  6. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

  7. 源映射(Source Map)详解

    一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...

  8. source map 的原理探究

    线上产品代码一般是编译过的,前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeS ...

  9. source map

    一.source map 概述 我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法deb ...

随机推荐

  1. 如何把高版本的sqlserver 还原到低版本的 sqlserver(转载)

    本例为sql2012 还原到sql2008. 要实现的功能是把sql2012的数据库备份到sql2008,数据库名字为Test,并且这两个数据库在不同的电脑中. 微软的软件设计方案基本上都是新版本兼容 ...

  2. SQL SERVER怎样将某个服务器上面的数据自动备份到另一台服务器上面(异地备份)

    一:试验背景 异地备份好处:(待补充) 1:异地备份了把原有服务器数据放在另外一个位置,避免些物理损害.  比把数据刻录光盘和原始数据放同房间了房间失火了备份数据也没有了要放另外地方避免了  就是备份 ...

  3. EOFException异常详解

    最近线上的系统被检测出有错误日志,领导让我检查下问题,我就顺便了解了下这个异常. 了解一个类,当然是先去看他的API,EOFException的API如下: 通过这个API,我们可以得出以下信息: 这 ...

  4. .Net 环境

    更多系统版本下载:https://www.microsoft.com/net/download VSCode :https://code.visualstudio.com/

  5. 【转】Java学习---解析Java Servlet工作过程

    [原文]https://www.toutiao.com/i6594316694657696264/ 解析Java Servlet工作过程 Servlet简介 Servlet是sun公司提供的一门用于开 ...

  6. ArcGIS Earth1.9最新版安装和使用教程

    1.下载ArcGIS Earth 官网下载地址:https://www.esri.com/en-us/arcgis/products/arcgis-earth 在这个网页的最下面填上信息,就可以下载了 ...

  7. PyQt5--InputDiaglog

    # -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing Comment: ''' import sys f ...

  8. 前端aes解密实战小结

    很多人对于AES加密并不是很了解,导致互相之间进行加密解密困难. 本文用简单的方式来介绍AES在使用上需要的知识,而不涉及内部算法.最后给出例子来帮助理解AES加密解密的使用方法. AES的麻烦 相比 ...

  9. HTTP 请求头中的 X-Forwarded-For,X-Real-IP

     X-Forwarded-For 在使用nginx做反向代理时,我们为了记录整个的代理过程,我们往往会在配置文件中做如下配置: location / { 省略... proxy_set_header ...

  10. leetcode 280.Wiggle Sort 、324. Wiggle Sort II

    Wiggle Sort: 注意:解法一是每次i增加2,题目不是保证3个3个的情况,而是整个数组都要满足要求. 解法一错误版本: 如果nums的长度是4,这种情况下nums[i+1]会越界.但是如果你用 ...