0Pricing
JavaScript Academy · レッスン

ブレークポイントを設定する

実行を一時停止して状態を確認します。

「ブレークポイントを設定する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

ブレークポイントとは

ブレークポイントは、特定の行で実行を一時停止するようデバッガーに指示します。一時停止中は、変数やコールスタックを調べてプログラムの状態を理解できます。

ブレークポイントがログに勝る理由

ログ文をあちこちに追加する方法と比べて、ブレークポイントならコードを変更せずに、ある時点でスコープ内にあるすべての変数を調べられます。そこから実行を再開したり、ステップ実行したりすることもできます。

Sources パネルを開く

ブラウザーの DevTools では、ブレークポイントは Sources パネルにあります。DevTools を開いて Sources に切り替え、ファイルツリーからスクリプトファイルを見つけます。

行ブレークポイントを設定する

文の横にある行番号の欄をクリックすると、その場所にブレークポイントを設定できます。マーカーが表示され、その行が実行される直前に実行が一時停止します。

debugger 文

コードに debugger 文を追加すると、DevTools が開いているときにプログラムからブレークポイントを発生させられます。本番コードをリリースする前に削除してください。

function compute(x) {
  const doubled = x * 2
  // a debugger statement on the next line would pause execution here
  return doubled + 1
}

条件付きブレークポイント

行を右クリックすると、条件を追加できます。式が true の場合にだけデバッガーが一時停止するため、ループ内で特に役立ちます。

ログポイント

ログポイントは一時停止せずにメッセージを出力します。ソースコードを編集する代わりに DevTools から一時的なログ文を追加するような機能です。

変数を調べる

一時停止中は、Scope ペインにローカル変数、クロージャ変数、グローバル変数とその現在の値が一覧表示されるため、前提が正しいか確認できます。

ウォッチ式

Watch ペインでは、定義した式が一時停止するたびに評価されます。そのため、コードをステップ実行しながら計算結果を監視できます。

イベントにブレークポイントを設定する

DevTools では、クリックやネットワークリクエストなどのイベントが発生した瞬間に実行を一時停止することもできます。

ブレークポイントを管理する

Breakpoints ペインには、設定したすべてのブレークポイントが一覧表示されます。チェックボックスで一時的に無効にしたり、デバッグが終わったら削除したりできます。

確認問題

ブレークポイントに関する知識を確認しましょう。

まとめ

まとめ: ブレークポイントは、調査のために実行を一時停止します。

  • Sources パネルの行番号欄で設定します
  • debugger 文を使うとプログラムから一時停止できます
  • 条件付きブレークポイントは、条件が true の場合にだけ一時停止します
  • 一時停止中にスコープとウォッチ式を調べられます

よくある質問

「ブレークポイントを設定する」レッスンは無料ですか？

はい。「ブレークポイントを設定する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「ブレークポイントを設定する」で何を学びますか？

実行を一時停止して状態を確認します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「ブレークポイントを設定する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. console.log の先へ
  2. ブレークポイントを設定する
  3. コードをステップ実行する
  4. スタックトレースを読む
← JavaScript Academyに戻る