jsデバッグツールの詳しい解説コンソールコマンド_javascriptスキル-jsチュートリアル-php.cn

jsデバッグツールの詳しい解説コンソールコマンド_javascriptスキル

WBOY

リリース： 2016-05-16 16:33:10

オリジナル

1364 人が閲覧しました

1. 情報を表示するコマンド

コードをコピーしますコードは次のとおりです:

<頭>
一般的なコンソールコマンド

<スクリプトタイプ="text/javascript">
console.log('hello');
console.info('情報');
console.error('エラー');
console.warn('警告');

最も一般的に使用されるのは console.log です。

2: プレースホルダー

上記の集中コンソールは printf のプレースホルダー形式をサポートしています。サポートされているプレースホルダーは次のとおりです: 文字 (%s)、整数 (%d または %i)、浮動小数点数 (%f)、およびオブジェクト (%o)

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">

console.log("%d 年 %d 月 %d 日",2011,3,26);

効果:

3. 情報のグループ化

コードをコピーコードは次のとおりです:

<頭>
一般的なコンソールコマンド

<スクリプトタイプ="text/javascript">
console.group("最初の情報グループ");

console.log("最初のグループの最初の項目: 私の XX (http://www.jb51.net)");

console.log("最初のグループの 2 番目の項目: xxx(http://jb51.net)");

console.groupEnd();

console.group("2 番目の情報グループ");

console.log("第 2 グループ 1: プログラム愛好家 QQ グループ: 80535344");

console.log("第 2 グループ 2: 参加へようこそ");

console.groupEnd();

効果:

4. オブジェクト情報を表示します

console.dir() は、オブジェクトのすべてのプロパティとメソッドを表示できます。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">

var info = {
ブログ:"
http://www.jb51.net
", QQグループ:80535344、メッセージ:「プログラム愛好家の方はぜひご参加ください」
};
console.dir(情報);

効果:

5. ノードのコンテンツを表示します

console.dirxml() は、Web ページのノードに含まれる html/xml コードを表示するために使用されます。

コードをコピーコードは次のとおりです:

<頭>
一般的なコンソールコマンド

私のブログ: www.ido321.com>

プログラム愛好家: 259280570、参加歓迎

<スクリプトタイプ="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);

効果:

6. 変数が true かどうかを判断します

console.assert() は、式または変数が true かどうかを判断するために使用されます。結果が「いいえ」の場合、対応するメッセージがコンソールに出力され、例外がスローされます。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">

var 結果 = 1;

console.assert(結果);

var year = 2014;

console.assert(年 == 2018 );

1 はゼロ以外の値であり、2 番目の判定が false の場合、コンソールにエラーメッセージが表示されます。

7. 関数の呼び出しトレースを追跡します。

console.trace() は、関数の呼び出しトレースをトレースするために使用されます。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="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);}

function add1(a,b){return add(a,b);}

コンソール出力情報:

8. タイミング機能

console.time() と console.timeEnd() は、コードの実行時間を表示するために使用されます。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">

console.time("コンソールタイマー 1");

for(var i=0;i
for(var j=0;j
}

console.timeEnd("コンソールタイマー 1");

実行時間は 38.84 ミリ秒です

9. console.profile() のパフォーマンス分析

パフォーマンス分析 (プロファイラー) は、プログラムの各部分の実行時間を分析し、ボトルネックがどこにあるのかを見つけるために使用されるメソッドは console.profile() です。

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 All(){
アラート(11);
for(var i=0;i funcA(1000);
}
funcB(10000);
}

関数 funcA(count){
for(var i=0;i }

関数 funcB(count){
for(var i=0;i }

console.profile('パフォーマンスアナライザー');
すべて();
console.profileEnd();

LZ テスト中に All() にアラートが追加されず、追加後にパフォーマンス分析テーブルが表示されなかったことを説明します。その理由はまだ明らかではありません。コメントできます。

jsデバッグツールの詳しい解説 コンソールコマンド_javascriptスキル

私のブログ: www.ido321.com> プログラム愛好家: 259280570、参加歓迎

jsデバッグツールの詳しい解説コンソールコマンド_javascriptスキル

私のブログ: www.ido321.com>

プログラム愛好家: 259280570、参加歓迎