Question

向页面添加Javascript的通常方法是，以静态HTML或在服务器端生成的某种方式将Javascript添加到文档的<body>或<head>中。

我想生成动态Javascript，并以动态方式将其添加到文档中；即按需运行。例如，通过WebSocket传输的Javascript代码。

一个选择是创建一个脚本元素，将包含脚本内容的字符串添加到.text属性，最后将脚本添加到文档中，如下所示：

var scriptContent = 'console.log("dynamic script");';
var s = document.createElement('script');
s.text = scriptContent;
document.body.appendChild(s);

这可以工作，但是我担心的是，脚本使用与HTML文档相同的URL /来源执行。而如果是用s.src参数调用的单独文件，则在查看浏览器控制台时它将显示在其自己的URL下。

为什么这一切都有意义？使用浏览器控制台进行调试和检查时，通常会告诉您脚本的名称以及打印到控制台的消息的行/列。例如，当打开控制台时，可能会显示几条控制台消息，并在右侧显示原点和行/列信息：

<domainname>:1:1
separate_js_file.js:14:20

这是我想要的行为，因为它可以轻松区分是什么脚本向控制台编写了一些内容。但是，如果将Javascript动态添加到页面，则所有这些都将在“主文档”下“发布”，通常通过域名打印，例如domain.com:1:1。

我想要的是更改/假装/伪装脚本的来源，假装它是外部脚本。这样，并非所有打印到控制台的行都来自原点domain.com:<line>:<column>，而是被专门调用，如module1:<line>:<column>。

这有可能吗？

Answer 1

我认为您可以在动态JS的末尾附加源映射。

//# sourceURL=http://example.com/path/to/your/sourcemap.map

当在Firefox中使用eval语句以及在chrome中插入了脚本标记和eval时，此方法有效。也可能是使Firefox也通过脚本标签理解它的一种方式。