WebWorker在WebStorm中点“Run”没反应，是因为默认用file://协议打开HTML，而浏览器禁止file://下创建Worker；需改用HTTP服务（如WebStorm内置服务器或http-server），并确保Worker脚本路径为绝对路径、同源可访问。
WebWorker脚本为什么在WebStorm里点“Run”没反应？
因为 WebStorm 的默认 Run Configuration 是为普通 HTML 页面设计的，它启动的是本地 HTTP 服务（如 http://localhost:63342/），但浏览器出于安全限制，file:// 协议下无法创建 Worker，而 WebStorm 默认用 file:// 打开 HTML —— 这就是你点了“Run”却看不到 Worker 执行、控制台也无报错的根源。
解决办法不是改 Worker 代码，而是让页面走真正的 HTTP 协议加载：
- 用 WebStorm 内置服务器：右键 HTML 文件 → “Open in Browser” → 选 “Chrome (with JavaScript Debug)”（确保勾选了 “Use built-in web server”）
- 或手动启用：进入
Settings → Tools → Built-in Terminal，确认已启用内置服务器；再检查Help → Find Action → “Registry”中webide.built.in.server.enabled是 true - 更可靠的方式：用
npm install -g http-server，然后在项目根目录运行http-server -c-1（禁用缓存），再手动访问http://localhost:8080/your-page.html
Worker 文件路径写错导致 DOMException: Failed to construct 'Worker'
这个错误几乎全是路径问题。Worker 构造函数只接受同源 URL，且不能是相对路径（如 ./worker.js）—— 它会相对于当前 HTML 解析，但实际加载时受 CSP 和协议限制，极易失败。
正确做法：
- Worker 脚本必须放在 WebStorm 项目根目录下可被 HTTP 服务直接访问的位置（比如和
index.html同级） - 构造时用绝对路径：
new Worker('/worker.js')（注意开头的/，表示从域名根开始） - 如果项目部署在子路径（如
http://example.com/myapp/），要用new Worker('/myapp/worker.js')，不能靠import.meta.url动态拼 —— WebStorm 的内置服务器不支持模块化 Worker 的importScripts自动解析 - 避免使用
data:或BlobURL 方式调试，虽然可行，但在 WebStorm 断点调试中无法映射源码
怎么在 WebStorm 里给 Worker 打断点并单步调试？
WebStorm 支持 Worker 调试，但需要满足两个硬性条件：页面必须通过 HTTP 加载（见第一条），且 Worker 脚本必须有正确的 source map 或原始文件可访问。
实操步骤：
- 确保 Worker 文件是普通
.js文件（不要打包、不要内联），且与 HTML 同域可访问 - 在 Worker 文件中任意行打上断点（比如
self.onmessage = ...第一行） - 用 Chrome 浏览器打开页面（必须是
http://开头），并提前在 Chrome DevTools 的Sources → Threads面板中勾选Enable JavaScript debugging for workers - 触发 Worker 创建（例如点击按钮调用
worker.postMessage()），WebStorm 会自动捕获 Worker 线程并在断点处暂停 - 注意：Worker 的
console.log默认输出到 Chrome 的Console → Filters → Workers分组，不是主页面的 console
Worker 里调用 fetch 或 localStorage 报错怎么办？
Worker 环境不是完整浏览器上下文：它没有 window、document、localStorage，也没有 DOM API。但 fetch 是支持的（只要浏览器版本 ≥ Chrome 42），而 localStorage 永远不可用 —— 这不是 WebStorm 问题，是规范限制。
常见误操作及替代方案：
-
localStorage.getItem()→ 直接报ReferenceError；改用主线程通过postMessage传数据，或改用IndexedDB（Worker 中可用） -
fetch('/api/data')失败 → 检查是否跨域，Worker 中的 fetch 遵守同源策略，且不带 cookies（除非显式加{ credentials: 'include' }） - 想用
setTimeout？可以；但requestAnimationFrame不可用 —— Worker 没有渲染帧概念 - ES module Worker（
new Worker('worker.js', { type: 'module' })）在 WebStorm + Chrome 中支持，但需确保服务返回正确的Content-Type: application/javascript，否则会静默失败
Worker 的能力边界比看起来窄，别指望它能复刻主线程环境。调试时多看 Chrome 的 Application → Service Workers 和 Console 中的红色错误，而不是怪 WebStorm。
