JavaScript:メッセージをエラーコンソールに出力するにはどうすればよいですか?


438

できれば変数を含めて、エラーコンソールにメッセージを出力するにはどうすればよいですか?

たとえば、次のようなものです。

print('x=%d', x);

8
どのコンソールについて話しているのですか。ブラウザコンソールまたはJavaScriptフレームワーク固有のコンソール?
Eric Sc​​hoonover、

回答:


469

Firebugをインストールするconsole.log(...)console.debug(...)、and 、などを使用できます(詳細については、ドキュメントを参照してください)。


14
@ダン:WebKit Web InspectorはFireBugコンソールAPIもサポートしています
olliej

160
なぜこれが受け入れられた答えなのですか?彼はfirebugコンソールへの書き込み方法を尋ねたのではなく、エラーコンソールへの書き込み方法を尋ねました。ディックでも何でもない、ただ指摘するだけ。
matt lohkamp、2008年

127
+1。そして、この質問に今到着した人のために、質問に回答して以来、すべてのブラウザーがコンソールオブジェクトを実装しているため、console.log()IEを含むすべてのブラウザーで動作することを指摘しておく価値があります。ただし、すべての場合において、その時点でデバッガーウィンドウを開いておく必要があります。開いていない場合、を呼び出すとconsoleエラーが発生します。
Spudley、2011

2
前述の@andrewjacksonのように、console.logは、IEを含むすべての最新のブラウザーで正常に動作します。古いブラウザをサポートするつもりである場合(そして、公開Webサイトで作業している場合は間違いなく!)、コードは依然として完全に有効であり便利ですが、私の批判は、コメントが誤解を招く/正確でないということだけです。
BrainSlugs83 2012年

1
一方、console.debug()はIEには存在しません。if(!console.debug){console.debug = function(args){console.log(args);でそれを回避できます。}}
Rovanion

318
console.error(message); //gives you the red errormessage
console.log(message); //gives the default message
console.warn(message); //gives the warn message with the exclamation mark in front of it
console.info(message); //gives an info message with an 'i' in front of the message

ロギングメッセージにCSSを追加することもできます。

console.log('%c My message here', "background: blue; color: white; padding-left:10px;");

8
Chromeの

10
これが正解です。「エラー」という単語は、質問のタイトルには含まれていますが、選択された回答には含まれていません。
Ivan Durst

3
CSSの追加に関する追加のビットはかなり楽しいです。+1!
sudo make install

@ORMapperそこでは何が機能しませんか?私が想定しているCSSは?
ニコラス

2
気づいた瞬間、これまでのすべてのconsole.log使用で、コンソール内でcssを使用できるようになりました:|
赤、

86

例外はJavaScriptコンソールに記録されます。Firebugを無効にしたい場合は、これを使用できます。

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}

使用法:

log('Hello World');
log('another message');

8
一部のブラウザでは、デバッグを有効にしていると、ポップアップメッセージがスローされます。
BrainSlugs83 2012年

throwに包む必要がある理由を説明していただけますsetTimeoutか?
アントニー

55

クロスブラウザで機能するこれを行う1つの良い方法は、JavaScriptのデバッグ:アラートを破棄するで概説されています!


7
throw()は素晴らしい提案です-これが選択された答えです。
マットローカンプ2008年

17
これは、ブラウザ間のアプローチの1つです。しかし、例外をスローすることは、メッセージをログに記録することと根本的に異なるのではないですか?
Robin Maben

14
一方、例外をスローすると、現在の「スレッド」の実行が停止し(Yuval Aが指摘)、キャッチがある場合はそれを再開します。これが望ましいことだとは思いません。
dlaliberte 2011年

7
throw()間違いなくこれを行う方法ではありません。遅かれ早かれトラブルに巻き込まれるでしょう。私にとってはそれよりも早くなりました:(
Hugo Mota

4
@Ian_Oxley:ある時点でダウンしましたが、現在は復旧していますが、ここにコードを投稿することはさらに優れており、stackoverflowのベストプラクティスで推奨されています。
woohoo 2012年

15

ここでは、デバッガーのコンソールではなく、ブラウザーのエラーコンソールにメッセージを出力する方法についての文字どおりの質問に対する解決策を示します。(デバッガをバイパスするのには十分な理由があるかもしれません。)

エラーコンソールにメッセージを表示するためにエラーをスローする提案に関するコメントで述べたように、1つの問題は、これにより実行のスレッドが中断されることです。スレッドを中断したくない場合は、setTimeoutを使用して作成された別のスレッドでエラーをスローできます。したがって、私の解決策(これはIvo Danihelkaによる解決策の詳細になります):

var startTime = (new Date()).getTime();
function logError(msg)
{
  var milliseconds = (new Date()).getTime() - startTime;
  window.setTimeout(function () {
    throw( new Error(milliseconds + ': ' + msg, "") );
  });
}
logError('testing');

タイムアウトにより、メッセージの表示順序が歪む可能性があるため、開始時間からの時間をミリ秒単位で示しています。

Errorメソッドの2番目の引数はファイル名用です。これは、不要なファイル名と行番号が出力されないようにするための空の文字列です。呼び出し元の関数を取得することは可能ですが、単純なブラウザに依存しない方法では取得できません。

エラーアイコンの代わりに警告またはメッセージアイコンを使用してメッセージを表示できればよいのですが、その方法を見つけることができません。

throwを使用する際のもう1つの問題は、囲みのtry-catchによってキャッチおよびスローされる可能性があり、スローを別のスレッドに配置することで、その障害も回避されることです。ただし、エラーをキャッチできる別の方法があります。それは、window.onerrorハンドラーが別の処理を行うハンドラーに置き換えられた場合です。そこであなたを助けることはできません。


15

Safariを使用している場合は、

console.log("your message here");

ブラウザのコンソールに表示されます。


11
最新のブラウザはすべてサポートしていconsole.log()ます。
JJJ

2
現在、すべての最新ブラウザがサポートしていconsole.log()ます。最近までそうではありませんでした。
ブライス

9

実際に質問に答えるには:

console.error('An error occurred!');
console.error('An error occurred! ', 'My variable = ', myVar);
console.error('An error occurred! ' + 'My variable = ' + myVar);

エラーの代わりに、情報、ログ、または警告を使用することもできます。


あなたの答えは最高のようですが、MozillaのMDNページconsole.error(..)非標準の機能であり、本番環境では使用しないでくださいと言っています。これについてどう思いますか?console.errorvs を使用する初心者プログラマに何か提案はありconsole.logますか?
modulitos 2015

これは面白い。そのときは、これを使用すべきではありません。情報をありがとう、ルーカス。
Yster

2
MDNがあると考えるconsole.log(...)だけでなく、「非標準」。その点でconsole.errorは、と同じくらい安定していconsole.logます。
マイクラパダス、2015年

1
@ルーカスそれが標準であるかどうか誰が気にしますか?本番環境でコンソールロギングを使用するのは誰ですか?
アンドリュー

Console.errorは現在、すべての主要なブラウザーで機能します。IE8でも。developer.mozilla.org/en-US/docs/Web/API/Console/error
Red

8

Firebugを使用していて、IE、Safari、またはOperaもサポートする必要がある場合、Firebug Liteはこれらのブラウザーにconsole.log()サポートを追加します。


2
うわぁ.. Firebug Liteは素晴らしい
デクスター


5

上記の「throw()」に関するメモ。それはページの実行を完全に停止するようです(私はIE8でチェックしました)ので、「進行中のプロセス」のロギング(特定の変数の追跡など)にはあまり役に立ちません。

私の提案はおそらく、ドキュメントのどこかにtextarea要素を追加し、必要に応じて情報をログに記録するためにその(テキストを変更する)を変更(または追加)することです...


OPの質問に答えなかったからだと思います。JSコンソールに印刷するには、あなたのような組み込みのメソッドを使用する必要がありconsole.log()throw()などはまた、の動作と何も間違っているthrow()あなたが暗示するように見えるよう-それは実行を停止しているという事実は、意図的かつ文書化(ある開発者。 mozilla.org/en-US/docs/Web/JavaScript/Reference/…)、他のプログラミング言語で例外がスロー/キャッチされる方法と一致しています。(実行を停止せずに変数の内容をログに記録する場合は、それconsole.log()が目的です。)
Beanを表示する

@SeantheBean、もともとIEがサポートしていないという事実についての議論がありましたconsole.log-それで人々は代わりを与えていました。throw()実行の停止については、もちろんそれは意図的なものであり、そうではないと誰も言っていません。つまり、通常だ理由ですません ... OPが望んランタイムでのデバッグ情報を、ログに記録するための良い方法
のYuval A.

5

いつものように、Internet Explorerはローラースケートの大きな象ですconsole.log()

jQueryのログは非常に簡単に変更できますが、どこにでも追加するのは面倒です。jQueryを使用している場合の1つの解決策は、最後にjQueryファイルに入れて、最初に縮小することです。

function log()
{
    if (arguments.length > 0)
    {
        // Join for graceful degregation
        var args = (arguments.length > 1) ? Array.prototype.join.call(arguments, " ") : arguments[0];

        // This is the standard; Firebug and newer WebKit browsers support this.
        try {
            console.log(args);
            return true;
        } catch(e) {
            // Newer Opera browsers support posting erros to their consoles.
            try {
                opera.postError(args);
                return true;
            } 
            catch(e) 
            {
            }
        }

        // Catch all; a good old alert box.
        alert(args);
        return false;
    }
}

これは現在jQueryの拡張機能として受け入れられていますが、例外をキャッチする前に「コンソール」および「オペラ」オブジェクトが存在するかどうかを確認する方が効率的ではないでしょうか?
ダニューブセーラー

:@lechlukasz私はあなたが拡張し、ちょうど使用にconsole.logのオーバーヘッドを加え、このIEのチェック救うことができると思いstackoverflow.com/questions/1215392/...
クリス・S


3

function foo() {
  function bar() {
    console.trace("Tracing is Done here");
  }
  bar();
}

foo();

console.log(console); //to print console object
console.clear('console.clear'); //to clear console
console.log('console.log'); //to print log message
console.info('console.info'); //to print log message 
console.debug('console.debug'); //to debug message
console.warn('console.warn'); //to print Warning
console.error('console.error'); //to print Error
console.table(["car", "fruits", "color"]);//to print data in table structure
console.assert('console.assert'); //to print Error
console.dir({"name":"test"});//to print object
console.dirxml({"name":"test"});//to print object as xml formate

To Print Error:- console.error('x=%d', x);

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");


1
console.log("your message here");

私のために働いています。これを探しています。Firefoxを使用しました。これが私のスクリプトです。

 $('document').ready(function() {
console.log('all images are loaded');
});

FirefoxとChromeで動作します。




0

これはコンソールに出力されませんが、いくつかのデバッグに役立つメッセージを含むアラートポップアップが開きます。

ただ:

alert("message");

それはOPが尋ねたことに共通するものではありません
Zefir Zdravkov

0

es6構文では、以下を使用できます。

console.log(`x = ${x}`);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.