1.情報を表示するコマンド
コードは次のとおりです。
<!doctype html> <html> <head> <title> common Consoleコマンド</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <script type = "text/javascript"> console.log( 'hello'); console.info( 'information'); console.error( 'error'); console.warn( 'arnaling'); </script> </body> </html>
最も一般的に使用されるConsole.logは、Console.logです。
2:プレースホルダー
上記のコンソールの濃度は、printfプレースホルダー形式をサポートしています。サポートされているプレースホルダーは、文字(%s)、整数(%dまたは%i)、浮動小数点数(%f)、およびオブジェクト(%o)です。
コードは次のとおりです。
<script type = "text/javascript"> console.log( "%d year%d month%d day"、2016、8、20); </script>
効果:
3。情報グループ
コードは次のとおりです。
<!doctype html> <html> <head> <title>共通コンソールコマンド</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <script type = "text/javascript"> console console.log( "ファーストグループアイテム1:私の技術ブログ(https://segmentfault.com/u/learnme)"); console.log( "ファーストグループアイテム2:my github(https://github.com/specialcoder/)"); console.groupend(); console.group( "2番目のグループ情報"); console.log( "2番目のグループファースト:プログラム愛好家"); console.log( "2番目のグループ2番目:Joeld to Joell"); console.groupend(); </script> </body> </html>
効果:
4.オブジェクトの情報を表示します
Console.dir()は、オブジェクトのすべてのプロパティとメソッドを表示できます。
コードは次のとおりです。
<script type = "text/javascript"> var info = {blog: "https://segmentfault.com/u/learnme/"、github: "https://github.com/specialcoder/"、メッセージ:「プログラム愛好家はあなたに参加する}; console.dir(info); </scrip効果:
5.ノードのコンテンツを表示します
console.dirxml()は、Webページのノードに含まれるHTML/XMLコードを表示するために使用されます。
コードは次のとおりです。
<!Doctype html> <html> <head> <title> common Consoleコマンド</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <div id = "info"> <h3>私のブログ愛好家、参加してください</p> </div> <script type = "text/javascript"> var info = document.getElementbyid( 'info'); console.dirxml(info); </script> </body> </html> </html>
効果:
6.変数が真であるかどうかを判断します
console.assert()は、式または変数が真であるかどうかを判断するために使用されます。結果がNOの場合、対応するメッセージがコンソールに出力され、例外がスローされます。
Assertは、プログラムの正確性を確保するための優れた機能です。デバッグツールを備えたブラウザでは、この機能はConsole.assert()を呼び出すことで実装できます。
コードは次のとおりです。
<script type = "text/javascript"> var result = 1; console.assert(result); var year = 2014; console.assert(year === 2018、 "assertion failed"); </script>
console.assert()ステートメントでは、最初のパラメーターは、実行する必要があるアサートの結果であり、通常の状況では真である必要があります。 2番目のパラメーターは、エラーが発生したときにコンソールに印刷されたエラーメッセージです。
1は非0値であり、それは真です。そして、2番目の判断は虚偽であり、エラーメッセージがコンソールに表示されます
結果を表示:
7.関数のコールトラックを追跡します
console.trace()は、関数のコールトラックを追跡するために使用されます。
コードは次のとおりです。
<script type = "text/javascript">/*関数の呼び出し方法、console.trace()メソッドを追加*/function add(a、b){console.trace(); a+bを返します。 } var x = add3(1,1);関数add3(a、b){return add2(a、b);}関数add2(a、b){return add1(a、b);}関数add1(a、b){return add(a、b);} </script>コンソール出力情報:
8。タイミング関数
Console.time()およびConsole.TimeEnd()は、コードの実行時間を表示するために使用されます。
コードは次のとおりです。
<script type = "text/javascript"> console.time( "count 1000*1000"); for(var i = 0; i <1000; i ++){for(var j = 0; j <1000; j ++){}} console.timeend( "count 1000*1000"); </script>実行時間は10.64msです
9。console.profile()のパフォーマンス分析
パフォーマンス分析(プロファイラー)は、プログラムの各部分の実行時間を分析し、ボトルネックを見つけることです。使用される方法は、console.profile()です。
コードは次のとおりです。
<script type = "text/javascript"> function all(){alert(11); for(var i = 0; i <10; i ++){funca(1000);} funcb(10000); } function funca(count){for(var i = 0; i <count; i ++){}} function funcb(count){for(var i = 0; i <count; i ++){}} console.profile( 'Performance Analyzer');全て(); console.profileand(); </script>LZテスト中に、すべて()にアラートが追加されておらず、コントロールバーが出力されなかったことを説明させてください。追加した後、パフォーマンス分析テーブルがありました。その理由はまだ明確ではありませんでした。ご存知の場合は、コメントできます。