Chromeの場合
JavaScript でプログラミングをしていく際に、画面には表示させたくないけど、プログラムの中で、どういった情報を取り扱っているのか確認したいケースが出てきます。こういった場合に Console （コンソール）に表示させるというのは有効な手段のようです。
alert を使ってダイアログに情報を表示させる方法もありますが、これだとプログラムが動くたびにダイアログが表示されてしまうため、確認後にコードを消す必要がありますが、処理の内容、重さにもよりますが、Console を使うとそのままにしておくことも可能です。
Console API でよく使用される機能は、テキストやその他のデータをコンソール画面に表示させることだと思います。
<script>
console.error('エラーを表示する');
console.warn('警告を表示する');
console.log('ログを表示する');
console.debug('デバッグを表示する');
console.info('Info を表示する');
</script>
Chromeの場合
Firefoxの場合
それぞれの機能の表示方法は、ブラウザによって多少見え方が違います。
上記の例のように、入力した文字列だけではなく、変数の中身を確認することもできます。
<script>
var car = "Bugatti Chiron";
console.log(car);
</script>
また、オブジェクトを羅列することで、複数のオブジェクトを出力することもできます。
var car = "Bugatti Chiron";
var speed = 490;
console.log("My favorite car is the", car, ". The fastest record:", speed, "km/h");
変数には様々な値を代入することができ、その１つにブール値（ Boolean ）を入れることもできます。
Console Assert は、ブール値（ Boolean ）を確認し、false の場合、コンソール画面に出力します。
<script>
var boolean = false;
var boolean1 = true;
console.assert(boolean, " false なので出力します");
console.assert(boolean1, " true なので出力されません");
</script>
また、下記のように整数を使って判定することもできます。
<script>
var boolean = 0;
var boolean1 = 1;
console.assert(boolean, " 0 なので出力します");
console.assert(boolean1, " 1 なので出力されません");
</script>
「 console.clear(); 」は、コンソール画面をクリアします。
例えば、上記のここまでに説明した分をすべてコンソール画面に表示すると
こんな感じになりますが、スクリプトの最後に console.clear(); を記述すると、すべてクリアされ、「 Console was cleared （コンソールをクリアしました）」とだけ表示されます。
Sample source
<script>
console.log( 'これは、Console （コンソール）にだけ表示されます' );
：
：
：
console.assert(boolean1, " 1 なので出力されません");
console.clear();
</script>
ループや関数内で、指定されているラベルが何回呼び出されかカウントします。
<script>
// 配列を指定
Things = new Array('りんご', 'ごりら', 'らっぱ');
// 配列の個数分ループ
for (var i = Things.length -1; i >= 0; i--) {
console.count('ラベル１');
}
console.count('ラベル２');
console.count(''); // ラベルなし
</script>
この例では、
呼び出されていることが確認できます。
配列や、オブジェクトを表形式に出力します。
var member = new Object();
member[0] = ({
'Name':'Shimizu Mayumi',
'age':23,
});
member[1] = ({
'Name':'Inoue Erika',
'age':27,
});
member[2] = ({
'Name':'Takane Atsuko',
'age':25,
});
console.table(member);
オブジェクトのプロパティやメソッド、配列などを階層表示で確認できます。
// オブジェクトの定義
var fruits_color = new Object();
fruits_color = {
red:"いちご",
yellow:"バナナ",
pink:"もも",
extra:'',
change_fruits:function(fruits_name){
this.red = fruits_name;
}
}
fruits_color.extra = {
purple:"ぶどう"
}
console.dir(fruits_color);
// その他にもブラウザそのものである、
// windowオブジェクトを表示することもできる
console.dir(window);
DOM エレメントをツリー構造で表示します。
HTML source
<h1 id="test">
<a href="index.html"><span>Console API</span></a>
</h1>
JavaScript source
document.addEventListener("DOMContentLoaded", function() {
var title_content = document.getElementById('test');
console.dirxml(title_content);
});
head 要素内に JavaScript を書くケースが多いので、HTML 文書の読み込みが終わってから処理を実行するために上記のような書き方をしています。
コンソール画面に表示させるための記述は、
JavaScript source
var title_content = document.getElementById('test');
console.dirxml(title_content);
だけと、なります。
この書き方をする場合は、「 test 」という ID を設定したタグよりも後ろに記述しないと、「[ test ]という ID がない。」と判断されて、結果が「 null 」になってしまいます。
正しく結果が表示された場合
記述が正しくなかった場合
console.trace() は、スタックトレースをコンソール画面に出力します。
スタックトレースとは、プログラムの実行過程を記録したものです。
説明だけだと分かり難いので例を見てみましょう。
下記コード例は、最初の if 文で変数「 hoge 」が undefined の場合、check_data 関数でデータをチェック。その後、エラー判定されたら、error_log() 関数でエラーを記録するというプログラム例です。
var hoge;
if(!hoge){
// hogeがundefinedの場合の処理
check_data();
}
function check_data(){
// チェックをして、エラーだった場合
error_log('err-00001');
}
function error_log(err) {
// エラー処理
console.trace(err);
}
上記例で、何かしらの処理でエラーが発生した場合にコンソールにエラー内容が出ますが、どこの処理を通って error_log 関数に到達したか知りたいときもあります。
そのような場合に「 console.trace() 」を設置すると、処理の流れをみることができます。
大量のログを出力する際に、ログをグループ化し、ラベルを付与することができます。
// 配列を指定
Things = new Array('りんご','ごりら','らっぱ');
console.group('グループ1');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
console.log(Things[i]);
}
console.groupEnd();
console.groupCollapsed('グループ2');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
console.log(Things[i]);
}
console.groupEnd();
