JavaScript Source Map 简介

简介: 为了提高性能,JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript,还需要进行编译。

为了提高性能,JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript,还需要进行编译。

这就意味着,编辑的代码和运行的代码不一样。JavaScript的解释器的报错信息的行数是针对生成的代码的,行数与原来的代码不对应,内部变量也改了名字。于是调试的时候我们就会感到茫然无措。

如果转换代码的时候,我们能记录原始代码和生成的代码行数间对应的关系,那该有多好啊。

Source map就是干这个。

有了它,调试的时候将直接显示原始代码,而不是生成的代码。多方便!

image.png

使用Source map

生成

使用Google家的closure compiler

java -jar compiler.jar \

    --js script.js \

    --create_source_map ./script-min.js.map \

    --source_map_format=V3 \

    --js_output_file script-min.js


格式

Source map格式简单明了:

{

version : 3,

 file:"out.js",

sourceRoot : "",

 sources: ["foo.js", "bar.js"],

 names: ["src", "maps", "are", "fun"],

 mappings:"AAgBC,SAAQ,CAAEA"

}

version是 Source map 的版本,file是生成的文件,sourceRoot是原始代码所在的目录,留空表示同一目录。sources是原始代码,names是转换前的所有变量名和属性名。mappings决定原始文件和生成文件是如何对应的,看上去不太直白,因为它使用了Base64 VQL编码。

启用

只要在生成的代码的尾部加上指向source map文件位置的一行就可以了:

//@ sourceMappingURL=/path/to/script-min.js.map

如果你喜欢在代码尾部加注释,你也可以为生成的JavaScript指定一个特别的header:

X-SourceMap: /path/to/script-min.js.map


调试

新版的Google Chrome的Developer tools和Firefox的Firebug都支持。其中,Firefox是默认开启的。

相关文章
|
8天前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
88 9
|
6月前
|
JavaScript 前端开发
JavaScript简介
JavaScript简介
|
6月前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
6月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
6月前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
5月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
53 0
|
5月前
|
Web App开发 JavaScript 前端开发
JavaWeb 22.Node.js_简介和安装
JavaWeb 22.Node.js_简介和安装
|
5月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
41 0
|
7月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
103 0
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)

热门文章

最新文章