如何在Chrome开发者工具>源>页面>顶部>（无域）（具有//＃sourceURL = ...的文件）中启用文件夹

Question

是否可以在Chrome devtool>“页面”面板中显示路径的文件夹 对于顶部>（无域）中的树节点

这些是来自js eval的节点，带有//＃sourceURL = ...

因为我的代码包含很多这些，所以我希望它们显示为

- top
  - MyDomain
    - MyFile
  - (no domain)
    - FolderA
      - Eval1
      - Eval2
    - FolderB
      - Eval3
      - Eval4

代替

- top
  - MyDomain
    - MyFile
  - (no domain)
    - FolderA/Eval1
    - FolderA/Eval2
    - FolderB/Eval3
    - FolderB/Eval4

Answer 1

将域（来源）包括在sourceUrl中。

我不得不通过反复试验找出答案，但在任何地方都没有得到充分记录。

JS语法：

//# sourceURL=http://mySite:8000/FolderA/File1.js

Css语法：

/*# sourceURL=http://mySite:8000/FolderA/File1.css */

在浏览器中构建它：

从相对网址创建sourceUrl ：

function jsSrcUrl(path) {
    return "//# sourceURL=" + window.origin + path + " \n";
}

var src = "/js/myScript.js"; // use this url in your GET request via fetch()
var sourceUrl = jsSrcUrl(src); // append this and eval it later

在获取请求期间

创建sourceUrl ：

var src = "/ui/vue.js";
var fullUrl;

fetch(src)
  .then(function(response) {
    fullUrl = response.url;
    return response.text()
  })
  .then(function(text) {
    console.log(text)
  })
var sourceUrl = "//# sourceURL=" + fullUrl + " \n"

向脚本中添加一个sourceUrl（在eval之前是一个字符串）：

var scriptWithSrcUrl = script.concat(sourceUrl);

评估您的脚本，以将脚本（字符串）加载到浏览器和源面板中

eval(scriptWithSrcUrl)

将它们放在一起：在获取请求期间创建一个sourceUrl并将其附加到脚本中并进行评估：

async function loadScript(url) {
    var fullUrl;

    async function getScript() {
        return fetch(url)
            .then(function(response) {
                fullUrl = response.url;
                return response.text();
            })
            .then(function(text) {
                return text;
            });
    }
    var script = await getScript();
    var sourceUrl = "\n//# sourceURL=" + fullUrl + " \n";
    var scriptWithSrcUrl = script.concat(sourceUrl);
    (1, eval)(scriptWithSrcUrl);
}

loadScript("/path/to/script.js");

在devtools源面板中查找并在正确的文件夹和域中找到您的文件！

尊敬的Google，Mozilla，Microsoft和Apple：

fetch api很不错，但是通过get请求获取js / css / html，注入sourceUrl，并评估它不仅是la脚，而且是la脚。通常，将所有内容都加载到文档头中的script标记中与延迟加载组件，代码拆分，树状摇动和SSR配合使用效果不佳。 如果有一个可以加载 js ， css ，html 模板的api的好 ，组件和js 模块进入全局范围-全部来自js （不是来自html），是使用浏览器API本身生成的吗？

一种不涉及的方式：

• ES6模块的语法和范围（用于加载到本地范围中）
• fetch() + sourceUrl + eval()
• document.createElement('script') +设置src + onload()（污染文档头）
• 某些库/依赖项（jQuery $ .getScript（），提取注入，Requirejs等）

我确定此api已经存在于浏览器中，脚本标签可能已经占用了js api ...我们不能只拥有美好的事物吗？

loadScript("path/to/js.js"); // for loading js into global scope

这种简单的用例，但没有API。