如何调试 Web Worker？

Web Worker 的调试比主线程调试更具挑战性，但有多种工具和技巧可以帮助开发者高效调试 Worker 代码。

Chrome DevTools 调试

1. 查看 Worker 线程

1. 打开 Chrome DevTools（F12）
2. 切换到 "Sources" 面板
3. 在左侧找到 "Threads" 或 "Workers" 部分
4. 选择对应的 Worker 线程进行调试

2. 在 Worker 中设置断点

javascript
// worker.js
self.onmessage = function(e) {
  const data = e.data;
  
  // 在这里设置断点
  const result = processData(data);
  
  self.postMessage(result);
};

function processData(data) {
  // 可以在这里设置断点查看变量
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i];
  }
  return sum;
}

3. 使用 console.log

javascript
// worker.js
self.onmessage = function(e) {
  console.log('[Worker] Received message:', e.data);
  
  const result = heavyComputation(e.data);
  
  console.log('[Worker] Computation result:', result);
  self.postMessage(result);
};

Firefox 开发者工具

1. 调试 Worker

1. 打开 Firefox 开发者工具（F12）
2. 切换到 "Debugger" 面板
3. 在左侧找到 "Workers" 部分
4. 展开并选择要调试的 Worker

2. Worker 控制台

javascript
// worker.js
// 在 Firefox 中，Worker 的 console.log 会显示在主控制台
console.log('Worker message');

// 也可以使用 Worker 特定的调试信息
self.postMessage({ type: 'debug', message: 'Debug info' });

调试技巧

1. 消息追踪

javascript
// 主线程
const worker = new Worker('worker.js');

// 添加消息发送追踪
const originalPostMessage = worker.postMessage.bind(worker);
worker.postMessage = function(data) {
  console.log('[Main → Worker]', data);
  return originalPostMessage(data);
};

// 添加消息接收追踪
worker.addEventListener('message', function(e) {
  console.log('[Worker → Main]', e.data);
});

2. 错误捕获

javascript
// 主线程
worker.onerror = function(event) {
  console.error('Worker Error:');
  console.error('Message:', event.message);
  console.error('Filename:', event.filename);
  console.error('Line:', event.lineno);
  console.error('Column:', event.colno);
  console.error('Error Object:', event.error);
};

// Worker 内部
self.onerror = function(event) {
  console.error('Worker Internal Error:', event.message);
  // 可以选择不阻止默认行为
  // event.preventDefault();
};

// 使用 try-catch
self.onmessage = function(e) {
  try {
    const result = riskyOperation(e.data);
    self.postMessage(result);
  } catch (error) {
    console.error('Error in message handler:', error);
    self.postMessage({ error: error.message, stack: error.stack });
  }
};

3. 性能分析

javascript
// worker.js
self.onmessage = function(e) {
  const startTime = performance.now();
  
  const result = heavyComputation(e.data);
  
  const endTime = performance.now();
  const duration = endTime - startTime;
  
  console.log(`[Worker] Computation took ${duration.toFixed(2)}ms`);
  
  self.postMessage({ result, duration });
};

4. 状态监控

javascript
// worker.js
let state = {
  messageCount: 0,
  totalProcessingTime: 0,
  lastMessageTime: null
};

self.onmessage = function(e) {
  const startTime = performance.now();
  state.messageCount++;
  state.lastMessageTime = new Date().toISOString();
  
  const result = processMessage(e.data);
  
  const endTime = performance.now();
  state.totalProcessingTime += (endTime - startTime);
  
  self.postMessage({ result, state });
};

// 定期报告状态
setInterval(() => {
  console.log('[Worker] State:', state);
}, 5000);

高级调试技术

1. 使用 Source Map

javascript
// 在 Worker 脚本中添加 source map
// worker.js
// # sourceMappingURL=worker.js.map

// 或者在创建 Worker 时指定
const worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
  console.log(e.data);
});

2. 条件断点

在 Chrome DevTools 中设置条件断点：

javascript
// 在 processData 函数中设置条件断点
// 条件：data.length > 1000
function processData(data) {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i];
  }
  return sum;
}

3. 日志级别

javascript
// worker.js
const LogLevel = {
  DEBUG: 0,
  INFO: 1,
  WARN: 2,
  ERROR: 3
};

let currentLogLevel = LogLevel.INFO;

function log(level, message, data) {
  if (level >= currentLogLevel) {
    const prefix = {
      [LogLevel.DEBUG]: '[DEBUG]',
      [LogLevel.INFO]: '[INFO]',
      [LogLevel.WARN]: '[WARN]',
      [LogLevel.ERROR]: '[ERROR]'
    }[level];
    
    console.log(`${prefix} ${message}`, data || '');
  }
}

self.onmessage = function(e) {
  log(LogLevel.DEBUG, 'Received message', e.data);
  
  try {
    const result = processData(e.data);
    log(LogLevel.INFO, 'Processing complete', { result });
    self.postMessage(result);
  } catch (error) {
    log(LogLevel.ERROR, 'Processing failed', { error: error.message });
  }
};

4. 消息序列化检查

javascript
// 检查消息是否可以正确序列化
function checkSerializable(data) {
  try {
    const cloned = structuredClone(data);
    console.log('[Worker] Data is serializable');
    return true;
  } catch (error) {
    console.error('[Worker] Data is not serializable:', error);
    return false;
  }
}

self.onmessage = function(e) {
  if (!checkSerializable(e.data)) {
    self.postMessage({ error: 'Data is not serializable' });
    return;
  }
  
  // 处理消息
};

调试工具和库

1. Worker DevTools Extension

使用 Chrome 扩展 "Worker DevTools" 可以：

• 查看 Worker 的 console 输出
• 检查 Worker 的网络请求
• 监控 Worker 的性能

2. 使用调试代理

javascript
// debug-worker.js
const originalWorker = self.Worker;

self.Worker = function(scriptURL) {
  console.log('[Debug] Creating Worker:', scriptURL);
  
  const worker = new originalWorker(scriptURL);
  
  const originalPostMessage = worker.postMessage.bind(worker);
  worker.postMessage = function(data) {
    console.log('[Debug] Main → Worker:', data);
    return originalPostMessage(data);
  };
  
  worker.addEventListener('message', function(e) {
    console.log('[Debug] Worker → Main:', e.data);
  });
  
  return worker;
};

常见问题排查

1. Worker 无法启动

javascript
// 检查 Worker 文件路径
const worker = new Worker('/workers/worker.js'); // 确保路径正确

// 检查浏览器支持
if (typeof Worker === 'undefined') {
  console.error('Web Workers are not supported in this browser');
}

// 检查同源策略
// 确保 Worker 脚本与主页面同源

2. 消息未到达

javascript
// 检查是否启动了端口（SharedWorker）
const sharedWorker = new SharedWorker('worker.js');
sharedWorker.port.start(); // 必须调用 start()

// 检查消息格式
// 确保消息可以被结构化克隆

3. 内存泄漏

javascript
// 使用 Chrome DevTools 的 Memory 面板
// 1. 拍摄堆快照
// 2. 执行操作
// 3. 再次拍摄堆快照
// 4. 比较两个快照，查找内存增长

// Worker 中释放引用
self.onmessage = function(e) {
  const result = process(e.data);
  self.postMessage(result);
  e.data = null; // 释放引用
};

最佳实践

1. 使用有意义的日志：添加清晰的日志信息
2. 错误处理：在 Worker 和主线程都添加错误处理
3. 性能监控：监控 Worker 的执行时间和资源使用
4. 消息追踪：追踪消息的发送和接收
5. 使用调试工具：充分利用浏览器开发者工具
6. 条件断点：使用条件断点减少调试时间
7. 日志级别：使用不同的日志级别过滤信息
8. 定期检查：定期检查 Worker 的状态和性能