読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

WebWorkerでのデバッグ

JavaScript


最近WebWorkerについて色々と調べてました。


WebWorkerで一番困るのがデバッグ方法です。
DOM操作やalert、console.logが使えません。


ということで、デバッグが上手く出来る方法を探してみました。


探した結果、簡単にできそうなのが二通りかなぁって思います。

throwを使う

途中で処理は止まっちゃいますけど、一番手っ取り早いと思います。

まずは呼び出し側

var worker = new Worker('worker.js');
worker.postMessage('Hello World');

次にworker側

self.addEventListener('message', function(e) {
    throw e.data;
}, false);


こんな感じで実行すると、下のようにコンソールに表示されます。
f:id:STAR_ZERO:20110727223315p:image


見ての通り渡された値が確認できました。


デメリットは処理が止まっちゃうことですね。

console.logを使う

もちろん普通には使えないので、ちょいと小細工します。
404 Not Found
上のリンクにあるWorkerConsole.JSを使います。(gitHubのリンクがあるのでそこから入手)


使い方は簡単で、
呼び出し側でさっきのWorkerConsole.JSを読み込むだけです。

<script type="text/javascript" src="WorkerConsole.js"></script>


で、あとは普通にWorkerを呼び出して、Worker側にconsole.logを書きます。

self.addEventListener('message', function(e) {
    console.log(e.data);
}, false);


コンソールは下のような感じになります。
f:id:STAR_ZERO:20110727224737p:image


Workerの呼び出しをWorkerConsole.JSがラップしてる感じなんですかね。


ちゃんと計測とかはしてないですけど、パフォーマンスは落ちると思います。
console.logは実際には呼び出し元で実行されてます。
WorkerConsole.js自体もWorkerとして呼び出され、そこから本来のWorkerを呼んでるので。
あんまり深く突っ込まれたらうまく説明できないですが・・・


それでも、開発中のデバッグには十分ありだと思います。



一応、自分が調べた結果はこんな感じでした。
誰かに役に立てたらうれしいな(*´ω`*)


ちなみにオレ自身は今のとこWebWorkerを使って何かする予定は一切ないです。
何でやりはじめたかも今となっては不明\(^o^)/