目次
1. Web Workerでconsole.logが確認できない
JavaScriptのWeb Worker（以下、Worker）は重い処理をバックグラウンドで実行できる便利な機能ですが、「Worker内で書いた console.log がコンソールに表示されない！」というトラブルに遭遇することがよくあります。
Workerはメインスレッドとは異なるコンテキストで動いているため、ログの出力先や挙動が通常のスクリプトとは異なるのが原因です。
Workerのログが表示されないときにチェックすべき5つの原因と対策をまとめました。
1. Consoleのtopを見ている
console.logはデベロッパーツールのConsoleを開けば確認できると思っている方が多いと思いますが、Workerの場合はConsoleのtop配下のWorkerのJSファイルに表示されます。
読み込んでいる拡張機能やJSファイルが多い場合は、スクロールした下の方に表示されることがあります。
2. error、warning、フィルターなどの絞り込みの影響
初心者に多いミスですが、Console左側のerrorやwarningだけを表示する箇所を選択しているため、console.logが表示されていないケースがあります。
また、フィルターの右上に「foo」などの文字列を入力しているため、絞り込みにより表示されていないことに気づかないケースも初心者には多いので注意が必要です。
3. Workerの起動に失敗している
そもそもWorkerのスクリプトファイルが正しく読み込まれておらず、起動に失敗しているケースです。
ファイルパスが間違っていたり、同一オリジンポリシー（CORS）に違反していると、Worker内部のコードは1行も実行されません。
ファイルが見つからない（404エラー）場合はメインスレッド側にエラーが出ますが、読み込み方法によってはエラー自体がマスクされて気づきにくいことがあります。
Viteなどの開発サーバーを使用している場合は以下のように書いて読み込めばファイルの読み込みに失敗しにくくなります。
const worker = new Worker(new URL('./worker.js', import.meta.url), {
type: 'module',
})4. terminate()やclose()が実行されている
Workerの処理が終わった直後に、メインスレッド側で「worker.terminate()」を呼んだり、Worker側で「self.close()」を実行して、Workerを破棄している場合はconsole.logの出力が消えます。
const worker = new Worker(new URL('./worker.js', import.meta.url), {
type: 'module',
})
console.log(worker)
const button = document.getElementById('calcBtn')
const resultText = document.getElementById('result')
button.addEventListener('click', () => {
const num = document.getElementById('numInput').value
resultText.textContent = '計算中...（この間も画面はフリーズしません）'
worker.postMessage(Number(num))
})
worker.onmessage = function(event) {
resultText.textContent = `結果: ${event.data}`
worker.terminate() // コメントアウトすればログが表示される
}
worker.onerror = function(error) {
console.error('ワーカーでエラーが発生しました:', error.message)
}
function fibonacci(n) {
if (n < 0) return 0
if (n <= 1) return n
return fibonacci(n - 1) + fibonacci(n - 2)
}
self.onmessage = function(event) {
console.log('計算開始！')
const number = event.data
const result = fibonacci(number)
console.log(result)
self.postMessage(result)
self.close() // コメントアウトすればログが表示される
}<h1>Web Workerのサンプル</h1>
<input type="number" id="numInput" value="40">
<button id="calcBtn">フィボナッチ数を計算</button>
<p id="result">ここに結果が表示されます</p>
<script type="module" src="/src/main.js"></script>5. Chrome拡張機能の影響で消えている
Chrome拡張機能の中にはインストールしているとWorkerのconsole.logが確認できなくなるものがあります。
例えば、Web DeveloperというChrome拡張機能をインストールすると、Workerのconsole.logが確認できなくなります。
インストールしている拡張機能が多くて、どれが影響しているか見当がつかない場合はシークレットウィンドウで確認するのが手っ取り早いです。
まとめ
Web Workerは重い処理をバックグラウンドで実行できる便利な機能ですが、使用したことがある人が少ないので、console.logが確認できないトラブルが発生したときに原因を特定できない人が多いです。
console.logが表示されない場合は、この記事に書いた5つのケースのうちのどれかが原因であることがほとんどなので、これらを覚えておけばすぐに問題を解消できます。
運悪く設定を見直してもログが出ないレアケースに遭遇した場合は、メインスレッドにメッセージとして送信して、メインスレッド側でログを出すのが最も確実な解決方法です。
worker.onmessage = function(event) {
if (event.data.type === 'debug') {
console.log('[Worker Debug]', event.data.message)
}
}// console.log('デバッグ情報') の代わりに以下を使用
self.postMessage({ type: 'debug', message: 'デバッグ情報です' })
![私もinput[type="number"]をやめてJavaScriptで処理した話](https://iwb.jp/wp-content/uploads/2022/06/stopped-using-input-type-number-and-used-javascript-120x120.png.webp)
