アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

こんにちは、橋本です。

前回にひきつづき、SafariChromeのWebインスペクターやFirefoxFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。

consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。

  • assert

  • count

  • debug

  • dir

  • dirxml

  • error

  • group

  • groupCollapsed

  • groupEnd

  • info

  • log

  • markTimeline

  • profile

  • profileEnd

  • time

  • timeEnd

  • timeStamp

  • trace

  • warn


そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。
今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。

infoメソッド



console.info(message-object)

引数で渡されたメッセージをインフォメーションアイコンつきで表示するメソッドです。
Safariではアイコンが表示されませんでしたが、FireBugでは表示されています。



var hoge = 'インフォだよ?';
console.info(hoge);  






前回紹介したerrorメソッドや、のちほど紹介するwarnメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。

logメソッド



console.log(message-object)

ご存知logメソッドです。引数で渡された値を出力します。
引数の値なのですが、カンマ区切りで複数渡すことも可能です。

また、あまり知られていないと思いますが、logメソッド(debugなどのメッセージを出力する系のメソッドも含む)では、printf-styleのプレスホルダの一部を使用することも可能です。


など。

FireBugでは、%cプレースホルダをつかって、メッセージのスタイルを設定することもできます。

以下、サンプルです。



var str = 'ほげほげ',
    intNum = 10,
    floatNum = 10.12345678,
    obj = {hoge: 'hoge'},
    styl = 'color: hsl(0, 50%, 50%);font-weight: bold;';

console.log(str, intNum, floatNum, obj);
console.log('文字列: %s', str);
console.log('数値(整数): %i', intNum);
console.log('数値(整数): %d', intNum);
console.log('数値(浮動小数点数): %f', floatNum);
console.log('オブジェクト: %o', obj);
console.log('%cFireBugでスタイル指定', styl);






プレースホルダはなにげに便利なので、今まで使ったことのない人は是非使ってみてください。

markTimelineメソッド



console.markTimeline("string");

markTimelineメソッドは、その他のコンソールに出力するタイプのメソッドとは異なり、WebインスペクターやFirebugのタイムラインビュー上でメソッドが呼ばれたポイントに、引数で渡されたラベルを表示するというものになります。

サンプルと実行結果をお見せしたいのですが、自分の実行環境では実行結果を確認できなかったため、今回はスキップさせてください。すみません。


profileメソッド, profileEndメソッド



console.profile([title]);
console.profileEnd([title]);

profileメソッドとprofileEndメソッドは、関数の解析(実行にかかった時間など)を行うためのメソッドです。
profileメソッドが呼ばれてから、profileEndメソッドが呼ばれるまでの間に実行された関数について解析を行います。
profileメソッドとprofileEndメソッドにはそれぞれタイトルを設定することが出来、profileEndメソッドにタイトルを渡した場合、そのタイトルに対応するprofileメソッドのみ解析を終了します。(指定しない場合には、すべてのprofileメソッドの解析を終了します。)

以下、サンプルです。



function hoge() {
    var ret = 0;
    for (var i = 0; i < 100000; i++) {
        ret += i;
    }

    console.log(ret);
}

function fuga() {
    var ret = 1;
    for (var i = 1; i <= 10; i++) {
        ret *= i;
    }

    console.log(ret);
}

console.profile('a');

console.profile('b');
hoge();
console.profileEnd('b');

console.profile('c');
fuga();
console.profileEnd('c');

console.profileEnd('a');






特定箇所の関数の実行速度や実行内容を確認したい場合に有用ですね。

timeメソッド, timeEndメソッド



console.time(name);
console.timeEnd(name);

timeメソッドとtimeEndメソッドは、タイマーの開始と終了を行うメソッドです。timeメソッドでタイマーを開始し、timeEndメソッドでタイマーを終了し、時間をlogに表示します。

以下、サンプルです。



function hoge() {
    var ret = 0;
    for (var i = 0; i < 10000000; i++) {
        ret += i;
    }

    console.log(ret);
}

function fuga() {
    hoge();
    hoge();
}

console.time('all');

console.time('hoge');
hoge();
console.timeEnd('hoge');

console.time('fuga');
fuga();
console.timeEnd('fuga');

console.timeEnd('all');




実行速度を計りたいときは、これで決まりですね。

timeStampメソッド



console.timeStamp("string");

timeStampメソッドは、メソッド実行時の時間をlogに出力するメソッドです。
FireBugでは実行結果を確認できたのですが、Safari, Chromeでは実行結果を確認できませんでした。

以下、サンプルです。



function hoge() {
    var ret = 0;
    for (var i = 0; i < 10000000; i++) {
        ret += i;
    }

    console.log(ret);
}

function fuga() {
    hoge();
    hoge();
}

console.timeStamp('start');

hoge();
fuga();

console.timeStamp('stop');




このメソッドの使いドコロは、いまいち思い浮かびませんでした。
常にスクリプトの最初に実行しておくようにすれば、logを見て、

「いっけねー、もうこんな時間!」

なんて感じで、時間管理に便利かもしれませんね。

traceメソッド



console.trace();

traceメソッドは、メソッド実行時のスタックトレースを表示するメソッドです。

以下、サンプルです。



function hoge() {
    function fuga() {
        function piyo() {
            console.trace();
        }

        piyo();
    }

    fuga();
}

hoge();




どのメソッドを経由して来たのか、ということを確認したい場合には有用かもしれませんね。

warnメソッド



console.warn(message-object)

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



var hoge = '警告です!!';
console.warn(hoge);  





前回紹介したerrorメソッドや、infoメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。


以上、前回と今回の2回に渡り、consoleオブジェクトのメソッドについて見てきました。
使えそうなものや、いまいち使えなさそうなものなど様々ありますが、
いろいろと試してみて、便利なメソッドは是非使っていっていただければ思います。

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

こんにちは、橋本です。

今回と次回の2回にわたり、SafariChromeのWebインスペクターやFirefoxFireBugで使える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)の内容を表示します。
例えば以下のような使い方をします。



function hoge(num){
    return num > 0;
}

var num = -1;

console.assert(hoge(num), 'falseだよー');




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

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

countメソッド



console.count([title])

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



var arr = ['aaa', 'abc', 'bbc', 'ccd', 'cbc'];

arr.forEach(function(item, i, ar) {
    if (item.indexOf('a') !== -1) {
        console.count('aが含まれている');  
    } 
});





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

debugメソッド



console.debug([message-object])

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

サンプルは省略します。

dirメソッド



console.dir(object)

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



<!DOCTYPE HTML>
<html lang="ja">
    <body>
        <div id="hoge"></div>
        <script>
            var elm = document.getElementById('hoge');
            console.dir(elm);  
        </script>
    </body>
</html>




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

dirxmlメソッド



console.dirxml(node)

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



<!DOCTYPE HTML>
<html lang="ja">
    <body>
        <ul id="hoge">
           <li>1</li> 
           <li>2</li> 
           <li>3</li> 
           <li>4</li> 
        </ul>
        <script>
            var elm = document.getElementById('hoge');
            console.dirxml(elm);  
        </script>
    </body>
</html>




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

errorメソッド



console.error(message-object)

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



var hoge = 'errorだよー';
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メソッドを使うとグループの内容が閉じた状態で表示されます。



var i;
console.group('groupメソッド');

for (i = 0; i < 10; i++) {
    console.log(i);    
}

console.groupEnd();

console.groupCollapsed('groupCollapsedメソッド');

for (i = 0; i < 10; i++) {
    console.log(i);    
}

console.groupEnd();




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

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

では。

GoogleChrome に Firebug extension をいれてみた + よさげなextensionまとめ

こんにちは。松田です。
システムの開発時にはFirefox+Firebugが欠かせなくなっていますが、最近Firefoxがクラッシュしまくる現象に悩まされてます。セーフモードで起動しようがFirefox自体インストールし直そうが、ちょっと使っているとすぐにクラッシュ。
いい加減Firefoxに愛想がつきてきた・・・けどFirebug無いと開発できない。ChromeとかでFirebugっぽいこと出来ないかなぁ・・・、と検索してみたらFirebug Liteエクステンションなるものを発見。さっそく入れてみました。

というかエクステンション機能自体出ていたことを知りませんでした。
いつのまに・・・。


まずはGoogleChromeのインストール

通常のGoogleChromeではエクステンションに対応していないので、エクステンションに対応したdev版のGoogleChromeをインストールする必要があります。

通常版のGoogleChromeでもエクステンションに対応したようです。
http://www.google.com/chrome/eula.html?extra=devchannel

次にFirebugのインストール
https://chrome.google.com/extensions/detail/bnbbfjbeaefgipfjpdabmpadaacmafkj
上記リンクの「インストールボタン」を押せば数秒で登録完了です。
簡単でいいですね。Chromeエクステンションのインストールの場合、ブラウザを再起動させる必要もないようです。

これでURL入力欄の右側にボタンが追加されます。
通常のプラグインはここのボタンを押せばだいたい何かしら動作します。
さっそくクリッククリック。


あれ・・・何も起きない・・・?


何もおきないよ?
サイト内の説明を読むかぎりでは、インストール直後はページをリフレッシュしないとみれない、なおかつ、Google Chrome Extensionのサイト内では使用できないもよう。
上記に当てはまらないのにダメな場合は、以下のリンクをブックマークのツールバーにドラッグしてブックマークレットを作ってみてください。

↓このリンクをドラッグ!
Firebug Lite

ブックマークレット完成

アイコンをクリックしても何も起きない場合でも、このブックマークレットからだと何故か起動してくれることが多いです。謎です。
これでうまくいけば無事Firebugが立ち上がります。

とうとうChromeFirebugが・・・。

あ、あれ?
なんか足りない。
一番使いたかった「接続」タブが無いっ。なんてこったい!
この辺がLiteたる所以なのかっ。

ちょろっと使ってみた感じでは、Inspectorは普通に使えます。
ただ、そこからの要素の書き換えはまだ出来ないようです。
ページをリロードすると枠が消えちゃったりとか改善が必要な様子。
まだまだFirefox版のほうが実用向き。
今後に期待です。




ほかのエクステンションも
新しいブラウザにいじると大体やっちゃうのが使えそうなアドオン探し。
どうせいじるのは最初の頃だけなんだろうなーと分かっていながらもいろいろ入れてみました。
せっかくなので入れてみたものを紹介。

Chrome Gestures
マウスジェスチャー
右クリックしながらマウス動かして進んだり戻ったり更新したり。
GoogleChromeを使ってなかった理由の一つがこれができないからだったりもしたり。

XML Tree
GoogleChromeではXMLのページがただのテキストで表示されますが、これをいれればカッコよくXML風に表示可能。
ただ、後述の他のエクステンションと同時に使うといろいろとおかしなことが起こります。
Coolirisを入れてるとXMLの最初の階層にstyleタグが入れ込まれちゃう。
Furigana Injectorを入れてるとXMLページを表示しただけでエラーが出ちゃう。
これはどっち側の責任なのか。うーん。

Furigana Injector
表示しているサイト内の漢字にフリガナを付けてくれる。
フリガナを付ける漢字のレベルも簡単に調整できる。はずなんですが自分の環境だとまだ動作してくれてません。なぜ・・・。

URL入力フォームの右端に出る「振」マークをクリックしたらフリガナが表示された。
この場所って他のエクステンションとかぶったらどうなるんだろ。

Ibrii
ページ右側にカートのような枠を表示し、サイト内の画像やらテキストやらをドラッグして放り込んで保存しておくことができます。おもしろげ。
最初に簡単なユーザー登録が必要。

Cooliris
GoogleImage等の画像検索画面などをカッコよく表示してくれる。
それでいて見やすい。
Firefoxで使ってたときは日本語入力ができなかった気がするけどいつの間にか対応してた。カッコイイッス。

Hatena Bookmark GoogleChrome extension
メニューのアイコンには見ているページのはてぶ数を表示。
アイコンをクリックすると、「ブックマークする」ボタンと、そのページについているはてぶコメントが出現。ベンリ。

IE Tab
クリックするとIEを使用したタブが出現。
Web開発者にはもってこい。

Digital Clock
ただの時計。
アイコン状態で時間が表示されているので地味に便利。

Google Similar Pages beta
クリックすると表示しているページと似ているサイトをいくつか教えてくれる。
そんなに使ってないけど単にリンクのあるサイトが出ているだけの気もする。

Mini Google Maps
アイコンをクリックするだけでちっこいGoogleMapが出現。検索枠もついてる。
これでいちいち新しいタブで地図を開かなくてもよくなるっ

Bubble Translate
翻訳エクステンション。
Ctrlを押しながら文字列選択とかで翻訳結果をツールチップ表示してくれる。
ヴぇんり。

AutoPatchWork
ページャーが存在するページで一番下までスクロールすると、次のページを勝手に取得してつなげて表示してくれる。

Sexy Undo Close Tab
閉じたタブをスタックしておいてあとで復元することができる。
やべっ、閉じちゃったっ! ってことが多い人はぜひ。
同じ内容のエクステンションMK UndoCloseTabよりも、ちょっぴり見た目がせくしー。

PageShot
クリックするとページのスクリーンショットをとってくれる。
一度ページ全体をキャプチャーしたあと、必要な部分だけ切り出すこともできる。
pngで保存可能。

Google Apps Shortcuts
Googleの提供するいろんなサービスへのショートカット
生活のすべてをGoogleに預けてちゃってる人は是非



使ってみて思ったこと
・いっぱい入れてみたけど体感速度は変わらず。モッサリしない。
・エクステンションのアイコンの表示位置はすべてここで固定?
・別の場所に移動させたい。それかせめて並べ替えたい。
・まだまだ微妙な出来のエクステンションが多い
・オプション画面がカッコ悪いのが多い
・インストール後に再起動を迫らない割に、再起動しないと動作しないものもあったり
・そもそもちゃんと動作しないものもあったり
・エクステンション同士が邪魔しあうことも
・でも乗り換えちゃっていいと思えるぐらい十分な性能

全般的に今後が楽しみといった感じです。