JavaScriptプログラムのデバッグでは、console.log()を使用することは、alert()よりも優れた方法です。Alert()関数はJavaScriptプログラムの実行をブロックし、副作用を引き起こすためです。 console.log()は、コンソールに関連情報のみを印刷するため、同様の懸念を引き起こすことはありません。
console.log()とは何ですか?
ブラウザの非常に古いバージョンを除いて、最近のほとんどのブラウザにはデバッグ機能が付属しています。デバッグ機能がない場合でも、プラグインをインストールすることで補充できます。たとえば、Firefoxの古いバージョンにはデバッグツールが付属していません。この場合、FireBugプラグインをインストールして、デバッグ機能を追加できます。デバッグ機能を備えたブラウザでは、デバッグツールのコンソールを参照して、コンソールという名前のメンバー変数がウィンドウオブジェクトに登録されます。コンソールオブジェクトのログ()関数を呼び出すことにより、コンソールに情報を印刷できます。たとえば、次のコードでは、コンソールに「サンプルログ」を印刷します。
コードコピーは次のとおりです。
window.console.log( "サンプルログ");
上記のコードはウィンドウオブジェクトを無視し、次のように直接省略できます。
コードコピーは次のとおりです。
console.log( "サンプルログ");
console.log()は、任意の文字列、番号、およびjavaScriptオブジェクトを受け入れることができます。 alert()関数と同様に、console.log()もnewlines/nおよびtab文字/tを受け入れることができます。
console.log()ステートメントに印刷されたデバッグ情報は、ブラウザのデバッグコンソールで見ることができます。各ブラウザの特定の表示方法については、次のWebページを参照してください。
http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-ise-it
console.log()の動作は、ブラウザごとに異なる場合があります。この記事では、主にfirebugでのconsole.log()の使用について説明します。
デバッグコンソールのないブラウザと互換性があります
デバッグコンソールのない古いブラウザの場合、ウィンドウにコンソールオブジェクトが存在しないため、Console.log()ステートメントを直接使用すると、ブラウザ内にエラー(NULLポインターエラー)が発生し、最終的には古いブラウザでクラッシュします。この問題を解決するために、コンソールオブジェクトを手動で定義し、コンソールオブジェクトのログ関数が空の関数であることを宣言できます。このようにして、Console.log()ステートメントが実行されると、ブラウザのこれらの古いバージョンは何もしません。
コードコピーは次のとおりです。
if(!window.console){
window.console = {log:function(){}};
}
ただし、ほとんどの場合、この互換性の作業を行う必要はありません - console.log()などのデバッグコードを最終製品コードから削除する必要があります。
使用パラメーター
Alert()関数と同様に、Console.log()は変数を受け入れ、他の文字列でスプライスすることもできます。
コードコピーは次のとおりです。
//変数を使用します
var name = "bob";
console.log( "名前は:" + name);
alert()関数とは異なり、Console.log()は、文字列に渡すパラメーターとして変数を受け入れることもでき、その特定の構文はC言語のprintf構文と一致しています。
コードコピーは次のとおりです。
//パラメーターを使用します
var people = "alex";
var years = 42;
console.log( "%sは%d歳年齢です。"、人、年);
上記のコードの実行結果は、「アレックスは42歳です」です。
他のログレベルを使用します
Console.log()に加えて、FireBugは、デバッグ、情報、警告、エラーのさまざまなログレベルもサポートしています。次のコードでは、これらの異なるログレベルをコンソールに印刷します。
コードコピーは次のとおりです。
//異なるロギングレベルを使用します
console.log( "log level");
console.debug( "デバッグレベル");
console.info( "情報レベル");
console.warn( "Warn level");
console.error( "エラーレベル");
FireBugコンソールから、異なるログレベルでの印刷情報の色とアイコンが異なることがわかります。同時に、コンソールで異なるログレベルを選択して、この情報をフィルタリングできます。