JavaScriptデバッガーを使う
Sourcesタブのデバッガー機能でブレークポイントを設置し、実行中のコードを一時停止して内部の変数値を直接覗くCTFテクニックを体験します。画面には絶対に表示されないトークンの正体を暴きましょう。
📋 目次
⏸️ JavaScriptデバッガーとは何か｜実行を「一時停止」する力
ConsoleやSourcesタブの「静的な読解」では見えない世界
「動いているコード」を覗き見る唯一の方法
第8話ではソースコードを静的に読みました。しかし、コードの中には実行した瞬間にしか存在しない値もあります。計算結果・ループ中に変化する変数・関数の引数……これらは画面にもConsoleにも表示されないことがあります。デバッガーは、プログラムの実行を好きなタイミングで一時停止させ、その瞬間の変数の値をすべて確認できる、唯一無二のツールです。
「デバッガー」と聞くとプロのエンジニアだけが使う難しい機能に思えるかもしれませんが、操作はとてもシンプルです。止めたい行に印（ブレークポイント）をつけて、コードを実行するだけ。ブラウザが自動的にその行で一時停止し、それ以降のコードは実行されません。
🔴 Sourcesタブでブレークポイントを置く
行番号をクリックするだけ
F12 → Sourcesタブを開き、対象のJavaScriptファイル（このページならインラインの<script>）を表示します。コードエディタの行番号の部分をクリックすると、その行に赤い丸（ブレークポイント）が表示されます。これで設置完了です。
条件付きブレークポイントも使える
行番号を右クリックすると「条件付きブレークポイントを追加」を選べます。例えばi === 3のように条件式を入れると、その条件が真の時だけ一時停止します。ループが何百回も回る処理では非常に便利な機能です。
🔎 一時停止中にできること（Scope・Watch・ステップ実行）
停止した瞬間から「観察」と「操作」が始まる
ブレークポイントで一時停止すると、開発者ツールの右側パネルに様々な情報が表示されます。これらを駆使することで、プログラムの内部状態を完全に把握できます。
| パネル/操作 | 内容 | 使いどころ |
|---|---|---|
| Scope | 現在のローカル変数・クロージャ変数・グローバル変数の一覧と値 | 一時停止した瞬間の変数値を即座に確認したいとき |
| Watch | 任意の式を登録し、値の変化を継続的に監視 | assembled.lengthのような式も評価できる |
| Call Stack | 現在の処理がどの関数から呼ばれたかの履歴 | 「このコードはどこから実行された？」を逆探索したいとき |
| Step over (F10) | 現在の行を実行し、次の行へ進む（関数の中には入らない） | 1行ずつ淡々と進めたいとき |
| Step into (F11) | 現在の行が関数呼び出しなら、その内部に入る | 呼び出された関数の中身も見たいとき |
| Resume (F8) | 次のブレークポイントまで実行を再開 | これ以上は止めなくていいとき |
変数名にマウスを乗せるだけでも値が見られる
一時停止中、エディタ上の変数名にマウスホバーするだけでツールチップで現在値が表示されます。Scopeパネルを開かなくても素早く確認できる、覚えておくと便利なテクニックです。
🧩 CTFで使う「デバッガー」テクニック3選
実戦で役立つ止め方・見方
ループの最終回でブレークポイントを止める
条件付きブレークポイントでi === parts.length - 1のように指定すれば、ループが完了する直前、つまり変数が完成形になった瞬間だけで一時停止できます。何度もStep overを押す手間が省けます。
怪しい関数名にブレークポイントを置く
第8話のテクニックでソースを読み、checkFlag・verifyToken・decodeSecretのような怪しい関数名を見つけたら、その先頭行にブレークポイントを設置してから操作してみましょう。関数が呼ばれた瞬間に一時停止し、渡された引数（Arguments）も確認できます。
Call Stackで「どこから呼ばれたか」を逆探索する
一時停止中にCall Stackパネルを見ると、現在の関数を呼び出した関数、さらにその親……と実行履歴をすべて遡れます。「このイベントリスナーは結局どこから発火しているのか」を調べる際に非常に有効です。
🧩 5分CTFチャレンジ：ブレークポイントでトークンの正体を暴け！
画面には絶対表示されない変数を覗く
下のコードは実際にこのページに埋め込まれている本物のJavaScriptです。「トークン生成を実行」ボタンを押すとep09NoOp(assembled)の行が実行されますが、その値はConsoleにもDOMにも一切表示されません。デバッガーで一時停止して確認するしかありません。
チャレンジの手順
① F12 → Sourcesタブを開く → ② ページ内のインラインスクリプトを開き、ep09NoOp(assembled)の行を探す → ③ 行番号をクリックしてブレークポイントを設置 → ④ 下の「トークン生成を実行」ボタンを押す（実行が一時停止します） → ⑤ Resume（F8）を数回押してループを最後まで進める → ⑥ Scopeパネルでassembledの最終値を確認！
Scopeパネルで確認したassembledの最終値（完成したトークン）を入力してください。
F12 → Sourcesタブ → 左のファイルツリーから現在表示中のHTML（インラインスクリプト）を選び、コード内のep09NoOp(assembled);という行を探してください。Ctrl+Fでファイル内検索もできます。
行番号をクリックしてブレークポイントを設置したら、ページの「トークン生成を実行」ボタンを押してください。一時停止したら、右パネルの「Scope」→「Local」を開き、assembledの値をループの最後（5回目）まで確認しましょう。Resume（再生ボタン）かF8キーで次の停止位置に進めます。
📝 まとめ＋FAQ＋次回予告
今回のポイントを振り返ろう
第9話では、JavaScriptデバッガーを使ってプログラムの実行を一時停止し、画面には表示されない変数の値をScopeパネルから直接確認する方法を学びました。第8話の「静的にソースを読む」力と組み合わせることで、どんなに複雑なクライアントサイドの処理も解読できるようになります。
・デバッガーは実行中のプログラムを一時停止し、内部状態を覗く唯一の方法
・Sourcesタブで行番号をクリックするとブレークポイントを設置できる
・一時停止中はScope（変数）・Watch（監視式）・Call Stack（呼び出し履歴）が見られる
・Resume(F8)・Step over(F10)・Step into(F11)でステップ実行できる
・条件付きブレークポイントでループの特定回だけ止めることも可能
Q. ブレークポイントを置いたのに止まりません。なぜですか？
対象の関数がまだ呼ばれていない可能性があります。今回のチャレンジでは「トークン生成を実行」ボタンを押すまで関数は実行されません。また、ページをリロードするとブレークポイントは残りますが、別のHTMLファイルに移動すると消えることがあるので再設置が必要です。
Q. Step overとStep intoの違いがよくわかりません。
現在の行が関数呼び出しを含む場合、Step over (F10)はその関数を実行しつつも内部には入らず次の行へ進みます。Step into (F11)は呼び出された関数の内部の最初の行まで踏み込みます。「この関数の中で何が起きているか知りたい」ときはStep intoを使いましょう。
Q. minifiedされたコードでもデバッグできますか？
できます。第8話で紹介した{}（Pretty-print）ボタンで整形してからブレークポイントを置けば、変数名は短く分かりにくいままですが、値の確認は問題なく行えます。ソースマップが提供されていれば、元の変数名のまま確認することも可能です。
Q. 本物のWebサービスでデバッガーを使うのは違法ですか？
自分のブラウザ上でページの動作を確認する行為自体は違法ではありません。しかし、デバッガーで見つけた情報を使って認可されていないシステムへ侵入したり、データを不正に取得・改ざんしたりする行為は不正アクセス禁止法等に違反します。学んだ技術は許可された環境（CTF・自分のサイト・バグバウンティ対象）でのみ使いましょう。
Base64・文字コードを解読する
これまでのブラウザツール編から一歩進み、エンコードされた文字列を見破る「暗号編」の入り口へ。Base64・URLエンコード・文字コードの基本を体験します。
📚 参考情報
- Chrome DevTools — JavaScript デバッグ 公式ドキュメント（Google）
- MDN Web Docs「Firefox JavaScript デバッガー」（Mozilla）
- OWASP「Testing for Client-side Code」
コメント