如何在本地测试包含需安全上下文类的JavaScript代码？

编辑：我之前误以为代码报错AudioWorkletProcessor is undefined是因为上下文不安全，但还是保留这个问题，因为相关的通用问题和解决方案依然有参考价值。

我在Mac上测试涉及AudioWorkletProcessor的网页JavaScript代码，这个类明确要求在安全上下文中运行（通常指HTTPS环境）。目前我用firebase serve在localhost:5000提供服务，但它不支持HTTPS。

我考虑过两种方案，但都有顾虑：

• 用ngrok创建HTTPS隧道到本地：这是付费功能，暂时不想使用；
• 用http-server搭配自签名证书：但证书不被浏览器信任，且不想把无效证书添加到系统钥匙串。

想请教有没有其他更简便的本地测试方法？比如有没有测试用的浏览器配置或工具？

方案1：优先利用浏览器对localhost的默认安全豁免 #

这是最省事的方案——现代主流浏览器（Chrome、Firefox、Safari）都默认将localhost、127.0.0.1这类本地回环地址视为安全上下文，哪怕使用HTTP协议。

如果你依然遇到AudioWorkletProcessor is undefined的报错，大概率不是安全上下文的问题，建议先排查代码本身：

• 确认是否通过audioContext.audioWorklet.addModule()正确加载了自定义AudioWorkletProcessor脚本；
• 检查浏览器控制台的其他报错信息，排查是否有脚本加载失败、语法错误或上下文初始化顺序问题。

方案2：用浏览器启动参数强制标记HTTP origin为安全上下文 #

如果你的测试地址不是回环地址（比如自定义本地域名如test.local），或者浏览器的默认豁免未生效，可以通过启动参数强制将指定HTTP origin标记为安全上下文：

Chrome/Edge 操作步骤：

1. 关闭所有已打开的Chrome窗口；
2. 在终端执行以下命令（替换为你的测试地址）：

open -a "Google Chrome" --args --unsafely-treat-insecure-origin-as-secure="http://localhost:5000" --user-data-dir="/tmp/chrome-test-session"

• --unsafely-treat-insecure-origin-as-secure：将指定的HTTP origin标记为安全上下文；
• --user-data-dir：用临时用户目录启动，避免修改你日常使用的浏览器配置。

Firefox 操作步骤：

1. 在地址栏输入about:config，点击“接受风险并继续”；
2. 搜索并修改以下配置：
   • 将devtools.security.allow_insecure_localhost设为true（允许本地HTTP地址使用安全上下文API）；
   • 若需要完全关闭HTTPS强制检查，可将dom.security.https_only_mode设为false。

方案3：给Firebase Serve添加HTTPS支持（无需修改系统钥匙串） #

你不用切换到http-server，Firebase CLI本身支持通过自签名证书提供HTTPS本地服务，且只需在浏览器中临时信任证书，无需添加到系统钥匙串：

1. 生成自签名证书（终端执行）：

openssl req -nodes -new -x509 -keyout server.key -out server.cert

2. 用Firebase Serve启动HTTPS服务：

firebase serve --only hosting --ssl-cert server.cert --ssl-key server.key -p 5000

3. 首次访问https://localhost:5000时，浏览器会提示证书不安全，直接点击“高级”→“继续前往localhost（不安全）”即可，该例外仅对当前浏览器生效，不会影响系统全局配置。

方案4：用Chrome DevTools直接调试Worklet逻辑 #

如果只是测试AudioWorkletProcessor的业务逻辑，还可以利用Chrome DevTools的专属面板绕过环境限制：

1. 打开DevTools（快捷键F12或Cmd+Opt+I）；
2. 点击右上角的⋮菜单，选择More tools→Worklets；
3. 在Worklets面板中，你可以直接查看已加载的AudioWorkletProcessor，甚至通过“覆盖”功能修改处理器代码并实时调试，无需依赖HTTPS环境。

备注：内容来源于stack exchange，提问作者Nerdy Bunz