How do I generate a sourcemap for an inline script inside of a html file?

Question

I have a html file that has scripts inline that modifies how the html looks like:

/* html code */

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

I'm trying to generate the sourcemap for this javascript to be used in rollbar sourcemapping for debugging. Any suggestions on how to do it?

Answer 1

Source maps are used when the source code you write is transformed (e.g. from TypeScript to JavaScript, modules to a single file with Webpack, or neatly written JS to minified JS) before being sent to the browser.

When there is an error in the JS, they allow your debugging to tell you where the error appears in your original source file instead of in the machine generated code the browser is running.

How you generate a source map depends entirely on the tool you use to transform your source code into whatever you send to the browser.

It looks like you are just writing inline JS and running it. There's no transformation going on. You have nothing that could generate a source map, and it wouldn't be useful anyway.