web-dev-qa-db-ja.com

Console.logとは何ですか?

console.logの使い方は何ですか?

コード例を使用して、JavaScriptでの使用方法を説明してください。

397
Mihir

これはjQueryの機能ではなく、デバッグ目的の機能です。例えば何かが起こったときに何かをコンソールに記録することができます。例えば:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

ボタンをクリックすると、Firebugの[コンソール]タブ(または他のツールのコンソール - ChromeのWebインスペクタなど)に#someButton was clickedが表示されます。

何らかの理由で、コンソールオブジェクトが利用できない可能性があります。それが正しいかどうかを確認できます。実稼働環境にデプロイするときにデバッグコードを削除する必要がないので、これは便利です。

if (window.console && window.console.log) {
  // console is available
}
441
Jan Hančič

あなたがコンソールを見ることができる場所!それらすべてを1つの答えにまとめるだけです。

Firefox

http://getfirebug.com/

(Firefoxの内蔵開発ツールCtrl + Shift + J(ツール> Web開発者>エラーコンソール)を使用することもできますが、Firebugの方がはるかに優れています。Firebugを使用してください)。

SafariとChrome

基本的に同じです。

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.Apple.com/technologies/safari/developer-tools.html

インターネットエクスプローラ

互換モードを使用して、IE 9またはIE 10でIE 7およびIE 8をデバッグできることを忘れないでください。

http://msdn.Microsoft.com/ja-jp/library/ie/gg589507(v=vs.85).aspx

http://msdn.Microsoft.com/ja-jp/library/dd565628(v=vs.85).aspx

IE 7からIE 7のコンソールにアクセスする必要がある場合は、Firebug Liteブックマークレットを使用してください。

http://getfirebug.com/firebuglite/ /安定したブックマークレットを探す

http://en.wikipedia.org/wiki/Bookmarklet

オペラ

http://www.opera.com/dragonfly/

iOS

すべてのiPhone、iPod touch、iPadに対応しています。

http://developer.Apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

IOS 6では、デバイスを接続すればOS XのSafariでコンソールを表示できます。あるいは、エミュレータを使用して、Safariブラウザウィンドウを開いて「開発」タブに移動することもできます。そこにはSafariのインスペクタがあなたのデバイスと通信するためのオプションがあります。

Windows Phone、Android

どちらもコンソールを内蔵せず、ブックマークレット機能もありません。だから私たちは http://jsconsole.com/ type:listenを使います。そうすればあなたのHTMLに置くためのスクリプトタグが与えられます。それ以降は、jsconsole Webサイト内のコンソールを見ることができます。

iOSおよびAndroid

http://html.Adobe.com/Edge/inspect/ を使用して、便利なブラウザプラグインを使用して任意のデバイスのWebインスペクタツールおよびコンソールにアクセスすることもできます。


より古いブラウザの問題

最後の古いバージョンのIEは、コードでconsole.logを使用し、同時に開発者ツールを開かないとクラッシュします。幸いなことに、それは簡単な修正です。コードの上部にある以下のコードスニペットを使用してください。

 if(!window.console){ window.console = {log: function(){} }; } 

これは、コンソールが存在するかどうかを確認し、存在しない場合はlogという名前の空白関数を持つオブジェクトに設定します。このようにwindow.consoleとwindow.console.logは本当にundefined.ではありません

223
Fresheyeball

コードを調べるためにFirebugなどのツールを使用すれば、コンソールに記録されたメッセージを表示できます。あなたがこれをするとしましょう:

console.log('Testing console');

Firebug(またはコードの検査に使用するツール)のコンソールにアクセスすると、関数にログを記録するように指示されたメッセージが表示されます。これは、関数が実行されているのか、あるいは変数が正しく渡されているのか、正しく割り当てられているのかを確認したい場合に特に便利です。実際にコードの何が問題になっているのかを把握するのにはかなり便利です。

99
Fibericon

ブラウザのJavascriptコンソールにログメッセージを送ります。 FirebugまたはDeveloper Tools(Chrome/Safari)を実行すると、その実行元の行とファイルが表示されます。

さらに、jQueryオブジェクトを出力すると、DOM内のその要素への参照が含まれ、クリックすると[要素/ HTML]タブ内の参照に移動します。

さまざまな方法を使用できますが、Firefoxで機能させるにはFirebugを開く必要があります。そうしないとページ全体がクラッシュします。あなたがログに記録しているものが変数、配列、オブジェクトあるいはDOM要素であるかどうか、それはあなたに同様にオブジェクトのプロトタイプを含む完全な内訳を与えるでしょう(常にあきらめているのは面白いです)。あなたが望むようにできるだけ多くの引数を含めることもでき、それらはスペースに置き換えられます。

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

これらはコマンドごとに異なるロゴで表示されます。

console.profile(profileName);を使って、関数やスクリプトなどのプロファイリングを開始することもできます。そして、それをconsole.profileEnd(profileName);で終了すると、Chromeの[プロフィール]タブに表示されます(FFではわかりません)。

完全な参照のために http://getfirebug.com/logging に行ってください、そして私はあなたがそれを読むことを勧めます。 (トレース、グループ、プロファイリング、オブジェクト検査).

お役に立てれば!

80
Fred

JQueryとは何の関係もありません。あなたがそれを使用したいのであれば私はあなたがすることをお勧めします

if (window.console) {
    console.log("your message")
}

そのため、利用できない場合でもコードを壊すことはありません。

コメントで示唆されているように、それを1か所で実行してから通常どおりconsole.logを使用することもできます。

if (!window.console) { window.console = { log: function(){} }; }
32
Baptiste Pernet

console.logはjQueryとは関係ありません。スクリプトがデータ(またはほとんどの場合はオブジェクト)をJavaScriptコンソールに記録できるようにするのは、デバッガ(ChromeデバッガおよびFirebugを含む)によって提供される共通のオブジェクト/メソッドです。

22
Quentin

console.logは、デバッグ情報を一部のブラウザ(FirebugがインストールされたFirefox、Chrome、IE8、Firebug Liteがインストールされたもの)のコンソールに記録します。 Firefoxでは非常に強力なツールであり、オブジェクトを調べたり、HTML要素のレイアウトやその他のプロパティを調べたりすることができます。 jQueryとは関係ありませんが、jQueryと一緒に使用するときによく行われることが2つあります。

  • firebug用の FireQuery 拡張機能をインストールします。これは、他の利点の中でも特に、jQueryオブジェクトのロギングをより見やすくします。

  • jQueryの連鎖的なコード規約に沿ったラッパーを作成してください。

これは通常このようなことを意味します。

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

これを呼び出すことができます

$('foo.bar').find(':baz').log().hide();

jQueryチェーン内を簡単にチェックするため。

18
Tgr

console.logはjQueryとは関係ありません。

Firebugなどのデバッグコンソールにメッセージを記録します。

15
SLaks

ときどき混乱してしまうのは、console.logを使用してオブジェクトの1つのコンテンツと一緒にテキストメッセージを記録するには、2つのうち1つを異なる引数として渡す必要があるということです。これは、+演算子を使用して出力を連結すると、暗黙的にオブジェクトの.toString()メソッドが呼び出されるため、それらをコンマで区切る必要があることを意味します。ほとんどの場合、これは明示的にオーバーライドされておらず、Objectによって継承されたデフォルトの実装は有用な情報を提供していません。

コンソールで試す例:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

あなたがオブジェクトの内容と一緒に有益なテキストメッセージを連結しようとするなら、あなたが得るでしょうが一方で

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

そのため、console.logは実際には好きなだけ引数を取ります。

15
Thalis K.

ページにデバッグ情報を追加するには、console.logを使用します。

多くの人がこの目的のためにalert(hasNinjas)を使っていますが、console.log(hasNinjas)の方が作業が簡単です。警告を使用すると、ユーザーインターフェイスをブロックするモーダルダイアログボックスが表示されます。

編集: Baptiste Pernet および JanHančič に同意します。コンソールがない場合にコードが壊れないように、最初にwindow.consoleが定義されているかどうかを確認することをお勧めします。

12
Mark Byers

例 - あなたがあなたがあなたのプログラムを実行することができたコードのどの行(それが壊れる前に!)を知りたいと思うならば、単にタイプしなさい

console.log("You made it to line 26. But then something went very, very wrong.")
11

Firefoxの場合は Firebug 、または WebKit browsersの場合はJavaScriptコンソールを使用してJavaScriptコードをデバッグします。

var variable;

console.log(variable);

配列やオブジェクトであっても、変数の内容を表示します。

_ php _print_r($var);に似ています。

10
jondavidjohn

注意してください:あなたのプロダクションコードでコンソールへの呼び出しを残すことはあなたのサイトがInternet Explorerで壊れる原因となります。それを開封しないでください。 https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog を参照してください。

9
Harlo Holmes

初期の頃はJSのデバッグはalert()関数を通して行われていました - 今では時代遅れの慣習です。

console.log()は、 Webkit またはFirebugなど、デバッグコンソールにログオンするためのメッセージを書き込む関数です。ブラウザでは、画面には何も表示されません。デバッグコンソールにメッセージを記録します。 Firebugを搭載したFirefoxおよびWebkitベースのブラウザ(ChromeおよびSafari)でのみ利用可能です。 すべてのIEリリースでうまくいくとは限りません

コンソールオブジェクトはDOMの拡張です。

console.log()は開発とデバッグの間だけコードで使われるべきです。

本番サーバーのjavascriptファイルに誰かがconsole.log()を残すのは悪い習慣と考えられています。

7
jjpcondor

ご使用のブラウザがデバッグをサポートしている場合は、console.log()メソッドを使用してJavaScriptの値を表示できます。

でブラウザのデバッグを有効にします F12そして、デバッガメニューの「コンソール」を選択してください。

JavaScriptでコンソールします。機能していないJavaScriptプログラムを修正または「デバッグ」し、console.log()コマンドを使用して練習します。使用しているブラウザに基づいて、JavaScriptコンソールにアクセスするのに役立つショートカットがあります。

Chromeコンソールのキーボードショートカット

Windows: Ctrl + Shift + J
マック: Cmd + Option + J

Firefoxコンソールのキーボードショートカット

Windows: Ctrl + Shift + K
マック: Cmd + Option + K

Internet Explorerコンソールのキーボードショートカット

F12 キー

Safariコンソールのキーボードショートカット

Cmd + Option + C

4
S. Mayol

上記の使用法とは別に、console.lognode.jsで端末に出力することもできます。 expressなどで作成されたサーバーは、出力ロガーファイルに書き込むためにconsole.logを使用できます。

3
surajck

Firebug consoleに(あなたが渡すものは何でも)ログに記録するために使用されます。主な使い方はJavaScriptコードをデバッグすることです。

3
Poelinca Dorin

デバッグのためにconsole.logを起動すると、Webプログラミングはとても簡単になります。

var i;

私はiランタイムの値を確認したい場合は..

console.log(i);

firebugのコンソールタブでiの現在の値を確認することができます。これは特にデバッグに使用されます。

3
user1251300

特にconsole.logは、開発者がコードが何をしているのかを目立たないように開発者に知らせるためのコードを作成するための方法です。問題があることを警告するために使用できますが、コードのデバッグ時になると対話式デバッガの代わりになるべきではありません。その非同期性は、 ログ記録された値 がメソッドが呼び出されたときの値を必ずしも表していないことを意味します。

手短に言うと、console.logを使ってエラーをログに記録し(利用可能な場合)、選択したデバッガを使用してエラーを修正します。 Firebug 、WebKit Developer Tools( Safari および Chrome内蔵) )、IE開発者ツールまたはVisual Studio。

3
outis

Javaスクリプトには、入出力機能はありません。そのため、コードをデバッグするためにconsole.log()メソッドが使用されます。コンソールログ(開発ツール)の下に印刷されます。

IE開発ツールを開くまでは、IE 8以降にはありません。

1
NavyaKumar