Chrome网络控制台中是否已登录AudioWorklet.addModule?

问题描述

我正在通过AudioWorklet.addModule(githubUrl)从Github加载示例模块来测试一些音频工作集代码。但是,当我在开发人员设置中查看“网络”标签时,看不到Github的网络请求。我知道它是在发出请求,因为在切换到使用raw.githubusercontent地址之前,它给出了CORS错误(现在它给出的是Uncaught (in promise) DOMException: The user aborted a request)。我希望能够检查网络呼叫返回的内容,以便帮助诊断问题。

解决方法

Chrome中似乎存在一个错误,该错误会阻止网络请求显示在开发工具中。我认为为此提交一个错误是个好主意。

目前,您只能使用Firefox。它在开发工具中显示了网络请求。

如果您想继续使用Chrome,可以使用fetch()代理您的请求,以使其显示在devtools中。

与其直接调用addModule(),而是...

context.audioWorklet.addModule(url)

...您可以先获取源,然后将其包装到对象URL中。

fetch(url)
    .then((response) => response.text())
    .then((text) => {
        const blob = new Blob([text],{ type: 'application/javascript; charset=utf-8' });
        const objectUrl = URL.createObjectURL(blob);

        return context.audioWorklet.addModule(objectUrl)
            .finally(() => URL.revokeObjectURL(objectUrl));
    })