移動: トップ > ラボ > ソフトのアイディア > デバッグで変数をグラフ表示
履歴:
統計:
目次:
このページの最終更新日: 2010/04/26
提案日: 2008/09/17

※本記事ではソフトに関するアイディアを紹介しています。これらは特に記載がない限り、まだ実現されていないものです。これらのアイディアをぜひ実現していただける方をお待ちしております。

デバッグで変数をグラフ表示

概要

これまでのIDEには気軽に変数の値をグラフに表示する機能がありませんでした。そこで、プログラムをデバッグするとき、処理の中で変化する変数の動きを見るために、IDEのウォッチ機能を拡張して、変数の値を表やグラフの形で表示できるようにする、といったアイディアです。

変数を表やグラフによって可視化することで、バグを早く発見できるようになります。これまでグラフの可視化力に気づいていなかった開発者も、ここでのアイディアを使うことで簡単にグラフ化できるようになり、その力に気づくようになると思います。

背景

処理の中で変化する変数を見るために

プログラムを開発する中でデバッグするときに、実行をブレークポイントで止めて、その瞬間の変数の中身を調べることがよくあります。Visual StudioやEclipseなどのIDEを使えば、ウォッチ機能を利用して、簡単に変数の中身を見られます。

しかし、繰り返し処理をするプログラムをデバッグするときには、ある瞬間の変数の値を見るだけでは足りません。処理の中で変数の値は常に変化していくので、その変化の様子を見る必要があります。正常に動作しているかをチェックするだけなら、瞬間の値を見るだけで十分ですが、コードの動作を見たりバグの原因を見つけようとすると、ブレークポイントで止めてから瞬間値を見る操作を繰り返すだけでは、開発者の労力が大きく非効率です。この方法で変数が変化する様子を見るには、開発者がそれぞれの瞬間値を頭の中に入れて値の変化を思い浮かべる必要があります。

そこで、処理の中で変化する変数の動きを見るために、ウォッチ機能を拡張して、変数の値を表やグラフの形で表示できるようにする、といったアイディアに至りました。ウォッチ機能と同じように、コード中の変数をウォッチに追加しておくと、実行時にその変数を表やグラフで表示します。

繰り返し処理のプログラム

どんなもの?

デバッグ中に変数を表やグラフで表示

プログラムをデバッグするとき、処理の中で変化する変数の動きを見るために、現在IDEにあるウォッチ機能を拡張して、変数の値を表やグラフの形で表示できるようにする、といったアイディアです。ウォッチ機能と同じように、コード中の変数をウォッチに追加しておくと、実行時にその変数を表やグラフで表示できる、といったイメージです。

例えば、下図のようなfor文を使ってループさせる単純なコードがあります。この中の変数「i」はfor文の中で変化します。そこで、この変数「i」の動きを表やグラフで表示してみます。

for文を使ってループさせる単純なコード

変数を表やグラフで表示するには、まず下図のようにウォッチポイントを作成します。ウォッチポイントはここでのアイディアのためにIDEに導入する新しい機能で、これを使ってコード中のどのポイントでどの変数の値を保存するかを指定します。下図の例では、プログラムが23行目と25行目に来たとき、変数「i」の値を順次保存していきます。

ウォッチポイントを作成

上図のプログラムを実行すると、まず21行目で変数「i」が定義されてfor文に入ります。22行目で変数「i」はゼロに初期化されて、23行目に来ると、ウォッチポイントで変数「i」の値0が保存されます。for文でループして22行目で変数「i」は3になり、再度23行目に来るので、ウォッチポイントで変数「i」の値3が保存されます。for文でこれを繰り返し、引き続きウォッチポイントで6、9が保存されます。変数「i」が12になるとfor文から抜けて、25行目に来ると、2つ目のウォッチポイントで変数「i」の値12が保存されます。そして、26行目でブレークポイントによりプログラムが一時停止します。

プログラムが一時停止したところで、ウォッチウィンドウを見ると下図のようになっています。1列目のウォッチ式は、変数名の前に表のアイコンが付いていて、ウォッチポイントで保存した変数「i」のすべての値が蓄積されています。一方、2列目は通常のウォッチ式で、今の変数「i」の値を表示しています。

ウォッチウィンドウ

1列目のウォッチ式で値12の横にある画面のアイコンをクリックすると、下図のように蓄積された値を表やグラフで表示できます。

蓄積された値を表で表示
蓄積された値をグラフで表示 [拡大]

このような手順でウォッチポイントを使ってコード中の変数を表やグラフで表示します。現在のウォッチ機能ではブレークポイントで止めたその瞬間の変数の中身しか調べられませんが、ここでのアイディアでは変数の値を保存して、変化していく変数の動きを表やグラフで表示します。

より高度な表やグラフ

コード中の複数の変数をウォッチポイントによって蓄積すれば、より高度な表やグラフも実現可能です。例えば、次に挙げるような表やグラフも作成可能です。

  • いくつもの変数をウォッチポイントによって蓄積しておき、それらを列ごとにまとめた複数列の表を作成する
  • 2つの変数をウォッチポイントによって蓄積しておき、2つの変数をX、Y軸にとった軌跡を表すグラフを作成する
  • 配列型の変数をウォッチポイントによって蓄積しておき、配列内容の変化の様子を色のグラデーションで表す2D分布グラフを作成する

複数列の表/軌跡のグラフ/3Dグラフ

Add-OnでIDEに機能を追加

変数の動きを表やグラフで表示する機能は、Visual StudioやEclipseなどのIDEにAdd-OnPlug-Inを使って機能を埋め込むことで実現します。Add-OnでIDEの機能を拡張する必要がある部分は主に次の3つです。

  • ウォッチポイントをコードの中に設定できるように拡張する
  • ウォッチウィンドウに蓄積した値を表す式を追加する
  • 蓄積した値を表やグラフで表示するウィンドウを追加する

これら3つの拡張をAdd-Onで実装することで、IDEを使って変数の動きを表やグラフで表示できるようにします。

グラフで変数を可視化してバグを早く見つける

これまでは気軽にグラフを表示する機能がIDEになかったので、デバッグ中に変数の動きをグラフで確認することはあまりなかったと思います。ウォッチ機能で値を見てプログラムを少し進めて、といった操作を繰り返して、変数の変化を頭の中で思い浮かべたり、コンソールに順に値を書き出して簡単な表の代わりとして表示したり、といった程度だったと思います。

しかし、ここでのアイディアを使うことで気軽に変数の値をグラフで見られるようになり、簡単に変数を可視化できるようになります。グラフで見ればその形を見るだけでバグの有無が一目瞭然になります。また、変数の変化をより広い範囲で網羅的に見られるので、バグの有無を漏れなく確認することができます。

このように変数を可視化することで、バグを早く発見できるようになります。グラフにするだけで、バグの原因やアルゴリズムの動作など、見違えるほど見通しがよくなります。これまでグラフの可視化力に気づいていなかった開発者も、ここでのアイディアを使うことで簡単にグラフ化できるようになり、その力に気づくようになると思います。

デバッグのウォッチ機能を拡張、値の瞬間値しか見られない現状から、値の変化の様子を表やグラフで表示。制御ループなど何回もイベントが来るものに便利。IDEにAdd-Onで機能組み込み。
■どんなもの→具体的な使い方イメージ→機能の実現方法

これまでプログラマはあまり変数をグラフで可視化までしない(ウォッチで見て変数の変化を頭の中で思い浮かべる)→気軽にグラフで見れる→グラフで見ればその形からバグが一目瞭然バグを早く発見できる/抜け目なく発見できる→可視化の最大の利点

世の中の似た機能

Visual Studio 2010から新しくIntelliTraceという機能が追加されます。IntelliTraceは特定のイベントが発生したときに変数の値や呼び出し履歴などを保存していく機能です。このようにデバッグの状態を保存することで開発者間のコミュニケーションが円滑になったり、過去の状態を保存することで過去にさかのぼってデバッグできるようになります。

IntelliTraceは変数の値を保存できますが、本記事のアイディアのように変数の動きを表やグラフで表示することはできません。IntelliTraceはさまざまなデバッグ情報を保存するといったスタンスで、変数の動きを可視化する考え方は持っていません。

IntelliTrace in VS2010と傾向は同じ

 

更新履歴
2010/01/25
  • 書き始め
2009/02/25 v1
  • 初版作成

※ご意見、ご感想、改善点、その他の情報などがありましたら、メールにてお知らせ願います。

Copyright (C) 2002 - 2019 Simon.P.G. All Rights Reserved. Top | Simon.P.G. とは | 使用条件 | ご意見
inserted by FC2 system