如何debug web worker

简介:

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers 就可以通过 postMessage 向任务池发送任务请求,执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。

例子:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Test Web worker</title> 
<script type="text/JavaScript"> 
function init(){ 
var worker = new Worker('js/compute.js'); 

worker.onmessage= function (event) { 

document.getElementById("result").innerHTML += 
event.data+"<br/>"; 
}; 
} 
</script> 
</head> 
<body onload="init()"> 
<div id="result"></div> 
</body> 
</html>

compute.js:

var i=0; 

function timedCount(){ 
 for(var j=0,sum=0;j<10000;j++) { 
    for(var i=0;i<1000;i++){ 
          sum+=i; 
    } 
 } 
 postMessage(sum); 
} 

postMessage("Before computing,"+new Date()); 
timedCount(); 
postMessage("After computing,"+new Date());

在web worker的source code里设置断点,选取Puase on start的checkbox:

之后就能像debug 普通javascript code一样debug worker代码:

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

相关文章
|
9月前
vite环境引入web worker方法
在 vite 环境中使用 web worker 时,如果遇到生产环境中 worker.js 文件的 MIME 类型被识别为 text/html,导致报错无法运行的情况时,可以参考以下两种方法,原理都是避免编译时产出单独的 worker.js 文件。方法一worker文件不需要包装,引入时后缀增加 ?worker&inline,使用时直接 new ImportedWorker();self.
452 0
|
4月前
|
JavaScript 安全 数据处理
Web Worker:让网页飞起来的幕后英雄(下)
Web Worker:让网页飞起来的幕后英雄(下)
Web Worker:让网页飞起来的幕后英雄(下)
|
4月前
|
缓存 编解码 数据处理
Web Worker:让网页飞起来的幕后英雄(上)
Web Worker:让网页飞起来的幕后英雄(上)
Web Worker:让网页飞起来的幕后英雄(上)
|
9月前
|
Web App开发 移动开发 JavaScript
web worker详解
web worker详解
132 0
|
11月前
|
Web App开发 JSON 前端开发
🎁🎁🎁详解 Web Worker,不再止步于会用!
前面的章节都是告诉你怎么使用Worker,并没有真正的深入Worker的原理,这一章我们就来详细的了解一下Worker的原理。
128 0
🎁🎁🎁详解 Web Worker,不再止步于会用!
|
JavaScript 前端开发
HTML学习笔记(八) Web Worker
HTML学习笔记(八) Web Worker
112 0
|
存储 缓存 前端开发
Web性能优化之Worker线程(下)
{服务工作线程|Service Worker} 基础概念 ⭐️⭐️⭐️ 线程缓存 ⭐️⭐️⭐️⭐️ 线程客户端 生命周期 ⭐️⭐️⭐️ 控制反转与线程持久化 updateViaCache 管理服务文件缓存 ⭐️⭐️⭐️ 线程消息 ⭐️⭐️⭐️ 拦截 fetch 事件 ⭐️⭐️⭐️⭐️⭐️
169 0
|
Web App开发 消息中间件 JavaScript
Web性能优化之Worker线程(上)
Worker 线程简介 {专用工作线程|Dedicated Worker} 专用工作线程 + Webpack {共享工作线程| Shared Workers }
424 0
|
移动开发 JavaScript 前端开发
性能优化之使用vue-worker插件(基于Web Worker)开启多线程运算提高效率
性能优化之使用vue-worker插件(基于Web Worker)开启多线程运算提高效率
30263 1
|
前端开发 JavaScript Windows