source-map.js是一个用于生成与提取 source map 的js插件-BFW插件库

source-map.js是一个用于生成与提取 source map 的js插件

source-map.js是一个用于生成与提取 source map 的js插件。

Source map 是一种映射关系,用于映射压缩后的 JavaScript 代码和其源代码之间的关系。这种映射可以用于:

1. 将压缩或合并后的 JavaScript 代码映射回原始的源代码,这样就可以在调试器和 stack trace 中显示原始的代码和行号。

2. 将一个语言(如 TypeScript)编译后的 JavaScript 代码映射回源代码,这样就可以追踪到错误的原始位置。

这个库提供了两个主要的类:

SourceMapConsumer:可以消费(读取)source map,并提供方法来从生成的位置反向映射到原始位置。

SourceMapGenerator:可以生成source map,它记录了生成的 JavaScript 代码和原始源代码之间的关系。

主要的功能有:

从生成的位置反向映射到原始位置

从原始位置前向映射到生成的位置

遍历 source map 中的所有映射

设置和获取源代码内容

应用(apply)一个 source map 到另一个 source map

用高层 API(SourceNode)或者低层 API(SourceMapGenerator) 生成 source map

使用方式:

npm

$ npm install source-map

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/source-map.js"></script>
<script>
         sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": "//repo.bfw.wiki/bfwrepo/js/mappings.wasm",
  });
</script>

生成source-map

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/source-map.js"></script>
<script>
 
  
  var map = new sourceMap.SourceMapGenerator({
  file: "source-mapped.js",
});

map.addMapping({
  generated: {
    line: 10,
    column: 35,
  },
  source: "foo.js",
  original: {
    line: 33,
    column: 2,
  },
  name: "christopher",
});

console.log(map.toString());
// '{"version":3,"file":"source-mapped.js","sources":["foo.js"],"names":["christopher"],"mappings":";;;;;;;;;mCAgCEA"}'
</script>
     <style>
      </style>
</head>
<body>
    <div>
        看console面板
    </div>
</body>
</html>

根据行列及map文件找到源码行列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/source-map.js"></script>
    <title>Document</title>
    <script type="module">

    window.onload=function(){
         sourceMap.SourceMapConsumer.initialize({
    "lib/mappings.wasm": "//repo.bfw.wiki/bfwrepo/js/mappings.wasm",
  });
//加载map文件
fetch('/asset/main.js.map')
  .then(response => response.text())
  .then(data => {
      
      
       const consumer =  new sourceMap.SourceMapConsumer(data);
       
       consumer.then(res => {
           
          const data= res.originalPositionFor({ line: 1, column: 946});//把错误的行列数值输进去
          console.log(data)//就能看到源代码中对应的错误行与列额
       })
    // 处理获取到的数据
   // console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });


       

    }
     
    </script>
    <script src="/asset/mainnomap.js"></script>
    <script>
             window.onerror = function (msg, url, row, col, error) {
        const obj = {
          msg,
          url,
          row,
          col,
        };
        console.log(obj);
      };
    </script>
  </head>
  <body>
      看console
  </body>
</html>

文档：https://github.com/mozilla/source-map