原生app调试ts代码步骤

参考文档:原生平台 JavaScript 调试

可以断点js里的内容,通过修改.js与对应的.js.map里的路径为绝对路径即可以原生调试ts代码。

  1. 构建发布成功
    image

  2. 找到构建目录
    例如:
    Turtorial2D/build/mac/data/assets/main/index.js
    最后一行
    //# sourceMappingURL=index.js.map
    改为绝对路径
    //# sourceMappingURL=file:///work/CocosCreatorProject/Turtorial2D/build/mac/data/assets/main/index.js.map

再修改
Turtorial2D/build/mac/data/assets/main/index.js.map
sources里的ts也全部改为绝对路径
"sources":["file:///Applications/CocosCreator/Creator/3.8.0/CocosCreator.app/Contents/Resources/resources/3d/engine/editor/assets/tools/debug-view-runtime-control.ts","file:///work/CocosCreatorProject/Turtorial2D/assets/Scripts/GameManager.ts","file:///work/CocosCreatorProject/Turtorial2D/assets/Scripts/PlayerController.ts"]

  1. chrome里向工作区添加文件夹
    image

  2. 在对应ts文件里设置断点即可

如果需要断点引擎里的代码也可以修改对应目录下的cc.js、cc.js.map,然后把引擎代码路径添加到工作区

image

如果原生发布时这些路径都默认为绝对路径,那就调试就非常方便了,不用每次发布都改一次。

4赞

发现在3.8.2之后

//# sourceMappingURL=data:application/json;charset=utf-8;base64,

变成base64的内容了,同理base64 decode,修改完后再encode替换回去就可以正常调试