Asial Blog

Recruit! Asialで一緒に働きませんか?

【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18(前編)

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
HTML5
Firebug
Webインスペクター
こんにちは、橋本です。

今回と次回の2回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。

Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、
この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。

まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。



consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。


  • assert

  • count

  • debug

  • dir

  • dirxml

  • error

  • group

  • groupCollapsed

  • groupEnd

  • info

  • log

  • markTimeline

  • profile

  • profileEnd

  • time

  • timeEnd

  • timeStamp

  • trace

  • warn



全部で19個。logを除くと18。思ったよりも数がありますね。

とりあえず、前編である今回はassertメソッドからgroupEndメソッドまでを一つ一つ使い方を見ていきたいと思います。
次回はinfoメソッドからwarnメソッドについて見ていきます。


assertメソッド



console.assert(expression, message-object)

第一引数(expression)がfalseの場合にのみ、第二引数(message-object)の内容を表示します。
例えば以下のような使い方をします。

  1. function hoge(num){
  2.     return num > 0;
  3. }
  4.  
  5. var num = -1;
  6.  
  7. console.assert(hoge(num), 'falseだよー');



上記の例では、hoge関数に0以下の数を渡しているため、結果としてfalseが返ってきています。
そのため、assertメソッドの第二引数で渡したメッセージが表示されています。

メソッドのテストをするとき等に便利なメソッドですね。

countメソッド



console.count([title])

countメソッドを記載した場所を何回通ったかをログに出力するメソッドです。
引数でラベルの文字列を渡して、それぞれの設置箇所にラベル付けをすることもできます。

  1. var arr = ['aaa', 'abc', 'bbc', 'ccd', 'cbc'];
  2.  
  3. arr.forEach(function(item, i, ar) {
  4.     if (item.indexOf('a') !== -1) {
  5.         console.count('aが含まれている');  
  6.     } 
  7. });



上記の例では、文字列にaが含まれる要素の場合のみcountメソッドが呼ばれるようになっています。
countメソッドが呼ばれる度に、設定したラベルと、そこを通過した回数を出力します。

debugメソッド



console.debug([message-object])

console.logメソッドと同様に、引数で渡したmessage-objectをログに表示します。

サンプルは省略します。

dirメソッド



console.dir(object)

引数で渡されたobjectのプロパティを全て出力するメソッドです。

  1. <!DOCTYPE HTML>
  2. <html lang="ja">
  3.     <body>
  4.         <div id="hoge"></div>
  5.         <script>
  6.             var elm = document.getElementById('hoge');
  7.             console.dir(elm);  
  8.         </script>
  9.     </body>
  10. </html>



画像のように引数で渡したオブジェクトのプロパティを全て表示します。
DOMオブジェクトを渡した場合、console.logメソッドではhtmlのツリーが表示されますが、console.dirメソッドではDOMオブジェクトとして解釈してプロパティを表示してくれます。

dirxmlメソッド



console.dirxml(node)

引数で渡されたDOMオブジェクト(HTML, XML)の内容をツリー形式で出力するメソッドです。

  1. <!DOCTYPE HTML>
  2. <html lang="ja">
  3.     <body>
  4.         <ul id="hoge">
  5.            <li>1</li> 
  6.            <li>2</li> 
  7.            <li>3</li> 
  8.            <li>4</li> 
  9.         </ul>
  10.         <script>
  11.             var elm = document.getElementById('hoge');
  12.             console.dirxml(elm);  
  13.         </script>
  14.     </body>
  15. </html>



DOMのプロパティを表示したいときはdirメソッド、ツリーを表示したいときはdirxmlメソッドというふうに使い分けをするといいかもしれません。

errorメソッド



console.error(message-object)

引数で渡されたメッセージをエラーアイコンつきで表示するメソッドです。

  1. var hoge = 'errorだよー';
  2. console.error(hoge);



エラーが発生しているということを強調したいときに便利ですね。

group, groupCollapsed, groupEndメソッド




console.group(message-object)
console.groupCollapsed(message-object)
console.groupEnd()


groupメソッド、groupCollapsedメソッドが呼ばれてからgroupEndメソッドが呼ばれるまでのログの出力内容をグループ化して表示します。
groupメソッドとgroupCollapsedメソッドの引数に渡したmessage-objectは、それぞれのメソッドが呼ばれるときに一度だけ出力されます。
ラベルのような使い方をすると便利です。

ちなみに、groupメソッドとgroupCollapsedメソッドの違いですが、groupメソッドを使うと、グループの内容が開いた状態で表示され、groupCollapsedメソッドを使うとグループの内容が閉じた状態で表示されます。

  1. var i;
  2. console.group('groupメソッド');
  3.  
  4. for (i = 0; i < 10; i++) {
  5.     console.log(i);    
  6. }
  7.  
  8. console.groupEnd();
  9.  
  10. console.groupCollapsed('groupCollapsedメソッド');
  11.  
  12. for (i = 0; i < 10; i++) {
  13.     console.log(i);    
  14. }
  15.  
  16. console.groupEnd();



大量にログが出ることが予想される場合はgroupCollapsed、そうでない場合はgroupメソッドといった使い分けをすると便利です。

さて、今回は前編ということで、consoleオブジェクトのメソッドを9つ紹介しました。
次回は残りの10個のメソッドについて紹介したいと思います。

では。

コメント

  • すぎゃーん

    初めまして。とても参考になりました。ありがとうございます。
    "console.count([title])" の「そこを通過した回数を出力します」という記述ですが、こう書かれていると「コード内のその部分を通過した回数」という誤解をしてしまうように思います。正しくは「同じ引数(ラベル)でその関数が呼ばれた回数」であって、他の場所で同じ引数のものを通過したときもカウントされるわけですよね。
    と、気になりましたのでコメントさせていただきました。
    後半の記事も楽しみにしています。

  • 橋本

    すぎゃーんさん、コメントありがとうございます。
    指摘していただいた点確認したのですが、他の場所で同じ引数のものを通過したときもカウントされるわけではないようです。以下のようなコードで確認したところ、それぞれカウントは2となりました。

    【javascriptコード】
    var arr = ['aaa', 'abc', 'bbc', 'ccd', 'cbc'],
    label = 'aが含まれている';

    arr.forEach(function(item, i, ar) {
    if (item.indexOf('a') !== -1) {
    console.count(label);
    }

    if (item.indexOf('a') !== -1) {
    console.count(label);
    }
    });

    【結果】
    ・safari(MacOSX10.8 バージョン 6.0 (8536.25))
    aが含まれている: 1
    aが含まれている: 1
    aが含まれている: 2
    aが含まれている: 2

    ・Chrome(MacOSX10.8 バージョン 21.0.1180.57)
    aが含まれている: 1
    aが含まれている: 1
    aが含まれている: 2
    aが含まれている: 2

    ・Firefox(MacOSX10.8 バージョン14.0.1)、Firebug(バージョン 1.10.2)
    aが含まれている 2
    aが含まれている 2

    もし自分の勘違いでしたらまたご指摘していただけると、助かります。
    よろしくお願いします。

  • すぎゃーん

    あれれ! 本当ですね。すみません! 私の勝手な勘違いでした!!
    ちゃんと確かめもせずに書いてしまって申し訳ありませんでした m(_ _)m

  • 橋本

    いえいえ。こちらこそわかりにくい書き方をしてしまい申し訳ありません。
    また何かありましたら、遠慮なくご指摘いただけると助かります。

  • ろばりお

    "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36"
    だと↓になりました。

    aが含まれている: 1
    aが含まれている: 2
    aが含まれている: 3
    aが含まれている: 4

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事