1.情報を表示するコマンド
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<title>共通コンソールコマンド</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( '警告');
</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"、2011、3、26);
</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.group( "最初の情報グループ");
console.log( "First Group first:my xx(// www.vevb.com)");
console.log( "最初のグループ2:xxx(http://vevb.com)");
console.groupend();
console.group( "2番目の情報のグループ");
console.log( "2番目のグループ1:プログラム愛好家QQグループ:80535344");
console.log( "2番目のグループ2:Joeld to jove");
console.groupend();
</script>
</body>
</html>
効果:
4.オブジェクトの情報を表示します
Console.dir()は、オブジェクトのすべてのプロパティとメソッドを表示できます。
コードコピーは次のとおりです。
<script type = "text/javascript">
var info = {
ブログ:「// www.vevb.com」、
QQGROUP:80535344、
メッセージ:「プログラム愛好家はあなたを歓迎します」
};
console.dir(info);
</script>
効果:
5.ノードのコンテンツを表示します
console.dirxml()は、Webページのノードに含まれるHTML/XMLコードを表示するために使用されます。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<title>共通コンソールコマンド</title>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</head>
<body>
<div id = "info">
<h3>私のブログ:www.ido321.com </h3>
<p>プログラム愛好家:259280570、参加</p>へようこそ
</div>
<script type = "text/javascript">
var info = document.getElementById( 'Info');
console.dirxml(info);
</script>
</body>
</html>
効果:
6.変数が真であるかどうかを判断します
console.assert()は、式または変数が真であるかどうかを判断するために使用されます。結果がNOの場合、対応するメッセージがコンソールに出力され、例外がスローされます。
コードコピーは次のとおりです。
<script type = "text/javascript">
var result = 1;
console.assert(result);
var year = 2014;
console.assert(year == 2018);
</script>
1は非0値であり、それは真です。そして、2番目の判断は虚偽であり、エラーメッセージがコンソールに表示されます
7.関数のコールトラックを追跡します。
console.trace()は、関数のコールトラックを追跡するために使用されます。
コードコピーは次のとおりです。
<script type = "text/javascript">
/*関数の呼び出し方法、Console.trace()メソッドを追加するだけです*/
関数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( "コンソールタイマー1");
for(var i = 0; i <1000; i ++){
for(var j = 0; j <1000; j ++){}
}
Console.TimeEnd( "コンソールタイマー1");
</script>
実行時間は38.84msです
9。console.profile()のパフォーマンス分析
パフォーマンス分析(プロファイラー)は、プログラムの各部分の実行時間を分析し、ボトルネックを見つけることです。使用される方法は、console.profile()です。
コードコピーは次のとおりです。
<script type = "text/javascript">
function all(){
アラート(11);
for(var i = 0; i <10; i ++){
Funca(1000);
}
funcb(10000);
}
関数funca(count){
for(var i = 0; i <count; i ++){}
}
関数funcb(count){
for(var i = 0; i <count; i ++){}
}
console.profile( 'Performance Analyzer');
全て();
console.profileand();
</script>
LZテスト中に、すべて()にアラートが追加されておらず、コントロールバーが出力されなかったことを説明させてください。追加した後、パフォーマンス分析テーブルがありました。その理由はまだ明確ではありませんでした。ご存知の場合は、コメントできます。