console.log
の使い方は何ですか?
コード例を使用して、JavaScriptでの使用方法を説明してください。
これは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
}
あなたがコンソールを見ることができる場所!それらすべてを1つの答えにまとめるだけです。
Firefox
(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に対応しています。
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.
ではありません
コードを調べるためにFirebugなどのツールを使用すれば、コンソールに記録されたメッセージを表示できます。あなたがこれをするとしましょう:
console.log('Testing console');
Firebug(またはコードの検査に使用するツール)のコンソールにアクセスすると、関数にログを記録するように指示されたメッセージが表示されます。これは、関数が実行されているのか、あるいは変数が正しく渡されているのか、正しく割り当てられているのかを確認したい場合に特に便利です。実際にコードの何が問題になっているのかを把握するのにはかなり便利です。
ブラウザの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 に行ってください、そして私はあなたがそれを読むことを勧めます。 (トレース、グループ、プロファイリング、オブジェクト検査).
お役に立てれば!
JQueryとは何の関係もありません。あなたがそれを使用したいのであれば私はあなたがすることをお勧めします
if (window.console) {
console.log("your message")
}
そのため、利用できない場合でもコードを壊すことはありません。
コメントで示唆されているように、それを1か所で実行してから通常どおりconsole.log
を使用することもできます。
if (!window.console) { window.console = { log: function(){} }; }
console.log
はjQueryとは関係ありません。スクリプトがデータ(またはほとんどの場合はオブジェクト)をJavaScriptコンソールに記録できるようにするのは、デバッガ(ChromeデバッガおよびFirebugを含む)によって提供される共通のオブジェクト/メソッドです。
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チェーン内を簡単にチェックするため。
console.log
はjQueryとは関係ありません。
Firebugなどのデバッグコンソールにメッセージを記録します。
ときどき混乱してしまうのは、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は実際には好きなだけ引数を取ります。
ページにデバッグ情報を追加するには、console.log
を使用します。
多くの人がこの目的のためにalert(hasNinjas)
を使っていますが、console.log(hasNinjas)
の方が作業が簡単です。警告を使用すると、ユーザーインターフェイスをブロックするモーダルダイアログボックスが表示されます。
編集: Baptiste Pernet および JanHančič に同意します。コンソールがない場合にコードが壊れないように、最初にwindow.console
が定義されているかどうかを確認することをお勧めします。
例 - あなたがあなたがあなたのプログラムを実行することができたコードのどの行(それが壊れる前に!)を知りたいと思うならば、単にタイプしなさい
console.log("You made it to line 26. But then something went very, very wrong.")
注意してください:あなたのプロダクションコードでコンソールへの呼び出しを残すことはあなたのサイトがInternet Explorerで壊れる原因となります。それを開封しないでください。 https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog を参照してください。
初期の頃はJSのデバッグはalert()
関数を通して行われていました - 今では時代遅れの慣習です。
console.log()
は、 Webkit またはFirebugなど、デバッグコンソールにログオンするためのメッセージを書き込む関数です。ブラウザでは、画面には何も表示されません。デバッグコンソールにメッセージを記録します。 Firebugを搭載したFirefoxおよびWebkitベースのブラウザ(ChromeおよびSafari)でのみ利用可能です。 すべてのIEリリースでうまくいくとは限りません 。
コンソールオブジェクトはDOMの拡張です。
console.log()
は開発とデバッグの間だけコードで使われるべきです。
本番サーバーのjavascriptファイルに誰かがconsole.log()
を残すのは悪い習慣と考えられています。
ご使用のブラウザがデバッグをサポートしている場合は、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
上記の使用法とは別に、console.log
はnode.js
で端末に出力することもできます。 expressなどで作成されたサーバーは、出力ロガーファイルに書き込むためにconsole.log
を使用できます。
Firebug consoleに(あなたが渡すものは何でも)ログに記録するために使用されます。主な使い方はJavaScriptコードをデバッグすることです。
デバッグのためにconsole.log
を起動すると、Webプログラミングはとても簡単になります。
var i;
私はi
ランタイムの値を確認したい場合は..
console.log(i);
firebugのコンソールタブでi
の現在の値を確認することができます。これは特にデバッグに使用されます。
特にconsole.log
は、開発者がコードが何をしているのかを目立たないように開発者に知らせるためのコードを作成するための方法です。問題があることを警告するために使用できますが、コードのデバッグ時になると対話式デバッガの代わりになるべきではありません。その非同期性は、 ログ記録された値 がメソッドが呼び出されたときの値を必ずしも表していないことを意味します。
手短に言うと、console.log
を使ってエラーをログに記録し(利用可能な場合)、選択したデバッガを使用してエラーを修正します。 Firebug 、WebKit Developer Tools( Safari および Chrome内蔵) )、IE開発者ツールまたはVisual Studio。
Javaスクリプトには、入出力機能はありません。そのため、コードをデバッグするためにconsole.log()メソッドが使用されます。コンソールログ(開発ツール)の下に印刷されます。
IE開発ツールを開くまでは、IE 8以降にはありません。