javascript - 命名 html blob url 以便于引用

Question

在我们的 Web 应用程序中，我们从包文件(包含 html、js、css、图像等的压缩包)加载大量内容。模块加载器(客户端 JS)处理包并使内容可供使用 blob url 的 DOM。

虽然这很好用，但有时要找到正确的 JavaScript 文件片段进行调试会很乏味。

IE:在开发控制台的 chrome 中->sources 所有 blob url 都列在(无域)下并具有随机名称，例如:

blob:https://example.com/0613efd7-6977-4872-981f-519eea0bc911

在正常的生产环境中，大约有 100 行这样的行，因此找到合适的行可能需要一些时间。

我非常想命名 blob url，或者做一些事情让它们更容易找到以用于调试目的。这似乎是可能的，因为 WebPack 正在做这样的事情，但我似乎无法找到如何。有没有人可以向我暗示正确的方向。

Answer 1

好吧，我的方法是使用一个简单的反向映射让一些全局变量跟踪 URL。

当然，这样做的一个问题是对不再存在的 blob 的引用将保留在内存中，但如果说您启用它只是为了调试目的，这可能不是问题。

var namedblobs = {};

function addNamedBlob(name, uri) {
  namedblobs[uri] = name;
}

function getNamedBlob(uri) {
  return namedblobs[uri];
}

function createSomeBlob() {
  //for testing just a random number would do
  return Math.random().toString();
}

var blob = createSomeBlob();

addNamedBlob("test1", blob);
addNamedBlob("test2", createSomeBlob());

console.log(getNamedBlob(blob)); //should be test1