如何debug web worker

Web Workers 爲 Web 前端網頁上的腳本提供了一種能在後臺進程中運行的方法。一旦它被建立,Web Workers 就能夠經過 postMessage 向任務池發送任務請求,執行完以後再經過 postMessage 返回消息給建立者指定的事件處理程序 ( 經過 onmessage 進行捕獲 )。javascript

例子:html

<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: java

以後就能像debug 普通javascript code同樣debug worker代碼: web

要獲取更多Jerry的原創技術文章,請關注公衆號"汪子熙"或者掃描下面二維碼:post

相關文章
相關標籤/搜索