苦学楽学塾

　苦学楽学塾　ホームページ

最終更新日：2025年1月5日

　consoleオブジェクトは、JavaScriptのプログラムのデバグを行う時に使うオブジェクトです。Google Chromeの場合、HTMLを実行させて表示中に、[F12]キーを押して、開発ツールを起動させると、[要素]　[コンソール]　[ソース]　[ネットワーク]　[パフォーマンス]　[メモリ]　[アプリケーション]　[セキュリティ]と書かれたメニューが出てきますが、この中の[コンソール]をクリックすると、コンソール画面が出てきます。consoleオブジェクトのメソッドには以下のようなものがあります。consoleオブジェクトのテスト・プログラムはこちら。

　コンソール画面をクリアします。

　コンソール画面に、引数のタイプに即した内容を表示します。文字列であれば、文字列を表示します。配列ar1であれば、

var ar1 = ['abc', 'def', 'ghij'];

とすると、配列の要素数と内容を、コンソール画面に、

(3) ['abc', 'def', 'ghij']

のように表示します。オブジェクトの配列ar2であれば、

var obj1 = { 'name' : 'abc', 'value' : 12, 'color' : 'black' };

var obj2 = { 'name' : 'defg', 'value' : 302, 'color' : 'yellow' };

var obj3 = { 'name' : 'hijkl', 'value' : 7, 'color' : 'cyan' };

とすると、まずは、コンソール画面に、

▶ (3) [{…}, {…}, {…}]

と表示されますが、'▶'のところをクリックすると、'▶'が'▼'に変わって、

▶ 0：{name: 'abc', value: 12, color: 'black'}

▶ 1：{name: 'defg', value: 302, color: 'yellow'}

▶ 2：{name: 'hijkl', value: 7, color: 'cyan'}

と表示されます。このようにして、配列名をconsole.logメソッドの引数とするだけで、配列の内容を確認できます。

　console.logでは、書式制御が可能です。%sは文字列、%dは整数、%fは浮動小数点実数、%Oはオブジェクト、その他に%cとするとCSSの文字列による表示制御を行うことができます(文字表示ではないので注意してください)。color，font，background-colorの指定などが行えます。

st1 = "color:blue;background-color:lightgreen";

consoloe.log("%c項目数：%d，円周率：%f", st1, count1, f1);

とすると薄緑色の背景色、青色の文字で、項目数：7, 円周率：3.1415926583とコンソール画面に表示されます。

　呼ばれた関数がどのような関数から呼ばれているかをリスト表示します(スタック・トレースと言います)。以下のようにfunc1()の中でfunc2()を呼び出し、func2()の中でconsole.trace()とすると、

画面に、呼び出している関数と、HTMLファイルの何行目で呼び出しているかを表示します。

　func2　　　@ jtest15.html:29

　func1　　　@ jtest15.html:26

　(匿名)　　　@ jtest15.html:24

のように表示されます。最上位の関数には名前がないので、(匿名)となります。

console.time()，console.timeEnd()，console.timeLog()

　時間計測に使うメソッドです。タイマーに名前を付けて、タイマー名を引数に入れて使います。console.time()でタイマーを起動し、console.timeLog()でタイマーの途中経過値をミリ秒単位で表示し、console.timeEnd()でタイマーを止めるとともに、最終的な値をミリ秒単位で表示します。

console.time("timer1");

console.timeLog("timer1");

console.timeEnd("timer1");

とすると、画面に、timeLogメソッドの値と、timeEndメソッドの値が、

timer1: 0.303955078125 ms

timer1: 0.3330078125 ms

のように表示されます。