sourcemap 不仅适用于 chrome 浏览器，也适用于其它很多现代浏览器，本文主要针对 chrome 一、sourcemap 基本信息 当前前端行业，js/css 代码混淆压缩已经是基本操作了...下面就是一个配置并引入了 sourcemap 文件的的页面，其控制台脚本如下所示： 在控制台的 Sources 栏目下，可以看到构建后的代码、sourcemap 路径地址以及根据 sourcemap...二、如何构建sourcemap 因为我们是用的是 webpack 进行打包的，而 sourcemap 的生成和打包是同步的。...不建议为 sourcemap 文件使用相对路径，sourcemap 文件也不建议开放外网&线上访问 因为相对路径的请求会默认请求到业务域名上去，一个原因是会造成不必要的垃圾请求，另一个原因就是 sourcemap...当本地服务启动之后，sourcemap 中的 sourcemap 资源中配置的 127.0.0.1:80/sourcemap/a.js.map 地址就会请求到本地服务器了。
并且，已知的构建工具都已经支持 生成 sourcemap 了。同时也希望你了解一下badjs是什么。...但是，基于 sourcemap 用源码调试应该是一件很 nice 的事情，让 sourcemap 发布到内网的服务器不就好了？...为了解决这个问题，我们在内网搭建了一个 sourcemap 的文件服务器，并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。...到此，如果你希望项目生成 sourcemap 并通过源码进行调试，只需要在构建的时候加入一个这个： // 以 grunt 为例 grunt.registerTask('publish:sourcemap...这里留一个问题给大家思考：为什么通过 sourcemap 生成的源码文件是在 dist 目录下的，或者说 sourcemap 文件为什么必须指定 sourceRoot 且不能为空或指向当前目录?
压缩时不仅需要处理 minfy 过程生成的 SourceMap 还需要处理其和原始 bundler 生成的 SourceMap 合并的问题，否则 SourceMap 和经过压缩处理的代码对应不上了。...因此我们还需要考虑将 SourceMap 发布到内网而非公网上，这时就需要处理 SourceMap 关联的问题了。...SourceMap 格式 首先我们需要了解下 SourceMap 的基本格式 我们将一个 .ts 文件编译为 .js 文件，看看其 SourceMap 信息是如何处理映射的。...SourceMap 全链路支持 前面我们已经介绍的 SourceMap 的基本格式，以及如何基于 SourceMap 的内容，来实现 SourceMap 的双向查找功能，大部分的 sourcmap 相应的工具链都是基于此设计的...SourceMap 验证 当我们给我们的 transformer 加了 SourceMap 支持后，我们怎么验证我们的 SourceMap 是正确的呢？
并且，已知的构建工具都已经支持 生成 sourcemap 了。同时也希望你了解一下badjs是什么。...但是，基于 sourcemap 用源码调试应该是一件很 nice 的事情，让 sourcemap 发布到内网的服务器不就好了？...为了解决这个问题，我们在内网搭建了一个 sourcemap 的文件服务器，并在构建的时候将生成的 sourcemap 文件通过badjs-sourcemap发布到该文件服务器。...到此，如果你希望项目生成 sourcemap 并通过源码进行调试，只需要在构建的时候加入一个这个： // 以 grunt 为例 grunt.registerTask('publish:sourcemap...文件将自动加载，如图： image.png 这里留一个问题给大家思考：为什么通过 sourcemap 生成的源码文件是在 dist 目录下的，或者说 sourcemap 文件为什么必须指定 sourceRoot
为了解决这个问题，google 提出了sourceMap 的想法，并在chorme上最先支持sourceMap的使用。...sourceMap可以帮我们直接定位到编译前代码的特定位置，接下来我们直接拿个sourceMap文件来看看它包含了一些什么信息： ?...说起sourceMap我们第一反应通常是JavaScript的sourceMap,实际上现在css也可以使用sourceMap。...所以其实只要了解sourcemap的编码规范，我们可以对任何我们想要的资源生成sourceMap，当然sourceMap 的支持也还是要取决于浏览器的支持。...加了css sourceMap后,我们可以很轻松的定位到sass编译前的源码路径了。 ? 通过debug，打印出生成的css sourceMap，和js sourceMap对比并无他样： ?
image sourcemap是什么 Sourcemap 是一种用于将编译、打包后的代码映射回原始源代码的技术。...Sourcemap 文件通常以 .map 扩展名结尾，并且可以通过浏览器的开发者工具查看和使用。...sourcemap的结构 Sourcemap 文件的结构主要包括以下几个部分： 「Version」: 这是源映射文件的版本号。目前，Sourcemap 的版本号为 3。...mappings的含义 Sourcemap 的 mappings 字段是一个字符串，它描述了源文件和生成文件之间的映射关系。这个字符串被分成多个部分，每个部分对应源文件的一行。...不过copilot团队暴露了sourcemap文件，又可以进一步探求源码的结构和替换一些关键变量，为分析带来了一定的便利。
简介 sourceMap，顾名思义，就是对源文件的映射。比如打包压缩后的代码对应源文件中的哪一行代码，这能够极大地方便开发者的调试。...2. sourceMap的作用 我们用一个简单的示例，来看一下sourceMap的作用。如图，先精简一下之前的项目文件。 ?...不包含列信息，也不包含loader的sourcemap。可搭配大部分其他关键字使用。...比如： devtool: "cheap-source-map" 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 参数解释
这里不是从技术和标准上讲sourcemap的原理, 也是从开发生产的角度, 来简要说明sourcemap要如何在实际使用中正确生效 sourcemap是源代码和编译产物的关系， 因此让sourcemap...形式引用sourcemap 以内联形式引用sourcemap, 这无疑会增加脚本本身的体积 HTTP的request header 按照sourcemap的标准， 在js脚本的请求的response中，...如果带有名为sourcemap(或x-sourcemap(已被弃用))的header， 则这个资源会被认为是这个js脚本的sourcemap， 可以被浏览器解析使用 经过实际的测试使用， 在此给大家做几个...key为sourcemap或x-sourcemap c. value为对应的sourcemap的url d....， 可以减少sourcemap本身的体积 cheap sourcemap可以精准定位到行与列， 但是必然会增加信息到sourcemap内容里。
可以调试这种转换后不一致的代码 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只有错误信息的提示，不会生成源代码文件
为了解决这个问题，google 提出了sourceMap 的想法，并在chorme上最先支持sourceMap的使用。...sourceMap可以帮我们直接定位到编译前代码的特定位置，接下来我们直接拿个sourceMap文件来看看它包含了一些什么信息： 上面可以看到，sourceMap其实就是就是一段维护了前后代码映射关系的...说起sourceMap我们第一反应通常是JavaScript的sourceMap,实际上现在css也可以使用sourceMap。...所以其实只要了解sourcemap的编码规范，我们可以对任何我们想要的资源生成sourceMap，当然sourceMap 的支持也还是要取决于浏览器的支持。...因为本质上webpack只处理js，对于webpack来说，css是否有sourceMap依赖于对css处理的loader是否有sourceMap输出，所以loader需要开启并传递sourceMap,
Fundebug 支持上传 Sourcemap 如果用户主动上传了 Sourcemap，或则配置允许 Fundebug 自动下载 Sourcemap 文件，压缩代码一般都会自动还原。...参考：Fundebug 支持 Sourcemap 即时转换功能 然而，因为错误事件很多，总有些情况下因为一些未知的原因未能自动还原。...这个时候，需要一种很好的方式来将原本的代码还原出来，因此我们开发了 Sourcemap 即时转换功能。 如何使用？...如果一个事件的堆栈(stacktrace) 信息没有还原，可以点击上传 sourcemap按钮主动上传代码对应的 Sourcemap，如下图所示： 当上传完 Sourcemap 之后，系统会立即将堆栈信息还原出来
在讲基础配置之前，首先讲下 sourcemap 是什么： sourcemap sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。...每次转换都会生成 sourcemap，那也就是有多个 sourcemap： 默认 sourcemap 只是能从 bundle 关联到模块的代码，也就是只关联了最后那个 sourcemap。...有了 sourcemap 之后，要配置下 sourcemap-loader： 它的作用就是读取源码的 sourcemap，传递给后面的 loader。...当然，这种 sourcemap 配置还不够细致，比如 sourcemap 的 url 怎么生成，文件名是什么。...虽然 webapck 的 sourcemap 配置方式比较多，但最底层也就是浏览器支持的文件级别的 sourcemap 还有 eval 代码的 source 映射和 sourcemap 这两种机制。
看到index.ts这样的信息估计大部分人都明白这里用到了SourceMap。确实SourceMap是支撑这套优化方案的必备要素，借助SourceMap可以定位到SDK的源码。...但只有SourceMap是不够的，优化的核心点在于：如何把原始错误冗长的堆栈中直接定位到关键代码行？ 这就是优化的目标。
但是，如果我们的打包产物中有这样的文件，我们便能利用这些文件还原出原始代码： 这些就是 sourcemap，那么 sourcemap 是怎么生成的？我们应该怎么使用 sourcemap？...sourcemap 原理 sourcemap 的构成 为了更清晰的描述 sourcemap 的生成，我用一个最简单的 case 来编译并生成 sourcemap： // input const example...webpack 中不同的 sourcemap 我们知道 sourcemap 是用来记录编译后代码到原始代码的映射关系，所以理论上每一个编译过程都可以产生一份 sourcemap，如 TS(X) 转 JS...经过这么多过程，我们需要将每一步生成的 sourcemap 合并起来才能最终得到一份生产环境代码到开发环境代码的 sourcemap。...为什么有时候 sourcemap 表现不准？ 一个猜测：上面我们介绍了 webpack 中多种 sourcemap 模式。
一、什么是 Sourcemap Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现，它能够将经过压缩、混淆、合并的代码还原回未打包状态，帮助开发者在生产环境中精确定位问题发生的行列位置...二、使用 Sourcemap Webpack 提供了两种设置 Sourcemap 的方式，一是通过 devtool 配置项设置 Sourcemap 规则短语；二是直接使用 SourceMapDevToolPlugin...或 EvalSourceMapDevToolPlugin 插件深度定制 Sourcemap 的生成逻辑。...提供的映射功能可精确定位到文件、行、列粒度，但有时在「行」级别已经足够帮助我们达到调试定位的目的，此时可选择使用 cheap 关键字，简化 Sourcemap 内容，减少 Sourcemap 文件体积...三、总结 至此，有关 Sourcemap 的大部分内容就讲解完毕了，读者们需要了解 Sourcemap 是一种高效位置映射算法，它将产物到源码之间的位置关系表达为 mappings 分层设计与 VLQ
一、sourceMap帮助开发者调试代码 1.1 devtool配置 1.1.1 devtool:'none' devtool:'none' 报错提示： main.js:96 Uncaught TypeError
本文从原理的角度入手对 Source Map 进行了较为深入的分析，并从业务需要的角度出发，手动编写根据 Source Map 映射编码前后代码行数的功能，...
官方不支持本地调试开启 sass 的 sourcemap（今年 3 月的某个版本曾经支持过），笔者也没有找到 react-app-rewired 支持的方法，所以修改了 config-overrides.js...这个问题从去年开始就有国外开发者提 issue 了，中间一度 CRA 发布了支持版本，但由于这个原因又回滚了该特性，目前处于本地开发是不支持 sourcemap 的（可见官方文档）。...[QQ20190718-175333.png] 我们目前用的是 react-app-rewired 来新增项目的 webpack 配置，但是没有找到开启 sourcemap 的方法。...参考资料 Create React App 使用 如何扩展 Create React App 的 Webpack 配置 打破砂锅问到底：详解Webpack中的sourcemap devtool
简单说下entry、output，然后了解下sourcemap，这个东西还是比较重要。...然后要去webpack.config.js中把mode: "development"这行代码注释掉，因为开发模式下，默认是开启了sourcemap的。...4、使用sourceMap 而sourceMap就是解决这个问题的，当浏览器抛出错误的时候可以帮我们定位到具体的js文件和行列位置。...在webpack中开启sourceMap是个很简单的事情： module.exports = { mode: 'development', // 开启sourceMap + devtool...当我们在webpack.config.js中设置完sourcemap以后，打包刷新浏览器我们就可以看到打印信息变为这样，就可以很明确的帮我们定位到问题。 ?
领取专属 10元无门槛券
手把手带您无忧上云
