Source Map

最新推荐文章于 2022-12-29 08:42:25 发布

柒灬

最新推荐文章于 2022-12-29 08:42:25 发布

阅读量221

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44442911/article/details/124929670

版权

Source Map

项目在投入到生产坏境之前，需要对javaScript源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率，

而对于压缩混淆后的代码出错是一个困难的事情

变量被替换成没有任何语义的名称
空行和注释被剔除

Source Map 是一个信息文件，里面存储着位置信息，代码压缩混淆前后的对应关系

有了它出错工具将直接显示原始代码，方便后期调试

开发环境下

webpack默认启用了Source Map 功能，当程序出错时，可以直接在控制台提示错误信息

但是Source Map记录的是生成后代码的位置，会导致运行时报错的行数和源代码不一致

解决：在webpack.config.js文件中配置

module.exports = {
	mode:'development',
	//仅限在开发模式下
	devtool:'eval-source-map',
}

生产环境下

如果省略了devtool选项，则最终的文件不包含Source Map 防止代码泄露，但是不利于调试

所以有一个只定位行数不暴露源码，把devtool设置为nosource-source-map,此时的报错行数是源代码的错误行数，而点击定位确实压缩后的文件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柒灬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Elasticsearch 聚合搜索报错：mapping 没有keyword 解决

sweetCandy_m的博客

06-07

1839

错误案例 1、创建商品索引product { "mappings": { "" } }

SourceMap 浏览器控制台报错：DevTools failed to load SourceMap：Could not load content for ...

web_ding的博客

04-01

6032

什么是SourceMap： SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当客户端浏览器Chrome在收到这个压缩后的js文件后，它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码 ---------------------------------------------------------------------------------------- SourceMap报错原因：压缩过程中可能会破坏掉js文件中的部分代码导致调

参与评论您还未登录，请先登录后发表或查看评论

webpack5使用cheap-module-eval-source-map报错

reg183的专栏

07-08

838

今天在构建demo时，运行报错， Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. 惯性思维先查找了下百度，似乎没找到合适的解答。于是，耐心看了下报错提示，大致是说webpack5的版本规范更严格了，我的某段代码写的不规范。报错我贴一下根据提示，改成eval-cheap-module-source-map

DevTools 无法加载 SourceMap：XXXX.map 的内容:HTTP 错误: 状态代码 404，net::ERR_UNKNOWN_URL_SCHEM

热门推荐

caesarding07

04-23

2万+

写在前面又想骂人了，百度了一圈，各种不同的网站，对于该问题的解决办法的前几句都是确切来说也不是个问题，对我项目本身没有什么实质性的影响，但看着就是不爽，请教了一下前端的同学，这个 sourceMap 是方便调试的东西，从打包后的代码映射到源码，并在前端使用注释声明气的人直接吐血。不可否认禁用javascript 源映射，确实可以解决报错这个问题。但是说对项目没有影响，实在是大错特错。像我这种习惯了使用console 调试程序的人，没有这个功能还真是要死。按照自己的理解说一下，这个功能的作用吧，就

sourcemap

crystalNB的专栏

12-05

1318

SourceMap 的文件内容是js对象，其个字段是： - version：Source map的版本，目前为3。　　- file：转换后的文件名。　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。　　- names：转换前的所有变量名和属性名。　　- map

vite-sourcemap-repro

03-20

【vite-sourcemap-repro】是一个与JavaScript开发环境相关的项目，主要涉及Vite工具的源地图（Source Map）问题。源地图是现代前端开发中的一个重要概念，它允许开发者在浏览器的调试环境中看到编译后的JavaScript...

vscode 报错之 Could not read source map for file... 解决方案

04-18

vscode 报错之 Could not read source map for file... 解决方案

sourcemap-Rust的基本sourcemap处理-Rust开发

05-27

sourcemap此库实现JavaScript sourcemap的基本处理。安装该板条箱称为sourcemap，您可以通过c sourcemap依赖它。该库实现JavaScript sourcemap的基本处理。安装该板条箱称为sourcemap，您可以通过货运依赖它：...

sourcemap-stack

05-17

sourcemap-stack 参数定义参数属性说明 mapUrl sourcemap 地址链接，如果不填，表示sourcemap地址跟实际js路径一样 mapName 参考webpack的地址格式，比如：[name].[hash].js.map mapEncrypt 如果map文件放到跟js同...

fe-error-sourcemap:sourcemap 还原，demo 是vue例子

05-11

vue source-map demo 实际效果 dev npm i npm run build cd fe-view/dist && http-server -p 8080 or live-server -p 8080 ( or other static server,if use http-server, you need npm i ...

8、Source Map

s12345672的博客

10-24

419

1、什么是 Source Map Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试 2、解决默认 Source Map 的问题开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致 module.exports = { // 代表webpack

5.Source Map

XGM__的博客

12-28

159

Source Map：记录报错位置

vue全家桶版本升级排错

weixin_30412167的博客

06-28

557

背景如果你使用了element-ui的el-tabs组件，并且想要单独升级element-ui至2.10.0，你会发现，使用了el-tabs组件的页面只要打开就卡死。原因是element-ui~2.10.0采用了不兼容vue~2.5.10的写法。于是我尝试系统性升级vue全家桶，这也是为系统赋予更多能力做准备。结果遇到一些报错，这里记录一下。升级过程当前版本 vue: 2.5.10 vue-...

基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

weixin_34378045的博客

09-17

322

这里以原项目模板的postcss插件autoprefixer为例说明： 1.为了便于测试，对首页做一些调整：增加index.css .postcss_test { transform: rotate(3deg); } 修改如下图：修改index.js 修改index.html <div id="app"> &...

细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息

weixin_33896726的博客

11-12

1936

细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息 1. js 压缩 js 压缩对前端开发者来说是一门必修课。一般来说，压缩 js 主要出于以下两个目的：减小代码体积，加快前端资源加载速度保护源代码不被别人获取压缩 js 使用的工具库： UglifyJS2: 压缩 es5 uglify-e...

webpack下的Source Map

兮动人

05-04

822

文章目录1. 生产环境遇到的问题2. 什么是 Source Map3. webpack 开发环境下的 Source Map3.1 默认 Source Map 的问题3.2 解决默认 Source Map 的问题4. webpack 生产环境下的 Source Map4.1 只定位行数不暴露源码4.2 定位行数且暴露源码5. Source Map 的最佳实践 1. 生产环境遇到的问题前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时

-source1.5中不支持diamond运算符解决办法

ybb_ymm的专栏

12-29

1万+

写了几年代码了，回到最初了遇到了bug了，没有仔细思考，以为很容易，起始走到了误区，有种打了一辈子鹰，最后被麻雀啄了眼 de 感觉。很清晰的看到了我们这里的编译配置jdk确实是1.5版本的，所以，将这里改为jdk8，再次尝试编译，没有错误提示了！如果上述步骤还是无法解决我们的编译打包，报错问题，我们即可更改我们的maven中settings.xml中的配置。至此，我们解决-source1.5中不支持diamond运算符的错误问题已经完成了！这样调整完成以后，我们便可以正常的编译以及打包操作了！

reverse-sourcemap

最新发布

03-27

### 使用或实现反向源码映射 (Reverse Source Map) 的方法 #### 反向源码映射的概念反向源码映射是一种调试工具技术，用于将编译后的代码位置（如 JavaScript 文件中的行号和列号）映射回原始源文件的位置。这种功能对于开发人员来说非常重要，因为它允许他们在调试过程中查看并理解未压缩的源代码。通常情况下，源码映射是从原始源代码到生成代码的方向进行定义的。然而，在某些高级场景下，可能需要执行相反的操作——即从生成代码返回到原始源代码。这被称为 **reverse source map** 或者双向源码映射[^1]。 --- #### 实现 Reverse Source Map 的基本原理为了支持逆向查找操作，开发者可以采用以下几种方式： 1. **解析现有的 Source Map 数据结构** - 源码映射的标准格式通常是 JSON 格式的 `.map` 文件。这些文件包含了详细的映射关系表，描述了如何将生成代码中的每一部分对应到原始源代码。 - 要实现反向查找，可以通过遍历该数据结构来构建一个反转索引。例如，创建一张哈希表，其中键为生成代码中的坐标（line 和 column），而值则指向对应的原始源代码位置[^2]。 2. **利用第三方库** - 许多现代编程语言提供了专门处理源码映射的库。例如，在 Node.js 中有 `source-map` 库，它不仅能够读取标准的 Source Map 文件，还提供 API 来查询任意方向上的映射关系。 ```javascript const { SourceMapConsumer } = require('source-map'); async function loadSourceMap(mapFilePath) { const consumer = await new SourceMapConsumer(mapFilePath); // 查询某个生成代码位置对应的原始源代码位置 const originalPosition = consumer.originalPositionFor({ line: 10, column: 5 }); console.log(originalPosition); // 输出原始文件名、行号和列号 } ``` 3. **扩展调试器的功能** 如果目标环境是一个浏览器或者运行时平台，则可以直接通过其内置的调试接口访问源码映射信息。比如 Chrome DevTools 提供了一个强大的 API 集合，可用于加载和分析 Source Maps。此外还可以编写插件来自定义行为以满足特定需求[^3]。 4. **优化性能考虑** 构建完整的反向索引可能会消耗大量内存资源，尤其是在大型项目中。因此建议仅当确实需要用到的时候才动态计算所需的部分而不是一次性全部预处理好整个表格[^4]。 --- #### 示例代码展示下面给出一段简单的 Python 程序演示如何手动解析并应用基础版本的 reverse source mapping: ```python def build_reverse_map(source_map_data): """Builds an inverted index based on given source map.""" reversed_index = {} for gen_loc, orig_loc in source_map_data.items(): key = f"{orig_loc['file']}:{orig_loc['line']},{orig_loc['column']}" if key not in reversed_index: reversed_index[key] = [] reversed_index[key].append(gen_loc) return reversed_index example_source_map = { ("gen_file", 1, 0): {"file": "src/main.py", "line": 7, "column": 8}, ("gen_file", 2, 3): {"file": "src/utils.py", "line": 19, "column": 1} } rev_map = build_reverse_map(example_source_map) print(rev_map) ``` 上述脚本会输出如下结果： ```plaintext { 'src/main.py:7,8': [('gen_file', 1, 0)], 'src/utils.py:19,1': [('gen_file', 2, 3)] } ``` --- #### 总结说明综上所述，虽然传统意义上的 source maps 主要关注正向转换过程，但是借助适当的技术手段完全可以达成 reverse source map 的目的。无论是自己动手还是选用成熟的解决方案都可以有效提升软件工程效率以及用户体验质量。 ---