条件付きブレークポイントを使ってみた。

はじめに

普段、JavascriptのデバックでChrome Developer Toolsを使用しているのですが、ブレークポイントの設定で条件を設定できるとのことで、実際に使ってみました。

Chrome Developer Toolsとは

Chrome Developer ToolsとはGoogle Chromeに標準で搭載されている開発者用の検証ツールです。Webサイトのパフォーマンスをあげるための機能が多く含まれています。右クリックを押して検証をクリックするか、Command + Option + Iを押すことで開くことができます。

ブレークポイントとは

プログラムを実行する時に、処理を一旦停止する場所のことです。実行中のプログラムを意図した動作になっているか確認をする時に使われる。不具合の原因を調べる時によく使います。

サンプルコード

今回は使い方の説明をメインで行うので、コードはすごく簡単なものを使用します。

let a = 0;
for (let i = 0; i < 10; i++) {
    a += i;
}

使い方

まずは、Chromeのデベロッパーツールで該当のソースコードのファイルを開きます。

次にブレークポイントを設定するところで右クリックを押すとサブメニューが表示されます。

サブメニューのConditional breakpointを選択します。すると以下の画面が表示されます。

条件を入力します。今回はi = 6の時だけ止まるようにします。

入力し終わったらEnterを押します。するとブレークポイントを設定したコードの行がオレンジ色になります。

実際にデバックをするとi = 6の時で処理がとまります。

おわりに

今回は簡単な例を紹介しました。for文などで自分が見たい条件の時だけ確認できるのはありがたいですね。
最後まで読んでいただきありがとうございました。