sourcemap 不仅适用于 chrome 浏览器，也适用于其它很多现代浏览器，本文主要针对 chrome 一、sourcemap 基本信息 当前前端行业，js/css 代码混淆压缩已经是基本操作了...第2步：关联，sourcemap 和打包文件的关联形式就是将下面这行注释追加到 xxx.js 文件的最后一行。...整个 sourcemap 解析还原过程 chrome 都帮忙做了，我们需要做的就一件事，就是在 js 文件最后一行 或者 以手动添加的方式加上 sourcemap 路径即可。...比如： // xxx.js // ...文件内容... //# sourceMappingURL=http://127.0.0.1/dist-sourcemap/xxx.js.map 这个也不难实现。...当本地服务启动之后，sourcemap 中的 sourcemap 资源中配置的 127.0.0.1:80/sourcemap/a.js.map 地址就会请求到本地服务器了。
但是，基于 sourcemap 用源码调试应该是一件很 nice 的事情，让 sourcemap 发布到内网的服务器不就好了？...为了解决这个问题，我们在内网搭建了一个 sourcemap 的文件服务器，并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。...到此，如果你希望项目生成 sourcemap 并通过源码进行调试，只需要在构建的时候加入一个这个： // 以 grunt 为例 grunt.registerTask('publish:sourcemap...')(options, callback); }); 如果想要更流畅的体验， 只需要在服务器转发 以.map结尾 的请求，同时在 js 文件的末尾添加 //# sourceMappingURL=xxx.map...这里留一个问题给大家思考：为什么通过 sourcemap 生成的源码文件是在 dist 目录下的，或者说 sourcemap 文件为什么必须指定 sourceRoot 且不能为空或指向当前目录?
SourceMap SourceMap 几乎完美的解决了代码反解问题，其使用方式十分简单，我们在编译的时候除了生成最终产物 xxx.js 文件外还会额外生成一个 xxx.js.map 的文件，这个 map...因为如果直接将 SourceMap 一起跟随 js 代码下发，这就导致用户可以直接窥探你的源码了，类似发生这样的事情就很尴尬了https://zhuanlan.zhihu.com/p/26033573，...SourceMap 格式 首先我们需要了解下 SourceMap 的基本格式 我们将一个 .ts 文件编译为 .js 文件，看看其 SourceMap 信息是如何处理映射的。...我们项目包含了原始的 ts 文件 add.ts、编译后的产物文件 add.js 和 SourceMap 文件 add.js.map，其内容如下 add.ts const add = (x:number,...=module.js.map SourceMap 的规范本身十分精简和清晰，其本身是一个 JSON 文件，包含如下几个核心字段 { version : 3, // SourceMap标准版本,
但是，基于 sourcemap 用源码调试应该是一件很 nice 的事情，让 sourcemap 发布到内网的服务器不就好了？...为了解决这个问题，我们在内网搭建了一个 sourcemap 的文件服务器，并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。...到此，如果你希望项目生成 sourcemap 并通过源码进行调试，只需要在构建的时候加入一个这个： // 以 grunt 为例 grunt.registerTask('publish:sourcemap...')(options, callback); }); 如果想要更流畅的体验， 只需要在服务器转发 以.map结尾 的请求，同时在 js 文件的末尾添加 //# sourceMappingURL=xxx.map...当你打开控制台的时候, sourcemap 文件将自动加载，如图： image.png 这里留一个问题给大家思考：为什么通过 sourcemap 生成的源码文件是在 dist 目录下的，或者说 sourcemap
5 module Webpack会利用loader将所有非js模块转化为webpack可处理的js模块，而增加上面的cheap配置后也不会有loader模块之间对应的sourceMap。...比如jsx文件会经历loader处理成js文件再混淆压缩， 如果没有loader之间的sourceMap，那么在debug的时候定义到上图中的压缩前的js处，而不能追踪到jsx中。...如果想像js一样，知道这个css样式是在哪个文件需要怎么弄呢？ ? 上面讲解的配置其实都是针对js的sourceMap，配置后webpack会自动帮我们生成各类js sourceMap。...因为本质上webpack只处理js，对于webpack来说，css是否有sourceMap依赖于对css处理的loader是否有sourceMap输出，所以loader需要开启并传递sourceMap,...加了css sourceMap后,我们可以很轻松的定位到sass编译前的源码路径了。 ? 通过debug，打印出生成的css sourceMap，和js sourceMap对比并无他样： ?
image sourcemap是什么 Sourcemap 是一种用于将编译、打包后的代码映射回原始源代码的技术。...sourcemap的结构 Sourcemap 文件的结构主要包括以下几个部分： 「Version」: 这是源映射文件的版本号。目前，Sourcemap 的版本号为 3。...下面是一个简单的 Sourcemap 文件的示例： { "version": 3, "file": "out.js", "sourceRoot": "", "sources": ["foo.js...", "bar.js"], "names": ["src", "maps", "are", "fun"], "mappings": "AAAA,SAASA,EAAM,CAAE,GAAG,EAAE...source-map库获取源文件信息 Node.js的source-map库可以做map文件的解析： const sourcemap = require("source-map"); const mapFile
2. sourceMap的作用 我们用一个简单的示例，来看一下sourceMap的作用。如图，先精简一下之前的项目文件。 ?...image.png 将sidebar.js中的console,log故意携程console.lo，修改webpack_config.js如下： // webpack.config.js var HtmlWebpackPlugin...js代码。...不包含列信息，也不包含loader的sourcemap。可搭配大部分其他关键字使用。...另外，不包含loader的 sourcemap（例如 babel 的 sourcemap）。 ? image.png ? image.png 如图，仅定位到了错误的行。
工具使用 restore-source-tree是开源的，我们可以通过以下命令全局安装指定版本 npm install -g Yukaii/restore-source-tree#98ccfc2 # 获取到sourcemap...准备好需要还原的sourcemap # 执行命令 可以CD到放置map的目录，然后执行命令，格式如下 restore-source-tree --out-dir 参数解释...来指定输出文件夹 --include-node-modules或者-n来控制是否包含node_modules中的源文件 例子： restore-source-tree -n --out-dir out *.js.map
起作用， 就是如何声明，建立这种联系 这当然也是sourcemap标准的一部分 一般来说， 有以下两种姿势 在JS脚本文件的最后, 通过特定的注释, 声明这个脚本对应的sourcemap....形式引用sourcemap 以内联形式引用sourcemap, 这无疑会增加脚本本身的体积 HTTP的request header 按照sourcemap的标准， 在js脚本的请求的response中，...如果带有名为sourcemap(或x-sourcemap(已被弃用))的header， 则这个资源会被认为是这个js脚本的sourcemap， 可以被浏览器解析使用 经过实际的测试使用， 在此给大家做几个...这样也可以减少sourcemap产物的体积 module 在从源代码到产物的编译/处理过程中, 可能会经过多层转换 以webpack为例, 一个js源文件, 可能会经过好几个loader的处理....文件传入 */ SourceMapConsumer.with(fs.readFileSync('sourcemap.js.map', 'utf-8'), null, consumer
Webpack会利用loader将所有非js模块转化为webpack可处理的js模块，而增加上面的cheap配置后也不会有loader模块之间对应的sourceMap。...比如jsx文件会经历loader处理成js文件再混淆压缩， 如果没有loader之间的sourceMap，那么在debug的时候定义到上图中的压缩前的js处，而不能追踪到jsx中。...如果想像js一样，知道这个css样式是在哪个文件需要怎么弄呢？ 上面讲解的配置其实都是针对js的sourceMap，配置后webpack会自动帮我们生成各类js sourceMap。...因为本质上webpack只处理js，对于webpack来说，css是否有sourceMap依赖于对css处理的loader是否有sourceMap输出，所以loader需要开启并传递sourceMap,...通过debug，打印出生成的css sourceMap，和js sourceMap对比并无他样： 04 利用css sourceMap 解决css url resolve的问题 如果大家用了sass
可以调试这种转换后不一致的代码 source-map是从已转换的代码，映射到原始的源文件; 使浏览器可以重构原始源并在调试器中显示重建的原始源; 更容易定位到源文件错误 如何使用SourceMap 第一步...:根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map; devtool:'source-map' 第二步:在转换后的代码，最后添加一个注释，它指向sourcemap...编码; file:打包后的文件(浏览器加载的文件); sourceContent:转换前的具体代码信息(和sources是对应的关系); sourceRoot:所有的sources相对的根目录; 生成SourceMap...hidden-source-map: 会生成sourcemap，但是不会对source-map文件进行引用; 相当于删除了打包文件中对sourcemap的引用注释 # sourceMappingURL=...bundle.js.map 如果手动添加进来，那么source-map就会生效了 nosources-source-map: 会生成sourcemap，但是生成的sourcemap只有错误信息的提示，不会生成源代码文件
Fundebug 支持上传 Sourcemap 如果用户主动上传了 Sourcemap，或则配置允许 Fundebug 自动下载 Sourcemap 文件，压缩代码一般都会自动还原。...参考：Fundebug 支持 Sourcemap 即时转换功能 然而，因为错误事件很多，总有些情况下因为一些未知的原因未能自动还原。...这个时候，需要一种很好的方式来将原本的代码还原出来，因此我们开发了 Sourcemap 即时转换功能。 如何使用？...如果一个事件的堆栈(stacktrace) 信息没有还原，可以点击上传 sourcemap按钮主动上传代码对应的 Sourcemap，如下图所示： 当上传完 Sourcemap 之后，系统会立即将堆栈信息还原出来
sourcemap 的格式如下： { version : 3, file: "out.js", sourceRoot : "", sources: ["foo.js",...因为可能编译产物是多个源文件合并的，比如打包，一个 bundle.js 就对应了 n 个 sources 源文件。 为什么要把变量名单独摘出来到 names 里呢？...各种调试工具一般都支持 sourcemap 的解析，只要在文件末尾加上这样一行： //@ sourceMappingURL=/path/to/source.js.map 运行时就会关联到源码： sourcemap...我们先分别来看下这几种基础配置： eval eval 的 api 是动态执行 JS 代码的。比如： 但有个问题，eval 的代码打不了断点。 怎么解决这个问题呢？...比如这样： 执行以后，你会发现 sources 多了光.js的文件： 它是可以打断点的，比如在 add 里打个断点，然后再执行 eval。 你会发现它断住了！
://xxxx/bundle.js.map 指令 记录原始代码与经过工程化处理代码之间位置映射关系 Map 文件 页面初始运行时只会加载编译构建产物，直到特定事件发生 —— 例如在 Chrome 打开...1.1 示例 以 Webpack 为例，设置 devtool = 'source-map' 即可同时打包出代码产物 xxx.js 文件与同名 xxx.js.map 文件，Map 文件通常为 JSON 格式.../src/index.js" ], "names": ["name", "console", "log"], "mappings": ";;;;;AAAA,IAAMA,IAAI,...GAAG,QAAb;AAEAC,OAAO,CAACC,GAAR,CAAYF,IAAZ,E", "file": "main.js", "sourcesContent": [..."webpack:///bundle.js" ], "sourcesContent": [ "console.log(\"bar\");" ], // 带
sourcemap 原理 sourcemap 的构成 为了更清晰的描述 sourcemap 的生成，我用一个最简单的 case 来编译并生成 sourcemap： // input const example...现在，我们对照 sourcemap 的做法，将上面的信息进行逐层的优化： 优化 省去输出文件中的行号，改用 ; 来标识换行 利用; 来标识换行，我们可以将上述的编码节省为： 0|src/example.js...|src/example.js|0|16, 33|src/example.js|0|22; 用索引标识变量名 前面我们提到 sourcemap 中的 names 数组，在 sourcemap 中，它会将变量名在...webpack 中不同的 sourcemap 我们知道 sourcemap 是用来记录编译后代码到原始代码的映射关系，所以理论上每一个编译过程都可以产生一份 sourcemap，如 TS(X) 转 JS...---- 相关链接 D-kylin/note[2] Rich-Harris/vlq[3] 细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息[4] 参考资料 [1] https
最近收到用户吐槽 @cloudbase/js-sdk（云开发Cloudbase的JavaScript SDK）的报错信息不够清晰，比如下面这条报错： ?...看到index.ts这样的信息估计大部分人都明白这里用到了SourceMap。确实SourceMap是支撑这套优化方案的必备要素，借助SourceMap可以定位到SDK的源码。...但只有SourceMap是不够的，优化的核心点在于：如何把原始错误冗长的堆栈中直接定位到关键代码行？ 这就是优化的目标。.../(\.js\/)?__decorate(\$\d+)?<@.*\d$/ : /(\/\w+\.js\.)?__decorate(\$\d+)?...+\:\d*\/.*\.js\:\d+\:\d+/; function catchErrorsDecorator(options){ return function( target: any
生产环境里，sourceMap 为 false：source source-map 和 source-map-loader 是专门的包： tsconfig.json 里，sourceMap 为
一、sourceMap帮助开发者调试代码 1.1 devtool配置 1.1.1 devtool:'none' devtool:'none' 报错提示： main.js:96 Uncaught TypeError.../src/index.js (main.js:96) at __webpack_require__ (main.js:20) at main.js:84 at main.js:87...1.1.2 devtool:'eval-source-map' devtool:'eval-source-map' 提示： index.js?...b635:1 Uncaught TypeError: console.logg is not a function at eval (index.js?.../src/index.js (main.js:96) at __webpack_require__ (main.js:20) at main.js:84 at main.js:87
官方不支持本地调试开启 sass 的 sourcemap（今年 3 月的某个版本曾经支持过），笔者也没有找到 react-app-rewired 支持的方法，所以修改了 config-overrides.js...这个问题从去年开始就有国外开发者提 issue 了，中间一度 CRA 发布了支持版本，但由于这个原因又回滚了该特性，目前处于本地开发是不支持 sourcemap 的（可见官方文档）。...[QQ20190718-175333.png] 我们目前用的是 react-app-rewired 来新增项目的 webpack 配置，但是没有找到开启 sourcemap 的方法。...所以最后还是参考了这个方法，修改了 config-overrides.js，改用 craco 轻松实现。 注：eject 方案不推荐使用，CRA 的目的即是开箱即用。...参考资料 Create React App 使用 如何扩展 Create React App 的 Webpack 配置 打破砂锅问到底：详解Webpack中的sourcemap devtool
Map 映射编码前后代码行数的功能，示例语言为 Golang 一、问题背景 由于线上实际运行的生产代码是经过编译的转换代码，笔者需要对生产代码和源代码的日志行进行映射，帮助开发者更方便快捷地定位问题 在JS...是一个存储代码转换前后位置对应关系的 JSON 格式文件，调试工具可以通过 Map 文件还原出转换后代码在转换前的行列信息，其基本格式如下： { version : 3, file: "output.js...", sourceRoot : "", sources: ["input_a.js", "input_b.js"], names: ["src", "maps", "are", "fun"]...mappings 字段，在第三小节会重点解释 应用场景 一般可以使用前端打包工具如 Webpack 等生成 Source Map 文件，如使用 Webpack 可以通过在 webpack.config.js...两者对应的 Map 文件如下 { "version":3, "file":"main.js", "mappings":"AAOEA,SAASC,KAAKC,YAPhB,WACI,MAAMC
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
