如何为HTML文件中的内联脚本生成Sourcemap用于Rollbar调试？

步骤1：拆分内联脚本为独立文件 #

把HTML里<script type=module>内的代码抽出来，保存成单独的JS文件，比如命名为page-style.js，这样能更便捷地生成sourcemap。

步骤2：用构建工具生成带Sourcemap的编译文件 #

推荐用轻量快速的esbuild，或者Rollup来处理，这里以esbuild为例：
打开终端执行命令：

esbuild page-style.js --bundle --sourcemap --outfile=dist/page-style.js

执行后会在dist目录生成两个文件：

• page-style.js：编译后的可执行脚本
• page-style.js.map：对应的sourcemap文件

步骤3：替换HTML中的内联脚本 #

把原来的内联脚本块替换成外部引用：

<script type="module" src="dist/page-style.js"></script>

如果一定要保留内联方式，可以把编译后的JS代码复制回HTML的<script type=module>标签里，同时把sourcemap文件转成Base64编码，在脚本末尾添加：

//# sourceMappingURL=data:application/json;base64,【这里替换成Base64编码的sourcemap内容】

（可通过终端命令base64 page-style.js.map生成编码内容）

步骤4：上传Sourcemap到Rollbar #

1. 登录Rollbar，进入对应项目的Settings > Source Maps
2. 点击Add Source Map，上传生成的page-style.js.map文件
3. 填写匹配路径：如果是外部脚本，填脚本在页面中的完整URL路径（比如https://your-domain.com/dist/page-style.js）；如果是内联脚本，可以自定义一个标识符（比如inline-page-style），确保和脚本里的sourcemap关联对应

步骤5：验证调试效果 #

部署修改后的页面，触发脚本中的错误，查看Rollbar的错误报告，确认是否能正确跳转到原始的page-style.js源码位置。

额外注意事项 #

• 确保构建工具开启了sourcemap生成（esbuild的--sourcemap参数、Rollup的sourcemap: true配置）
• Rollbar的环境配置（开发/生产）要和部署环境一致，否则可能无法匹配sourcemap
• 如果用其他构建工具（比如Webpack），思路类似：打包生成带sourcemap的脚本，上传map文件到Rollbar并配置路径匹配

内容的提问来源于stack exchange，提问作者anonymous