uhyohyo.net

JavaScript初級者から中級者になろう

十一章第三回 console

次に紹介するのがconsoleです。これは、デバッグ時に大いに役立つものです。

consoleと言われたら、二章第一回に紹介して以来ずっと使ってきたconsole.logを思い浮かべますね。

実はconsole.logの他にも似たような便利メソッドがあるので、今回はそれを紹介します。

console.logというのも、実はconsoleオブジェクトが持つlogというメソッドであることがわかります。consoleというのはもともとある変数名で、いくつかのメソッドを持ったオブジェクトです。

console.info, console.warn, console.error

実は、やはりconsoleで一番使うのはconsole.logで、それ以外のメソッドは使用頻度が結構劣ります。所詮デバッグ用ですから、console.logだけで事足りる場合が多いのです。しかし、ある以上は紹介しておきましょう。まず紹介するのは3つのメソッドです。

info,warn,errorとありますが、「表示する」という基本機能は同じですので、引数も同じです。それでは違いは、logはただ表示するだけでしたが、infoは「情報」っぽくwarnは「警告」っぽくerrorは「エラー」っぽく表示します。それだけです。

ブラウザによって結構微妙なところですが、例えばChromeだとちゃんとアイコンを変えて表示してくれたりします。

console.debug, console.dir,console.dirxml

これも引数はlogなどと同じで、debugは「ログが発生したソースコードの地点へジャンプしやすいようになっている」そうです。ただ、これもまたChromeの場合ですが(Chromeが一番コンソールが便利なように感じるので)、ただのlogでも同じように簡単にジャンプできるので、Chromeの場合は違いはありませんでした。まあどれもそんなものでしょう。

console.dirは、「オブジェクトの場合にそのプロパティ一覧を表示する」というようになっていますが、大抵のブラウザのコンソールは、オブジェクトをコンソールに表示すると自動的にそのプロパティ一覧は見られるようになりますので、あまり意味はありません。

dirxmlはXMLオブジェクトを表示しているのに特化しているらしいですが、よくわかりません。

console.assert

これは引数がちょっと違います。第一引数に条件、第二引数以降が今まで同様の表示するものです。

これは、いわゆるテストというものです。第一引数の条件というのを判定して、trueならOK、falseならダメです。OKならそのまま何も起こりません(コンソールにも表示されません)が、falseならテストクリアならずということで、第二引数以降の内容を表示しつつエラーを発生させて停止します九章第八回で紹介したthrowと同じ感じです)。

たまに活躍する場面があるかもしれません。

console.trace

これは引数なしで、コンソールに現時点でのコールスタックを表示します。詳しいデバッグができるかもしれません。

console.group, console.groupCollapsed, console.groupEnd

console.groupは、コンソールに表示されるログをグループ化します。console.group自体にも引数を指定して表示されることができます。

console.groupが呼び出された後に続くログは、そのconsole.groupのログを親としてまとめられ(グループ化)、まとめて折りたたんだりできるようになります。

このグループ化は、console.groupEnd(引数なし)が呼び出されるまで続きます。例えば、こんな感じのを実行してみると、複数のログをまとめてたたんだりできるのが確認できます。

console.group("group start");
console.log(1);
console.log(2);
console.log(3);
console.groupEnd();
          

実際にやってみると、なんとなく動作が分かると思います。

ちなみに、groupCollapsedというのはgroupと同じですが、最初からそのグループが閉じてまとまった状態で表示されます。

これらをうまく使うと、大量のデバッグログをうまくまとめられるかもしれません(しかし自分は使ったことはありません)。

console.profile, console.profileEnd

これはまた面白いメソッドですが、コンソールに表示するという他のメソッドとはちょっと違います。

おおまかに言うと、profileが呼ばれてからprofileEndが呼ばれるまでの、実行時間などのデータを取得できます。

例えば処理にやけに時間がかかるときなど、その部分全体をconsole.profile()〜console.profileEnd()で囲むと、その処理内での関数ごとの実行時間などがくわしく把握できるので、デバッグに役立つかもしれません。

ちなみにprofileには引数を指定することができ、あとで結果を表示するときにそのタイトルとなります。複数profile〜profileEndがあるときに区別できます。

console.time, console.timeEnd

もう一つ時間が関係するのが、console.time〜console.timeEndです。

これは要するにタイマーで、timeが呼ばれてからtimeEndが呼ばれるまでの時間を測定します。

注意すべきことは、timeは引数にタイマーの名前を指定して呼び出し、timeEndも同じ引数で呼び出すということです。

たとえば時間がかかる処理の前後にtimeとtimeEndを置いて時間を測定したりなどできます。測定結果は、timeEndのときにコンソールに出力されます。

console.count

次はcountです。これはカウンタで、console.countが呼ばれるたびに数字を1増やして出力します。ある処理の回数を数えるのに使えるかもしれません。

これもtime同様に第一引数にカウンタの名前を指定できます。異なる名前で呼び出されたカウンタは異なる系列となり、また1からになります。再度もとと同じ名前で呼び出すと、もとのやつのカウントが継続されます。