回答:
これは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
}
if (console.log)
(またはif (console && console.log)
)でも、コンソールが利用できない場合はエラーをスローします。window.console
(window
存在することが保証されている)を使用して、一度に1つの深度レベルのみをチェックする必要があります。
本体が見える場所!それらすべてを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
インターネットエクスプローラ
互換モードを使用して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で動作します。
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.
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に アクセスしてください。(トレース、グループ、プロファイリング、オブジェクト検査)。
お役に立てれば!
console.log("x:", x)
より良いですconsole.log("x:" + x)
か?a ,
はaよりも読みやすいので、エラーが発生しにくい+
ですか?
+
、厳密に使用しているはずですが、コンソール関数でコンマを使用できることを示したいと思います。また、両方の変数が整数または配列の場合の問題も回避されます。
console.log("x:", x)
はx
オブジェクトまたは配列(または文字列以外)の場合、文字列に変換せずに正しく表示されるため、はるかに優れています。
jQueryとは何の関係もありません。それを使用したい場合は、実行することをお勧めします
if (window.console) {
console.log("your message")
}
したがって、コードが利用できない場合でも、コードを壊すことはありません。
コメントで提案されているように、それを1か所で実行して、console.log
通常どおり使用することもできます。
if (!window.console) { window.console = { log: function(){} }; }
if(!window.console){ window.console = function(){}; }
代わりに1つの場所で代わりにconsole.logを通常どおり使用することをお勧めします。
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チェーンの内部を簡単にチェックします。
混乱のポイントは、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は実際には好きなだけ引数を取ることに注意してください。
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.")
これを使用して、Firefox用のFirebug、またはWebKitブラウザーのJavaScriptコンソールでJavaScriptコードをデバッグします。
var variable;
console.log(variable);
配列やオブジェクトであっても、変数の内容を表示します。
それはに類似しているprint_r($var);
ためPHP。
if (!window.console) { window.console = { log : function() {} }; }
。これにより、時々発生するデバッグステートメントを削除するのを忘れることがなくなります。
注意:コンソールへの呼び出しを運用コードに残すと、サイトが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()
唯一の開発とデバッグの際にコードで使用する必要があります。
console.log()
運用サーバーのjavascriptファイルに誰かが残しておくことは悪い習慣だと考えられています。
ブラウザーがデバッグをサポートしている場合は、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
console.log
具体的には、開発者がコードを書いて何をしているかを開発者に目立たないように通知する方法です。これは、問題があることを警告するために使用できますが、コードをデバッグするときにインタラクティブデバッガーに代わるものではありません。その非同期の性質は、ログに記録された値がメソッドが呼び出されたときの値を必ずしも表すとは限らないことを意味します。
簡単に言うと、console.log
(可能な場合)でエラーをログに記録し、選択したデバッガーを使用してエラーを修正します:Firebug、WebKit開発者ツール(SafariおよびChromeに組み込まれています)、IE開発者ツール、またはVisual Studio。
Javaスクリプトには、入力関数と出力関数はありません。そのため、コードをデバッグするためにconsole.log()メソッドが使用されます。これはロギング用のメソッドです。コンソールログ(開発ツール)の下に出力されます。
IE開発ツールを開くまで、IE8以下には存在しません。
これはjQueryを扱うものではありません。console.log()
ブラウザのコンソールに情報を記録するための方法を提供し、コンソールオブジェクトのログ機能に参照しています。これらのメソッドは、デバッグ目的でのみ使用することを目的としており、エンドユーザーへの情報の提示に依存すべきではありません。