ワーカー処理の制限とデバッグ
ワーカー内はどんな処理でも自由にできるわけではありません。Web SocketやWeb Storage、非同期通信などが使える一方で、DOMやUI操作に関する処理はできません。ワーカー内にはwindowオブジェクトやdocumentオブジェクトが存在せず(navigatorオブジェクトはあります)、alert()はもちろん、Firebugなどで使用できるconsole.log()も使えません(Firebugなどのデバッガーは使えません)。
これではワーカー内でエラーが発生したときのデバッグが大変です。そこデバッグしやすくするためにプログラムに以下の1行を追加し、ワーカー内でエラーが発生したときのerrorイベントを捕捉します。
ワーカーオブジェクト.addEventListener("error", function(){} , true);
サンプル2を実行するとエラーが発生し、エラーコンソールに詳細が表示されます。
Firefox 3.6の場合
Safari 5 (WebKit系)の場合
●サンプル2[HTML]
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Web Workers内のコードデバッグ</title>
</head>
<body>
<h1>Web Workers内のコードデバッグ</h1>
<form action="./ww.cgi" method="get">
<input type="button" id="sendMessage" value="ワーカーにメッセージを送信" />
</form>
<script>
document.getElementById("sendMessage").addEventListener("click", function(){
// ワーカー設定
var myWorker = new Worker("sub.js");
myWorker.addEventListener("message", function(event){
alert(event.data);
}, true);
// ワーカー内でのエラーを捕捉しログに出力
myWorker.addEventListener("error", function(){} , true);
myWorker.postMessage(100);
}, true);
</script>
</body>
</html>
●サンプル2[sub.js]
addEventListener("message", function(event){
var count = event.data;
var total = 0;
for(var i=0; i<=count; i++){
total = total + i;
}
a = new XYZ(); // ●ここでエラーが発生するようにした
postMessage(total);
}, false);