ホーム » ブログ » attowave's blog

JavaScript でプリントデバッグするには？

投稿者: attowave　日付: 土, 2009-01-31 23:55 

alert 関数を使用しないでプリントデバッグする方法を、ブラウザごとに紹介します。

更新内容

2009-02-27
Safari 3 から Safari 4 へ変更。

2009-01-31
Chrome 2 と IE8 を追加。 プリントデバッグの検証ページを追加。

Firefox では、 Firebug をインストールすると、いくつかのプリントメソッドが使えるようになります。 詳しくは、 Firebug Console Object and API を参照してください。 以下は、Firebug の代表的なプリントメソッドです。 

console.log('Debug Message');

デバッグメッセージの出力先は、Firebug のコンソール（[F12]で表示）です。 Firefox のエラーコンソールでないことに注意してください。

Chrome 2 では、次のコードを使用します。 

console.log('Debug Message');

デバッグメッセージの出力先は、「ページ メニュー」アイコン→「開発/管理」→「JavaScript コンソール」です。

Firebug Console Object and API と比べて不足しているのは、console.profile（と console.profileEnd）だけです（2009-01-31現在）。

Safari 4 では、次のコードを使用します。 

console.log('Debug Message');

デバッグメッセージの出力先は、「開発」→「エラーコンソールを表示」です。

［開発］メニューを有効にするには次のようにします。

  1. メニューバーから「編集」→「設定」を選択
  2. 「詳細」タブをクリック
  3. 「メニューバーに［開発］メニューを表示」にチェック

Firebug Console Object and API と比べて不足している API はありません。

Opera では、次のコードを使用します。 

opera.postError('Debug Message');

console.log でないのが厄介ですが、 後述の「プリントデバックの検証」に掲載しているソースコードにあるように、 1行のコードで console.log を使用可能にできます。

デバッグメッセージの出力先は、「ツール」→「詳細ツール」→「エラーコンソール」です。

情報源 ⇒ How to debug JavaScript problems with Opera


　(IE8)

IE8 では、次のコードを使用します。 

console.log('Debug Message');

デバッグメッセージの出力を確認するには、次の手順に従ってください。

  1. デバッグ対象のページを開く。 例えば、後述の検証ページ プリントデバッグの検証 を開く。
  2. [F12]キーを入力
  3. ［スクリプト］タブをクリック
  4. ［デバッグ開始］ボタンをクリック
  5. デバッグ対象のページをリロード

IE8 の Console API は、 Firebug Console Object and API に倣っているいるようですが、現時点（2009-01-31）では詳しいことは分かりません。


　(IE7)

IE7 では、 IE7Pro をインストールした後、さらに FireBug Lite ++ (IE7Pro) をインストールします。 以下は、FireBug Lite ++ の代表的なプリントメソッドです。 

console.log('Debug Message');

デバッグメッセージの出力先は、FireBug Lite ++ のコンソール（[F12]で表示）です。

FireBug Lite ++ には、「onload イベントが発生する前には、プリントデバッグすることができない」 という制限があります。

プリントデバッグの検証

検証ページ プリントデバッグの検証 を開くと、コンソール画面にデバッグメッセージが出力されます。

検証ページで、プリントデバッグが成功した場合（Chromeの場合）

コンソール画面を表示（Chromeの場合）

ソースコード

console.log を使用して、デバッグメセージを出力します。 Opera の場合は opera.postError なので、あらかじめ console.log を使用可能にする処理が入っています。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>プリントデバッグの検証</title>
</head>
<body>
<div>
<script type="text/javascript">
//<![CDATA[
(function() {

// Opera で実行された場合は、console.log を追加
if(!!window.opera&&!window.console){console={log:opera.postError}}

try {
    console.log('--- DEBUG MESSAGE ---');

    var tab = [
        { brw: 'Chrome',
          con: '「ページ メニュー」アイコン→「開発/管理」→「JavaScript コンソール」' },

        { brw: 'Firefox + Firebug',
          con: '[F12]' },

        { brw: 'Safari',
          con: '「開発」→「エラーコンソールを表示」' },

        { brw: 'Opera',
          con: '「ツール」→「詳細ツール」→「エラーコンソール」' },

        { brw: 'IE7 +  FireBug Lite ++',
          con: '[F12]' }
    ]

    document.write('<p>コンソールに「--- DEBUG MESSAGE ---」と出力しました。 確かめて！</p>');
    document.write('<table border="1" cellpadding="5" cellspacing="0">');
    document.write('<caption>コンソールを表示するには？</caption><tbody>');
    for (var i in tab) {
        document.write('<tr><td>' + tab[i].brw + '</td><td>' + tab[i].con + '</td></tr>');
    }
    document.write('</tbody></table>');
}
catch(e) {
    document.write('<p>この環境では、プリントデバッグ出来ませんよ？</p>');
}

})();
//]]>
</script>
</div>
</body>
</html>

更新履歴

日付 内容
2009-02-27 変更Safari 3 から Safari 4 へ変更。
2009-01-31 追加Chrome 2 と IE8 を追加。
追加セクション「プリントデバッグの検証」を追加。
変更Safari の［開発］メニューが、GUI で ON/OFF 可能になった。
2007-10-28 追加FireBug Lite ++ (IE7Pro)、CompanionJS
2007-02-05 追加Firebug Lite
2006-09-22 初版
»