so-zou.jp

コンソール パネル

コンソールへの出力のすべてが、Firebugのコンソールに表示されるわけではありません。

コンソールAPI (Console API)

JavaScriptのコードから、コンソール パネルへ出力できます。

console.debug( object [, object, ... ] )

debug()の出力は、コンソールの[デバッグ情報]タブで確認できます。 Gecko 5.0 (Firefox 5.0) 以降debug()は非推奨となっており、代替としてlog()を使用します。

console.log( object [, object, ... ] )

console.log - Web API リファレンス | MDN

log()の出力は、コンソールの[すべて]タブで確認できます。他のタブで確認できるように、情報の種類を指定するには下表のメソッドを使用します。

メソッド	出力先のタブ
log()	すべて
error()	エラー
warn()	警告
info()	情報

Console APIはInternet Explorer 8以降やChromeなどで利用できますが、ブラウザにより実装が異なります。JavaScript Console API - Browser Differences | aKa Web Design

タイマー (Timers)

時間を計測できます。タイマー - console - Web API インターフェイス | MDN

console.time( timerName );

console.time - Web API | MDN

console.timeEnd( timerName );

console.timeEnd - Web API | MDN

console.time( 'timer1' ); // 任意の名前を指定して、タイマーを開始する

// … 時間のかかる処理

console.timeEnd( 'timer1' ); // 対象のタイマーの名前を指定して、タイマーを停止させる

timeEnd()でのタイマー停止時にコンソールに「timer1: 3ms」のように出力され、経過時間を確認できます。

同じタイマーに対してtimeEnd()をくり返し呼ぶと、「タイマー “timerName” は存在しません。」として失敗します。途中経過を知るにはConsole.timeLog()がありますが、一部の環境しか対応しません。

スタックトレース (Stack traces)

コールスタックを確認できます。スタックトレース - console - Web API インターフェイス | MDN

console.trace();

Console.trace() - Web API | MDN

function Func1()
{
   console.trace();
}

function Func2()
{
   Func1();
}

Func2();

結果はFirefoxでは、

Func1       http://localhost/sample.js:3:4 (ファイル内での3行4列目の意味)
Func2       http://localhost/sample.js:8:4
<匿名関数> http://localhost/sample.js:11:1

のように、Chromeでは次のように出力されます。

Func1         @ sample.js:3
Func2         @ sample.js:8
(anonymous) @ sample.js:11

コマンドラインAPI (Command Line API)

コマンド	機能
$()	指定したIDを持つ要素をひとつ返す。
$$()	指定したCSSセレクタに一致する要素の配列を返す。
$0	調査で最後に選択した要素を指す。
$1	調査で最後から2番目に選択した要素を指す。
$2	調査で最後から3番目に選択した要素を指す。
$3	調査で最後から4番目に選択した要素を指す。
$4	調査で最後から5番目に選択した要素を指す。
$_	コマンドラインで最後に評価した式の結果を指す。
$n()	調査で最後に選択した5つの要素のうちのひとつを返す。そのどれを返すかを要素のインデックス番号で必ず指定 (0が先頭) する。
$p	JavaScriptのオブジェクトまたは値を右クリックした後、'コマンドラインで使用'をクリックすると、このコマンドライン変数がその値にセットされる。
$x()	指定したXPath式に一致する要素の配列を返す。

コマンド	機能
cd()	デフォルトでは、コマンドラインの式はページ最上位ウィンドウからの相対指定。cd()で代わりにページ内のフレームウィンドウを指定することができる。
clear()	コンソールをクリアする。
copy()	指定したパラメータをクリップボードにコピーする。関数の戻り値やオブジェクトでもかまわない。
debug()	関数の最初の行にブレークポイントを追加する。
dir()	オブジェクトのすべてのプロパティを一覧出力する。 これはDOMパネルでの表示と同様。
dirxml()	HTMLまたはXML要素のXMLソースツリーを出力する。 これはHTMLパネルでの表示と同様。任意のノードをクリックしてHTMLパネルでそれを調査することができる。
getEventListeners()	要素 (あるいは他のイベントターゲット) に直接登録されたイベントリスナーをすべて備えたオブジェクトを返す。
help	利用可能なすべてのコマンドのヘルプを表示する。
include()	リモートスクリプトをインクルードする。
inspect()	オブジェクトを最適なパネル、またはオプションの第二引数で指定したパネルで調査する。 指定可能なパネル名は、 'html' 'stylesheet' 'script' 'dom'
keys()	オブジェクトの全プロパティの名前を格納した配列を返す。
monitor()	関数の全呼び出しを記録する。
monitorEvents()	指定したオブジェクトに対する全イベントを記録する。 オプションの第二引数で記録する個別イベントまたはイベントグループを指定できる。 指定可能なイベントグループは、 'composition' 'contextmenu' 'drag' 'focus' 'form' 'key' 'load' 'mouse' 'mutation' 'paint' 'scroll' 'text' 'ui' 'xul' 'clipboard'
profile()	JavaScriptプロファイラを開始する。 オプションの第二引数でプロファイルレポートのヘッダに出力されるテキストを指定することができる。
profileEnd()	JavaScriptプロファイラを終了し、そのレポートを出力する。
table()	指定データを表のようにレイアウトして記録することができる。 第一引数は必須で、表に適したデータ (配列の配列もしくはオブジェクトのリスト) を指定する。オプションの第二引数で、記録される列またはプロパティを指定できる。
undebug()	関数の最初の行のブレークポイントを削除する。
unmonitor()	関数の全呼び出しの記録を解除する。
unmonitorEvents()	指定したオブジェクトに対する全イベントの記録を解除する。 オプションの第二引数で記録を解除する個別イベントまたはイベントグループを指定できる。
values()	オブジェクトの全プロパティの値を格納した配列を返す。

コマンドラインAPIのhelpコマンド

monitorEvents()

指定オブジェクトのイベントを確認できます。

monitorEvents(object[, types])

MonitorEvents - FirebugWiki

objectに送られたtypesのイベントを記録します。typesが未指定のときには、すべてのイベントが対象となります。たとえば、

monitorEvents( document.body )

と実行すると、ドキュメントのbody要素のすべてのイベントが記録され、それは下図のように出力されます。

要素の指定

特定の要素に限定するには、

monitorEvents( document.getElementById('foo') )

のように、objectに要素のオブジェクトを渡します。

イベントの指定

特定のイベントに限定するには、typesにイベント名を指定します。

monitorEvents( document.body, 'click' )

複数のイベントを対象とするには、イベント名を文字列の配列で指定します。

monitorEvents( document.body, ['click','keydown'] )

このように複数のイベントを指定するとき、それが関連するイベントならば、Event groupsを指定することで簡潔に記述できます。たとえば

monitorEvents( document.body, 'key' )

と記述することは、

monitorEvents( document.body, ['keydown','keypress','keyup'] )

と記述することと同じ意味を持ちます。このEvent groupsは、Event groups - MonitorEvents - FirebugWikiにその一覧があります。

JavaScript デバッガのイベントペインを使用すれば、イベント発生時にそれを捕捉したハンドラを確認できます。

プロファイル (Profiling)

[プロファイル]をクリックすることで、JavaScriptのプロファイルを行えます。

結果は、

項目	説明
関数	関数名
呼び出し	関数の呼び出し回数
パーセント	この関数で消費された時間の割合
自己時間	ネスト呼び出しを除く、関数で消費される時間
時間	ネスト呼び出しを含む、関数で消費される時間
平均	関数呼び出しを含む、平均時間
最小	関数呼び出しを含む、最小時間
最大	関数呼び出しを含む、最大時間
ファイル	関数のあるファイル

のように表示されます。ページ全体のプロファイルを行うには、拡張のプロファイラを使用します。

スクリプトからの制御

console.profile()

console.profileEnd()

コマンドの実行方法

コンソール パネルでコマンドを実行するには、

• コマンドライン
• コマンドエディタ

の2つがあり、それぞれ特徴が異なります。これらは右下に表示されているボタンにより切り替えられます。

コマンドライン (Command Line)

入力したコマンドはEnterで実行できます。しかしそのとき自動補完 (Autocomplete) の候補があると、Enterによりそれが機能しコマンドが補完されます。この動作が期待するものではない場合は、Alt + Enterで補完を無視して実行できます。

コマンドラインは、コンソール パネル以外のパネルでも使用できます。下図に示すのが、コマンドラインを表示するアイコンです。

コマンドエディタ (Command Editor)

スクリプトを記述して実行を確認できます。コマンドは、Ctrl + Enterでも実行できます。

• パネル
  • コンソール
  • HTML
  • CSS
  • スクリプト
  • ネット
• 拡張
  • クッキー
  • プロファイラ

• お問い合わせ
• プライバシーポリシー
• サイトマップ