1. 導入：なぜデバッグに「例外停止」が必要なのか
開発中に「ブラウザのコンソールにエラーが出ているけれど、原因となった変数の状態がわからない」と困ったことはありませんか？通常、エラーが発生するとログが流れてしまい、その瞬間のメモリ状態を追うのは困難です。JavaScriptの「Pause on Exceptions」機能を使えば、ブラウザがエラーを検知した「まさにその瞬間」に処理をストップできます。これにより、エラーの再現手順を一生懸命考える必要がなくなり、調査時間を劇的に短縮できます。
2. 基礎知識：例外停止の仕組み
JavaScriptのデバッガーには、実行を制御する機能が備わっています。
例外停止（Pause on Exceptions）とは、プログラム実行中にエラー（Exception）が投げられた際、ブラウザのデバッガーが自動的にブレークポイントを挿入し、処理を一時停止させる機能です。
特に重要なのがコールスタックの確認です。エラーが「どの関数から呼ばれ、どのような引数が渡された結果として発生したのか」という経路を遡れるため、バグの根本原因を特定する近道となります。
3. 実装/解決策：設定方法
Google ChromeやEdgeなどのブラウザでは、以下の手順で有効化します。
1. ブラウザの「デベロッパーツール」を開く（F12キー）。
2. 「Sources（ソース）」タブを選択する。
3. 右側にある「Pause on exceptions」アイコン（一時停止のマーク）をクリックする。
- 「Pause on all exceptions」を選択すると、try-catchで囲まれているエラーも含めて停止します。
- 「Pause on uncaught exceptions」を選択すると、未処理の致命的なエラーのみで停止します。
4. サンプルプログラム：動作確認用コード
以下のコードをHTMLのscriptタグ内に貼り付けて、デベロッパーツールの「Pause on exceptions」をONにして実行してみてください。
function calculateDiscount(price, rate) {
// rateが未定義の場合、計算でエラーが発生します
if (rate === undefined) {
throw new Error("割引率が指定されていません！");
}
return price rate;
}
// 実行時にエラーを発生させる例
try {
console.log("計算を開始します");
const result = calculateDiscount(1000); // ここで例外が発生
console.log(result);
} catch (e) {
// ここで例外をキャッチするが、デバッガーは停止して変数の中身を見せてくれる
console.error("エラーを捕捉しました:", e.message);
}
5. 応用・注意点：現場での活用テクニック
現場でこの機能を活用する際の注意点をまとめます。
ライブラリ内のエラーに注意
外部ライブラリ（jQueryやReactなど）を使用している場合、ライブラリ内部で意図的に例外を投げている箇所で頻繁に停止してしまうことがあります。その場合は、デベロッパーツールの「Blackbox（除外設定）」機能を使って、ライブラリのファイルを対象外に設定することをおすすめします。
非同期処理のスタックトレース
最近のブラウザは「Asyncスタックトレース」をサポートしています。Promiseやasync/awaitを使用している場合、例外発生時のスタックトレースが非同期の呼び出し元まで遡れるようになっています。これと「Pause on Exceptions」を組み合わせれば、複雑な非同期バグも怖くありません。
まずは開発環境で「Pause on all exceptions」を一度試してみてください。これまで「なぜ？」と悩んでいたエラーの正体が、一瞬で判明するはずです。
コメント