如何為 html 文件內的內聯腳本生成源映射？

Question

我有一個 html 文件，其中包含用於修改 html 外觀的內聯腳本：

/* html code */

<script type=module>
document.getElementsByClassName('test')[0]....
// some other code
</script>

我正在嘗試為這個 javascript 生成 sourcemap 以用於 rollbar sourcemapping 進行調試。 關於如何做的任何建議？

Answer 1

當您編寫的源代碼在發送到瀏覽器之前進行轉換（例如，從 TypeScript 到 JavaScript，從模塊到 Webpack 的單個文件，或者從整齊地編寫的 JS 到縮小的 JS）時，使用源映射。

當 JS 中出現錯誤時，它們允許您通過調試告訴您錯誤出現在原始源文件中的位置，而不是瀏覽器運行的機器生成代碼中的錯誤。

如何生成源映射完全取決於將源代碼轉換為發送到瀏覽器的任何內容所使用的工具。

看起來你只是在編寫內聯 JS 並運行它。 沒有任何轉變正在進行。 您沒有任何可以生成源映射的東西，而且它無論如何也沒有用。