Cocos Creator 使用SourceMap定位问题

Cocos在编译打包的时候，会把JS代码做混淆并且转换成字节码。
假如有以下报错信息

TypeError: Cannot read property 'TestCrash' of undefined
at t.onLoad (mahjong/src/project.js:1580:7)
at CCClass.eval [as _invoke] (eval at createInvokeImpl (src/jsb_polyfill.js:4659:53), :3:65)
at CCClass.invoke (src/jsb_polyfill.js:4609:18)
at CCClass.activateNode (src/jsb_polyfill.js:13659:25)
at CCClass._onHierarchyChanged (src/jsb_polyfill.js:19768:85)
at CCClass._onHierarchyChanged (src/jsb_polyfill.js:2662:16)
at CCClass.setParent (src/jsb_polyfill.js:19564:32)
at t.onLoad (mahjong/src/project.js:2989:15)
at CCClass.eval [as _invoke] (eval at createInvokeImpl (src/jsb_polyfill.js:4659:53), :3:65)
at CCClass.invoke (src/jsb_polyfill.js:4609:18)

我们可以看到 t.onLoad这个函数里 testCrash报错了
但是"t"是哪个函数，如果有很多函数叫testCrash,那么根本无从查起，这时候要用到SourceMap了

如果你在打包时勾选了SourceMap 就会在编译后生成project.js.map文件

打包包含SourceMap

生成的SourceMap文件

这个文件包含了原始的文件，打包过后的类名变量行列号等等信息。

我们要做到的就是，拿到报错的行列号，找出对应的原始代码的行列号。

sourcemap地址: https://github.com/mozilla/source-map

安装nodejs后 安装sourcemap

$ npm install source-map

新建一个js脚本
把project.js.map 重命名为project.json

var line = Number(process.argv[2]);
var column = Number(process.argv[3]);

var sourceMap = require('source-map');
var rawSourceMap = require("./project.json")

sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
  console.log("originalPositionFor: line :", line, "column:", column, "\n", consumer.originalPositionFor({
    source: "./",
    line: line,
    column: column
  }));
});

调用脚本

$ node convertSourceMap.js 1580 7
 { source: '/source/assets/Script/GameMahjongMain.ts',
  line: 200,
  column: 8,
  name: 'TestCrash' }

这时候就会打印原始的文件和行列号了
我们就会知道 上文中那个"t" 就是 GameMahjongMain.ts,报错的行号是200

————————
想要学习Cocos的同学，欢迎关注我的零基础Cocos教程
https://ke.qq.com/course/313749
QQ群：793824456