GoogleChromeのデベロッパーツールのconsoleオブジェクト

googleChromeのデベロッパーツール、特にコンソールはとても便利です。
v17でのconsoleオブジェクトについてまとめました。

consoleオブジェクトの以下21個のメソッドについてまとめました。

assert
count
debug
dir
dirxml
error
group
groupCollapsed
groupEnd
info
log
markTimeline
memory
profile
profileEnd
profiles
time
timeEnd
timeStamp
trace
warn

以下のサイトを参考にしました。

assert

第一引数がtrueの時は何も出力しません。falseの時はエラー表示と共に残りの引数を出力します。

debug dirxml info log warn error

黄色マークが付くwarnと赤マークが付き呼び出し元が表示されるerror以外は違いが見つかりませんでした。
元ネタと思われるFirebugでは違いがあるのですが、GoogleChromeでは上位の機能が取り込まれているようです。
引数が一つの場合は単純にそれを表示します。

文字列の他に数値、配列、オブジェクト、DOMオブジェクトも表示する事が出来ます。

また、これらの命令は引数が二つ以上、かつ第一引数に"%s"の様な単語があると、残りの引数を順番に当てはめます。
Firebugのドキュメントによるとパターンは%s、%d、%i、%f、%o、%cの六種類の様ですが、GoogleChromeにおいてはいくつかのパターンが同じ動作をします。
%d、%i、%fは数字の表記方法を区別するはずですが、全て%sの文字列の表記になります。
%oはクリックで展開する事も出来ます。

dir

上記のdebug等は複数の引数を受け取ることが出来ましたが、dirは一つの引数を受け取るだけです。
配列を["a","b"]と表示するdebug等に比べ、配列も折りたたみで表示をしてprototypeも表示してくれるのが一番大きな変更点です。
一つの変数をしっかり確認したい時に使うと良いと思います。

trace

今までは引数に渡された値を詳しく知る為の関数でしたが、consoleの機能はそれだけではありません。
console.trace();は呼び出された時点での呼び出し元を表示します。画像ではデベロッパーツールから呼び出されたのでInjecedScriptが表示されていますが、webページ内から呼び出した場合は(anonymous function)が一番下になります。console.error関数でも同じ物を呼び出すことが出来ます。値の確認も同時に行いたい時はerrorと使いわけると良いと思います。

count

行ごとに呼び出された回数を表示します。引数は無くても構いません。関数の頭に書いておいて、何回関数が呼ばれたか・・・を調べるのに使えそうです。

コンソール画面では一度実行した後でも再度同じコードを実行すると値が引き継がれます。

MemoryInfo

MemoryInfoは関数ではなくプロパティです。
名前からメモリの情報をしる事が出来ると思っていたのですが、現状はgoogleMapでもニコニコ動画でも全てゼロのままでした。
また、関数ではないので、コンソールではなくhtml中から呼び出す時はconsole.dir(console.MemoryInfo);と呼び出す必要があります。

markTimeline timeStamp

console画面ではなくtimeline画面の為の関数です。こまめにこの関数を書いておけば、重い処理の原因特定をより容易に行う事が出来るでしょう。
この二つの関数も違いは分かりませんでした。

time timeEnd

二つの関数はセットで使います。timeが呼び出されてからtimeEndが呼び出されるまでのミリ秒を表示します。
引数にタイトルを付けて、同じタイトル同士で紐付けされます。

profile profileEnd profiles

これらの関数はセットで使います。timeと似ていますが、経過時間より細かい情報を調べることが出来ます。
また、timeはtimeEndで結果が呼び出せましたが、profileはprofilesプロパティで結果を調べる必要があります。

group groupCollapsed groupEnd

コンソール画面にインデント構造を作ります。groupとgroupCollapsedでインデントを下げる。groupEndで上げます。
groupとgroupCollapsedの違いは初期状態で開いているか閉じているかです。

以上がconsoleオブジェクトの機能です。
今まで処理時間を調べる時は毎回書いていたのですが、time関数で簡単に測定できそうです。

また最後に、v17からコンソールに単語補完機能が付きました。
現在のファイルを解析してとまではいきませんが、組み込み関数名の入力は短縮化されそうです。