【連載】CPIエバンジェリストのお悩み相談室③
JavaScriptのデバッグに欠かせないConsole APIについて
©StockUnlimited
引き続き「JavaScriptのデバッグに欠かせないConsole APIについて」の解説です。ここからは後編となります。
→ 前編はこちら
●console.dir();
［console.dir(); ］はオブジェクトのプロパティやメソッド、配列などを階層表示で確認できます。
→ 前編はこちら
●console.dir();
［console.dir(); ］はオブジェクトのプロパティやメソッド、配列などを階層表示で確認できます。
＜script＞
// オブジェクトの定義
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);
＜/script＞
// オブジェクトの定義
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);
＜/script＞
実行結果：
●console.count();
［console.count(); ］は、ループや関数内で指定されているラベルが何回呼び出されかカウントします。
●console.count();
［console.count(); ］は、ループや関数内で指定されているラベルが何回呼び出されかカウントします。
console.count([ラベル]);
＜script＞
// 配列を指定
Things = new Array('りんご','ごりら','らっぱ');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
console.count('ラベル1');
}
console.count('ラベル2');
console.count(); //ラベルなし
＜/script＞
＜script＞
// 配列を指定
Things = new Array('りんご','ごりら','らっぱ');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
console.count('ラベル1');
}
console.count('ラベル2');
console.count(); //ラベルなし
＜/script＞
実行結果：
●ログのグループ化
大量のログを出力する際に、ログをグループ化し、ラベルを付与することができます。
・console.group() : 以降の出力を別のレベルにインデントする（開いた状態で出力）
・console.groupCollapsed() : 以降の出力を別のレベルにインデントする（閉じた状態で出力）
・console.groupEnd() : グループの終了
●ログのグループ化
大量のログを出力する際に、ログをグループ化し、ラベルを付与することができます。
・console.group() : 以降の出力を別のレベルにインデントする（開いた状態で出力）
・console.groupCollapsed() : 以降の出力を別のレベルにインデントする（閉じた状態で出力）
・console.groupEnd() : グループの終了
＜scrip＞
// 配列を指定 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();
＜/script＞
// 配列を指定 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();
＜/script＞
実行結果：
●処理時間を計測
JavaScriptの処理時間を計測し、コンソール画面に出力します。動作が重いと感じたときは計測を行ってみてください。
console.time([timerName]) タイマースタート
console.timeEnd([timerName]) タイマーストップ
●処理時間を計測
JavaScriptの処理時間を計測し、コンソール画面に出力します。動作が重いと感じたときは計測を行ってみてください。
console.time([timerName]) タイマースタート
console.timeEnd([timerName]) タイマーストップ
console.time('Test1');
console.time('Test2');
Things = new Array('りんご','ごりら','らっぱ');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
//
}
console.timeEnd('Test1');
console.timeEnd('Test2');
console.time('Test2');
Things = new Array('りんご','ごりら','らっぱ');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
//
}
console.timeEnd('Test1');
console.timeEnd('Test2');
実行結果：
●スタックトレース
［console.trace() ］は、スタックトレースをコンソール画面に出力します。スタックトレースとは、プログラムの実行過程を記録したものです。説明だけだと分かり難いので例を見てみましょう。
下記コード例は、最初のif文で変数「hoge」がundefinedの場合、check_data関数でデータをチェック。その後、エラー判定されたら、error_log() 関数でエラーを記録するというプログラム例です。
●スタックトレース
［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);
}
if(!hoge){
// hogeがundefinedの場合の処理
check_data();
}
function check_data(){
// チェックをして、エラーだった場合
error_log('err-00001');
}
function error_log(err) {
// エラー処理
console.trace(err);
}
上記例で、何かしらの処理でエラーが発生した場合にコンソールにエラー内容が出ますが、どこの処理を通ってerror_log関数に到達したか知りたいときもあります。そのような場合に「console.trace()」を設置すると、処理の流れをみることができます。
実行結果：
さらにコンソール画面の「ファイル名:行数」をクリックすると、該当の処理を確認することもできます。
以上、よく使うconsole.XXX() でした。
●エラーについて
JavaScriptを使いプログラムを書いていると様々なエラーがコンソール画面に出力されると思います。最後に紹介するのは、JavaScriptのエラー例です。またJavaScript開発時に「"use strict";」をコードの文頭に付けておくと、より厳密にエラーが出力されます。例えば、変数の指定には「var」を使いますが、use strictを指定していないとエラーになりません。
実行結果：
さらにコンソール画面の「ファイル名:行数」をクリックすると、該当の処理を確認することもできます。
以上、よく使うconsole.XXX() でした。
●エラーについて
JavaScriptを使いプログラムを書いていると様々なエラーがコンソール画面に出力されると思います。最後に紹介するのは、JavaScriptのエラー例です。またJavaScript開発時に「"use strict";」をコードの文頭に付けておくと、より厳密にエラーが出力されます。例えば、変数の指定には「var」を使いますが、use strictを指定していないとエラーになりません。
＜script＞
// エラーにならない
hoge = 123;
＜/script＞
＜script＞
// strictモードにするとエラーになる
"use strict";
hoge = 123;
＜/script＞
// エラーにならない
hoge = 123;
＜/script＞
＜script＞
// strictモードにするとエラーになる
"use strict";
hoge = 123;
＜/script＞
実行結果：
「Uncaught ReferenceError: XXXX is not defined」
このエラーは、「index.html」の18行目（目安の行数）に「hoge」が見つからなかったという内容です。
「Uncaught ReferenceError: XXXX is not defined」
このエラーは、「index.html」の18行目（目安の行数）に「hoge」が見つからなかったという内容です。
＜script＞
var hoge = document.getElementById('title');
＜/script＞
var hoge = document.getElementById('title');
＜/script＞
実行結果：
「Uncaught TypeError: XXXX is not a function」
XXXX is not a functionとエラーが出力されており、指定した関数が無いというエラーです。関数名が正しいか確認してください。
「Uncaught TypeError: XXXX is not a function」
XXXX is not a functionとエラーが出力されており、指定した関数が無いというエラーです。関数名が正しいか確認してください。
＜script＞
var hoge;
if(hoge){
＜/script＞
var hoge;
if(hoge){
＜/script＞
実行結果：
「Uncaught SyntaxError: Unexpected end of input」
if文やループ、関数などの閉じ } が無いときになどに現れます。
他にも様々なエラーがありますが、基本は出てきたメッセージからエラー内容を推測するか、Googleでエラーコードそのものを検索することで解決策を見つけることができます。また、エラー箇所の行数が出ていますが、これはエラーに起因しているソースコードが書かれている行数の目安です。18行目と出ていても必ず18行目に書かれているとは限らないので注意してください。
今回は、JavaScriptデバッグ時におけるconsole.XXXの種類と、エラーコードの紹介でした。最後に当記事の筆者が運営しているCPIスタッフブログにConsole APIのサンプルを置いてありますので、そちらも宜しくお願いします。
「Uncaught SyntaxError: Unexpected end of input」
if文やループ、関数などの閉じ } が無いときになどに現れます。
他にも様々なエラーがありますが、基本は出てきたメッセージからエラー内容を推測するか、Googleでエラーコードそのものを検索することで解決策を見つけることができます。また、エラー箇所の行数が出ていますが、これはエラーに起因しているソースコードが書かれている行数の目安です。18行目と出ていても必ず18行目に書かれているとは限らないので注意してください。
今回は、JavaScriptデバッグ時におけるconsole.XXXの種類と、エラーコードの紹介でした。最後に当記事の筆者が運営しているCPIスタッフブログにConsole APIのサンプルを置いてありますので、そちらも宜しくお願いします。
［筆者プロフィール］
阿部 正幸（あべ まさゆき） | KDDIウェブコミュニケーションズ／エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal（g.d.o Japan）日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。
●PHPカンファレンス2016@東京で使用したスライド
「未来のwebに欠かせないREST APIをApache Solr + Drupalで実装しよう」
URL:http://www.slideshare.net/MasayukiAbe1/webrest-apiapache-solr-drupal8php2016-68358246
●CPIスタッフブログ
「RESTful webサービスを構築しよう」
URL:http://shared-blog.kddi-web.com/webinfo/205
