Question

在我们的Web应用程序中，我们从包文件（包含html，js，css，images等的压缩包）中加载了大量内容。模块加载器（客户端JS）处理包并使内容可用于使用blob网址的DOM。

虽然这非常好用，但有时候找到正确的JavaScript文件进行调试仍然很乏味。

IE：在开发控制台中的chrome中 - ＆gt;来源所有blob网址都列在（无域名）下，并且具有随机名称，例如：

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

在正常的生产环境中，大约有100条这样的线路，所以找到合适的线路可能需要一些时间。

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

Answer 1

好吧，我这样做的方法是使用一个简单的反向地图来跟踪网址。

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

＆＃13;

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

＆＃13;

Answer 2

@ Keith的选择可能是最好的选择。（创建blobURI的地图和易于阅读的文件名。）

你也可以做一个动态路由器，它会给blobURI指向一些不错的网址，但如果你愿意这样做，那就不要使用blobURI。

其他一种非常糟糕的解决方法，实际上比Map更干净，就是将一个片段标识符附加到你的blobURI boolean isFourInARow(int x, int y) { return lengthOfLineContaining(int x, int y, 0, 1) >= 4 || lengthOfLineContaining(int x, int y, 1, 1) >= 4 || lengthOfLineContaining(int x, int y, 1, 0) >= 4 || lengthOfLineContaining(int x, int y, 1, -1) >= 4; }。

小心，这适用于 application / javascript Blob或其他一些资源类型，但不适用于此片段标识符所在的文档（html / svg / ...）具有特殊意义。

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

And as a fiddle 适用于不喜欢null原始StackSnippet的iframe的浏览器。

Answer 3

最后，我找到了一个符合我自己喜欢的解决方案。对于我们的应用程序，我们已经使用了一个缓存活动的服务工作者。所以每当有人打开调试模式时，我最终都会将模块文件写入serviceworker缓存。

由于资源文件的url部分是静态的，所以所有漂亮的浏览器功能（如断点）现在都可以再次使用。

下面我发布了维修工的相关代码。其余的代码只是简单的serviceworker缓存。

api.serveScript = function(module, script, content){
try{
    content = atob(content);
} catch(err){}

return new Promise(function(resolve, reject){
    var init = {
        status: 200,
        statusText: "OK",
        headers: {'Content-Type': 'text/javascript'}
    };
    caches.open("modulecache-1").then(function(cache) {
      console.log('[ServiceWorker] Caching ' + module + "/" + script);
      cache.put("/R/" + module + "/script/" + script, new Response(content, init));
      resolve("/R/" + module + "/script/" + script);
    });
});

}

感谢您的回答和帮助。我希望这个解决方案也会帮助其他人。

命名html blob url以便于参考

3 个答案: