苦学楽学塾 ホームページ
最終更新日：2025年1月5日
JavaScriptのデバグの方法を考えてみます。手っ取り早いのは、alert()メソッドを用いて変数内容や進行状況を表示させることです。文字列の連結'+'をうまく使って表示させてみることになります。
alert()だと、そこで一度止まってしまい[OK]ボタンを押す必要があるので(それはそれで便利ですが)、どんどん先に進めて進行状況を確認したい場合には、直接、HTML実行画面に表示させてしまうのが便利です。例えば、下記(HTMLコードは、こちら。Google Chromeに表示させて[F12]キーを押し、ソース表示させてください)のようなcomment()関数はいかがでしょうか？その都度、<p>タグを生成して、引数に並ぶ、文字列、数値、オブジェクト、関数をそれぞれに合わせて表示してくれます。下記の例では、オブジェクトのpriceプロパティに着目しながら、その変化を確認していきます。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScriptのテスト</title>
<style type="text/css">
p{color:black;font-size:medium}
</style>
</head>
<body style="background-color:white">
<p>JavaScriptのテストをします。</p>
<script>
// 画面に文字列を表示させる関数
console.clear();
var str1 = "abcdefghij";
var j1 = 5;
var f1 = 3.1415926583;
var a1 = {'name': 'apple', 'price': 150};
var b1 = true;
comment(str1, j1, f1, a1, b1, comment);
comment("(1) ここまで来た", a1.price);
a1.price = 250;
comment("(2) ここまで来た", a1.price);
a1.price *= 2;
comment("(3) ここまで来た", a1.price);
function comment(...ar1) {
var div1 = document.createElement("div");
var p1 = document.createElement("p");
var com1 = "";
for (var arg of ar1) {
var type1 = typeof(arg);
if (com1.length > 0) {
com1 = com1 + ', ';
}
if (type1 == "number") {
com1 = com1 + String(arg);
}
else if (type1 == "boolean") {
if (arg) {
com1 = com1 + "true";
}
else {
com1 = com1+ "false";
}
}
else if (type1 == "object") {
com1 = com1 + 'obj:' + arg.name;
}
else if (type1 == "function") {
com1 = com1 + 'function:' + arg.name;
}
else {
com1 = com1 + arg;
}
}
p1.innerHTML = com1;
div1.appendChild(p1);
document.body.appendChild(div1);
return com1;
}
</script></body></html>
画面には、次のように表示されていきます。
JavaScriptのテストをします。
abcdefghij, 5, 3.1415926583, obj:apple, true, function:comment
(1) ここまで来た, 150
(2) ここまで来た, 250
(3) ここまで来た, 500
ですが、こんなことをするくらいなら、ブラウザの開発ツールの利用がいいかも知れません。JavaScriptには、CやPythonのようなデバガがないので、Google ChromeでHTMLファイルを表示させた状態で[F12]キーを押し、開発ツールを呼び出してデバグを行います。Google Chromeを導入(導入のためには、「Google Chrome」で検索してください)すれば、最初から、JavaScriptのデバガが付属しています。 開発ツールを開くと、ツール上部に
[要素] [コンソール] [ソース] [ネットワーク] [パフォーマンス] [メモリ] [アプリケーション]
と、メニューが現れます。[要素]をクリックすると、表示されているHTMLコードをタグごとに表示します。省略されている部分は、(･･･)となっている部分をクリックすると、詳細表示されます。コードが表示されている部分でマウスを動かすと、対応するHTMLの部分が薄青色でハイライトされます。
メニューの中で[コンソール]をクリックすると、コンソール画面が現れます。JavaScriptのconsole.log()メソッドの結果はこの画面に表示されます。コンソール画面については、コンソール・オブジェクトも参照してください。
メニューの中で[ソース]をクリックし、左側のツリー表示からデバグしたいhtmlファイルをクリックすると、その右にHTMLのソースが表示されます。ここで、JavaScriptプログラムの中で一時停止させたい行番号をクリックすると、青いマークが出てきますが、ブラウザの再表示ボタンをクリックすると、ここで、一旦プログラムを止めることができます(ブレークポイントと言います)。行番号をもう一度クリックすると解除されます。または、JavaScriptのプログラムの途中の止めてみたいところに、debugger文を入れておくと、Google Chromeの開発ツールが起動している状態でHTMLを表示させると、debugger文の位置で途中停止します。
ここで、画面の右の方(とは限らないので、画面上で探してみてください)を見ると、マークが6個並んでいるメニューがあり、マーク上にカーソルを持っていくと、左から、「スクリプトの実行を再開 - F8 - Ctrl+\」，「次の関数呼び出しにステップオーバー - F10 - Ctrl+'」，「次の関数呼び出しにステップイン - F11- Ctrl+;」，「現在の関数からステップアウト - Shift+F11 - Ctrl+Shift+;」，「ステップ - F9」，「ブレークポイントを無効化 - Ctrl+F8」とポップ・アップが出てきます。各マークをクリックするか、[F8]キー，[F10]キー，[F11]キー，[Shift]を押しながら[F11]キー，[F9]キー，[Ctrl]を押しながら[F8]キーを押下すると、それぞれの機能が働きます。
[F8]キーを押すと、ブレークポイントで停止しているプログラムを再開します。[F10]キーを押すと1ステップずつ進むのですが、関数呼び出しのところに来ても関数の中には入らずに、関数呼び出しの次の行に進みます。[F11]キーを押すと、1ステップずつ進みながら、関数呼び出しのところに来ると、その関数の中に入っていきます。[Shift]キーを押しながら[F11]キーを押すと、今いる関数の中から抜けて関数呼び出しの次の行に進みます。[F9]キーを押すと、1ステップずつ、関数の中にもクラス・コンストラクタの中にも、オブジェクトのメソッドの中にも入っていきます。[Ctrl]キーを押しながら[F8]キーを押すと、設定されているブレークポイントが無効化されます。もう一度押すと、ブレークポイントが有効になります。
プログラムが停止しているときに、右側の「監視」と書かれている枠内で、[+]をクリックすると入力枠が開きますが、ここに変数名を入れておくと、1ステップ実行後、あるいは、ブレークポイントで停止後に、その特定の変数の内容を見ることができます。オブジェクトでは、最初"▶"となっているところをクリックすると、"▼"に変わり、オブジェクトの詳細内容をみることができます。
右側の「範囲」と書かれている枠内で、最初"▶"となっているところをクリックすると、"▼"に変わり、ブロック内変数、ローカル変数、スクリプト内変数に分けて変数内容、配列内容を調べることができます。「グローバル」のところでは、必要ないものまでたくさん出てきますが、値が未設定であれば、undefinedだということが分かります。
右側の「コールスタック」のところでは、今実行中の関数、それを呼び出している関数がわかります。最上位の関数は「匿名」と表示されます。他にもHTMLタグの属性変更やイベントに対してブレークポイントをかけることもできます。また、ネットワーク状況やメモリ使用状況、動作時間の計測などもできます。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。