console.logとは何ですか?


回答:


454

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

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

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

いくつかの理由により、コンソールオブジェクトが使用できない場合があります。次に、それが正しいかどうかを確認できます。これは、本番環境にデプロイするときにデバッグコードを削除する必要がないので便利です。

if (window.console && window.console.log) {
  // console is available
}

17
Google Chromeのデベロッパーツールにもコンソールが統合されています。
RobertPitt、2007

8
「本番環境にデプロイするときにデバッグコードを削除する必要がないため、これは便利です」<-エンドユーザーがFirebugを開いた場合はどうなりますか?
AbdullahC

6
また、コンソールが定義されていないためにIEがエラーをスローしないようにするのにも役立ちます
Alan Whitelaw

4
Imho、console.logが使用可能かどうかを毎回確認するよりも、次のようなものを使用する方がよい:if(typeof(console)== 'undefined'){console = {'log':function(){return}}} Inこのような場合、必要に応じてconsole.logの存在を確認せずに書き込むことができます。
Enrico Carlesso 2011年

12
if (console.log)(またはif (console && console.log))でも、コンソールが利用できない場合はエラーをスローします。window.consolewindow存在することが保証されている)を使用して、一度に1つの深度レベルのみをチェックする必要があります。
Tgr

226

本体が見える場所!それらすべてを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

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

互換モードを使用してIE9またはIE10でIE7およびIE8をデバッグできることを忘れないでください。

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

IE7のIE6でコンソールにアクセスする必要がある場合は、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検査ツールとコンソールにアクセスできます。


古いブラウザの問題

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

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

これにより、コンソールが存在するかどうかが確認され、存在しない場合は、という空の関数が呼び出されたオブジェクトに設定されますlog。このようにwindow.consoleとwindow.console.logは決してundefined.


26
間違っている場合は修正してください。ただし、コンソールを表示するのにFirefoxのFirebugは必要ないと思います。Ctrl+ Shift + J([ツール]> [Web開発]> [エラーコンソール])をクリックするだけ
Dane411

4
@ Dane411これは本当ですが、firebugの方がよく、より一般的に使用されています。
Fresheyeball 2013年

3
@Fresheyeball誰かがすべてのがらくたを一掃する必要がありますが、それらの担当者を集めて実際にコミュニティを清潔に保つことは、ある時点で面白くなくなると思います。
andlrc 2013年

2
この回答に反対票を投じた人はコメントしてください。コメントのない
反対投票

window.console.logの前にwindow.dumpがありました。空のログ機能より優れています
OCTAGRAM 2013年

100

Firebugなどのツールを使用してコードを検査すると、コンソールに記録されたメッセージを表示できます。これを行うとしましょう:

console.log('Testing console');

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


10
IEのエラーを回避するために、最初に定義することを忘れないでください:stackoverflow.com/a/7585409/318765
mgutt

83

ブラウザの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に アクセスしてください(トレース、グループ、プロファイリング、オブジェクト検査)。

お役に立てれば!


1
なぜconsole.log("x:", x)より良いですconsole.log("x:" + x)か?a ,はaよりも読みやすいので、エラーが発生しにくい+ですか?
ケビンメレディス

私の意見では、さまざまなものを出力しているときは、少し読みやすいでしょう。この場合+、厳密に使用しているはずですが、コンソール関数でコンマを使用できることを示したいと思います。また、両方の変数が整数または配列の場合の問題も回避されます。
Fred

5
console.log("x:", x)xオブジェクトまたは配列(または文字列以外)の場合、文字列に変換せずに正しく表示されるため、はるかに優れています。
Josef Kufner、2014

34

jQueryとは何の関係もありません。それを使用したい場合は、実行することをお勧めします

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

したがって、コードが利用できない場合でも、コードを壊すことはありません。

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

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

18
if(!window.console){ window.console = function(){}; }代わりに1つの場所で代わりにconsole.logを通常どおり使用することをお勧めします。
Fresheyeball 2013年

23

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


19

console.log一部のブラウザー(FirebugがインストールされたFirefox、Firebug LiteがインストールされたChrome、IE8など)のコンソールにデバッグ情報を記録します。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チェーンの内部を簡単にチェックします。


16

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

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


16

混乱のポイントは、console.logを使用してオブジェクトの1つのコンテンツと一緒にテキストメッセージをログに記録するには、2つのそれぞれを異なる引数として渡す必要があることです。つまり、+演算子を使用して出力を連結する.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は実際には好きなだけ引数を取ることに注意してください。


13

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

多くの人alert(hasNinjas)がこの目的で使用しますがconsole.log(hasNinjas)、扱いが簡単です。警告を使用すると、ユーザーインターフェイスをブロックするモーダルダイアログボックスがポップアップします。

編集:私はBaptiste PernetJanHančičに同意しwindow.consoleます。使用可能なコンソールがない場合にコードが壊れないように、が最初に定義されているかどうかを確認することは非常に良い考えです。


12

例-プログラムが実行できた(壊れる前の)コード行を知りたい場合は、次のように入力します。

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

11

これを使用して、Firefox用のFirebug、またはWebKitブラウザーのJavaScriptコンソールでJavaScriptコードをデバッグます。

var variable;

console.log(variable);

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

それはに類似しているprint_r($var);ためPHP


3
便利なヒント...私は常に、グローバルにアクセス可能なjavascriptファイルに以下を含めますif (!window.console) { window.console = { log : function() {} }; }。これにより、時々発生するデバッグステートメントを削除するのを忘れることがなくなります。
roufamatic

@roufamaticわからない...属していないコードを処理するためにコードを追加することは、かなりひどい解決策のようです...特に検索/置換が非常に簡単な場合...
jondavidjohn

10

注意:コンソールへの呼び出しを運用コードに残すと、サイトがInternet Explorerで機能しなくなります。開封しないでください。参照:https : //web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
Windowsマシンを使用している場合はコンソールログが壊れますが、Internet Explorerを使用している場合はサイトが壊れます。
クリスホレン

回答で参照されているブログはもう存在しないと思います。
通徳2017

元のリンクは無効です。Webアーカイブのコピーを見つけました。
アレックス

8

当初、JSデバッグはalert()関数を介して実行されていましたが、現在では廃止されています。

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

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

console.log()唯一の開発とデバッグの際にコードで使用する必要があります。

console.log()運用サーバーのjavascriptファイルに誰かが残しておくことは悪い習慣だと考えられています。


5

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

を使用してブラウザーでデバッグをアクティブにF12し、デバッガーメニューで[コンソール]を選択します。

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

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

Windows:Ctrl+ Shift+ J
Mac:Cmd+ Option+J

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

Windows:Ctrl+ Shift+ K
Mac:Cmd+ Option+K

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

F12 キー

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

Cmd+ Option+C


4

console.log具体的には、開発者がコードを書いて何をしているかを開発者に目立たないように通知する方法です。これは、問題があることを警告するために使用できますが、コードをデバッグするときにインタラクティブデバッガーに代わるものではありません。その非同期の性質は、ログに記録された値がメソッドが呼び出されたときの値を必ずしも表すとは限らないことを意味します

簡単に言うと、console.log(可能な場合)でエラーをログに記録し、選択したデバッガーを使用してエラーを修正します:Firebug、WebKit開発者ツール(SafariおよびChromeに組み込まれています)、IE開発者ツール、またはVisual Studio。


4

console.logデバッグを始めるとき、私は本当にWebプログラミングを簡単に感じます。

var i;

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

console.log(i);

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



4

上記の使用法とは別にconsole.log、で端末に印刷することもできnode.jsます。(たとえば)で作成されたサーバーconsole.logは、出力ロガーファイルへの書き込みに使用できます。


2

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

IE開発ツールを開くまで、IE8以下には存在しません。


2

これはjQueryを扱うものではありません。console.log()ブラウザのコンソールに情報を記録するための方法を提供し、コンソールオブジェクトのログ機能に参照しています。これらのメソッドは、デバッグ目的でのみ使用することを目的としており、エンドユーザーへの情報の提示に依存すべきではありません。

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