webpack source-map问题定位

package.json

{
  "name": "findsourcefilebymap",
  "version": "1.0.0",
  "description": "find line and column of source file by map file ,line and colunm",
  "main": "index.js",
  "dependencies": {
    "source-map": "^0.7.3"
  },
  "devDependencies": {},
  "scripts": {
    "map": "node ./index.js"
  },
  "author": "",
  "license": "ISC"
}

main.js

const fs = require('fs');

const sourceMap = require("source-map");

var argc = process.argv.length;
console.log(argc);
if(argc < 5){
    console.log('请按照 【npm run map "./map.js" 1 100】格式输入 ')
    console.log('第一个参数 MAP文件,第二个参数 行数,第三个参数 列数 ')
    return;
}
var mapFile = process.argv[2];
var line = parseInt(process.argv[3]);
var column = parseInt(process.argv[4]);


var a= async function(){
    var rawSourceMap = fs.readFileSync(mapFile).toString();
        // 通过sourceMap库转换为sourceMapConsumer对象
    var consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
    // 传入要查找的行列数,查找到压缩前的源文件及行列数
    var sm = consumer.originalPositionFor({
        line: line,  // 压缩后的行数
        column: column  // 压缩后的列数
      });
    console.log("源代码信息:\n " ,JSON.stringify(sm));
    if(!sm.source) return ;
    var sources = consumer.sources;
    // 根据查到的source,到源文件列表中查找索引位置
    var smIndex = sources.indexOf(sm.source);
    // 到源码列表中查到源代码
    var smContent = consumer.sourcesContent[smIndex];
    // 将源代码串按"行结束标记"拆分为数组形式
    const rawLines = smContent.split(/\r?\n/g);
    // 输出源码行,因为数组索引从0开始,故行数需要-1
    var consoleCode = "";
    for(var i = sm.line -3;i=0 && rawLines[i]){
            consoleCode += rawLines[i] +'\n'
        }
    }
    console.log("具体代码:\n ",consoleCode);
}
a();

readme.md

# sourcemap
命令行工具,用于快速定位产线的错误

## 使用帮助 必看

1. npm i
2. npm run map "文件路径“ ”行数“ ”列数“( 例如 node ./index.js "./app.js" "1" "1086" )


### 输入如下:

源代码信息:
  {"source":"webpack:///webpack/bootstrap","line":120,"column":38,"name":null}
具体代码:

var dataHref = tag.getAttribute("data-href");

你可能感兴趣的:(webpack source-map问题定位)