知っておくべき 19 の実用的なコンソール デバッグのヒント!

みなさんこんにちは、CUGGZです。

ブラウザの開発者ツールは、DOM ツリー構造の表示、CSS スタイルのデバッグ、アニメーションのデバッグ、JavaScript コードのブレークポイントのデバッグなどに使用できる強力なデバッグ システムを提供します。今日は、コンソール デバッグのための実用的なデバッグ手法をいくつか見ていきます。

現在、私たちのプロジェクト開発では、React や Vue などのフロントエンドフレームワークを使用するのが一般的であり、フロントエンドのデバッグはより困難になっています。React DevTools や Vue DevTools などのプラグインを使用することに加えて、最もよく使用されるのは console.log() です。もちろん、ほとんどの場合、console.log() でニーズを満たすことができますが、データが複雑になると、console.log() は少し単調になります。実際、コンソール オブジェクトには多くのメソッドが用意されています。コンソール オブジェクトに含まれるメソッドは次のとおりです。

コンソール オブジェクトは、ブラウザー コンソールのデバッグ用のインターフェイスを提供します。任意のグローバル オブジェクトからアクセスできます。通常、console.log() を使用していくつかの変数を出力するだけであれば、コンソールの強力な機能を使用したことがない可能性があります。次に、コンソールを使用してさまざまな方法でデバッグする方法を紹介します。

1. 基本的な印刷

1. コンソール.log()

console.log() は最も基本的かつ最もよく使用される使用法です。これは JavaScript コードのどこでも使用でき、ブラウザ コンソールで出力された情報を確認できます。基本的な使い方は以下のとおりです。

名前を"CUGGZ" とします。
年齢を18 とします。
コンソール.log (名前) // CUGGZ
コンソール.log (名前,年齢) // CUGGZ 18
 console .log ( "メッセージ: " ,名前,年齢) //メッセージ: CUGGZ 18

さらに、console.log() は次の出力メソッドもサポートしています。

名前を"CUGGZ" とします。
年齢を18 とします。
高さを180 とします。
 console .log ( '名前: %s、年齢: %d' 、 name 、 age ) //名前: CUGGZ 、年齢: 18
 console .log ( '年齢: %d, 身長: %d' , age , height ) //年齢: 18 ,身長: 180

ここでは、前のプレースホルダーの位置に次の変数が割り当てられており、それらは 1 対 1 で対応しています。この書き方により、出力が複雑な場合でもテンプレートとデータの分離が保証され、構造がより明確になります。しかし、単純な出力であれば、このように記述する必要はありません。 console.log でサポートされているプレースホルダーの形式は次のとおりです。

• 文字列: %s
• 整数: %d
• 浮動小数点数: %f
• ターゲット: %o または %O
• CSS スタイル: %c

ご覧のとおり、最も基本的なタイプに加えて、CSS スタイルの定義もサポートされています。

名前を"CUGGZ" とします。
 console .log ( '私の名前は %cCUGGZ です' , 'color: skyblue; font-size: 30px;' )

印刷結果は以下のようになります（役に立たないようです）：

このスタイルの印刷は、画像を印刷して画像が正しいかどうかを確認する場合に役立ちます。

コンソール.log ( '%c ' , 'background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;' ) ;

印刷結果は次のとおりです。

厳密に言うと、console.log() は画像の印刷をサポートしていませんが、CSS 背景画像を使用して画像を印刷することができます。ただし、画像の幅と高さの属性の設定をサポートしていないため、直接印刷することはできません。そのため、line-heigh と padding を使用して画像を拡大し、正常に表示できるようにする必要があります。

次のように、console.log() を使用して文字の描画を印刷できます。

オンラインの文字描画生成ツールを使用して、生成された文字を console.log() に貼り付けることができます。オンラインツール: mg2txt。私のアバター生成の効果は次のとおりです。中央のものは生成されたキャラクターです。

さらに、プレースホルダーがオブジェクトを表す場合、%c または %C という 2 つの書き方があることがわかります。この 2 つの違いは何でしょうか。指定するオブジェクトが通常のオブジェクトの場合、両者に違いはありません。DOM ノードの場合は違いがあります。次の例を見てみましょう。

ご覧のとおり、%o を使用すると、子ノードを含む DOM ノードのコンテンツが出力されます。 %O は DOM ノードのオブジェクト プロパティを出力します。これは必要に応じて選択的に出力できます。

2. コンソール.warn()

console.warn() メソッドは、警告情報をコンソールに出力するために使用されます。使用方法は console.log とまったく同じですが、表示スタイルが少し異なります。警告を示すために、情報の前に黄色の三角形が追加されます。

 const app = [ "facebook" 、 "google" 、 "twitter" ] ;
コンソール.warn (アプリ) ;

印刷スタイルは次のとおりです。

3. コンソール.エラー()

console.error() を使用すると、エラー情報をコンソールに出力できます。上記の 2 つの方法と同じように使用しますが、表示スタイルが異なります。

 const app = [ "facebook" 、 "google" 、 "twitter" ] ;
コンソール.error (アプリ) ;

console.exception() は console.error() のエイリアスであり、それらの機能は同一であることに注意してください。

もちろん、console.error() には console.log() にはない別の関数があります。それは、関数呼び出しスタックを出力することです。

関数a ( ) {
 b （ ） ;
 }
関数b （ ） {
 コンソール.error ( "エラー" ) ;
 }
関数c ( ) {
 （ ） ;
 }
 （ ） ;

印刷結果は次のとおりです。

ご覧のとおり、関数呼び出しスタック情報はここに出力されます: b→a→c。

コンソール オブジェクトは、関数呼び出しスタックを印刷するための特別なメソッド (console.trace()) を提供します。これについては、以下で紹介します。

4. コンソール.info()

console.info() は情報を印刷するために使用できます。これは console.log() と同じように使用され、印刷される結果も同じです。

2. 印刷時間

1. console.time() と console.timeEnd()

コードの実行時間を取得したい場合は、コンソール オブジェクトの console.time() メソッドと console.timeEnd() メソッドを使用できます。次の例を見てみましょう。

コンソール.time ( ) ;

タイムアウトを設定する( ( ) => {
 コンソール.timeEnd ( ) ;
 } 、 1000 ） ;

 //デフォルト: 1001.9140625ミリ秒

これらすべてに、タイマーを一意に識別する文字列である単一のパラメータを渡すことができます。ページにタイマーが 1 つしかない場合は、このパラメータを渡す必要はありません。タイマーが複数ある場合は、このタグを使用して各タイマーをマークする必要があります。

コンソール.time ( "timer1" ) ;
コンソール.time ( "timer2" ) ;

タイムアウトを設定する( ( ) => {
 コンソール.timeEnd ( "timer1" ) ;
 } 、 1000 ） ;

タイムアウトを設定する( ( ) => {
 コンソール.timeEnd ( "timer2" ) ;
 } 、 2000年） ;

 //タイマー1 : 1004.666259765625ミリ秒
//タイマー2 : 2004.654052734375ミリ秒

2. コンソール.timeLog()

ここでの console.timeLog() は上記の console.timeEnd() と似ていますが、いくつか違いがあります。これらすべては、タイマーを開始するには console.time() を使用する必要があります。次に、console.timeLog() はタイマーの現在の時刻を出力し、console.timeEnd() は終了時刻までのタイマーを出力します。例を見てみましょう:

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

タイムアウトを設定する( ( ) => {
 コンソール.timeLog ( "タイマー" )
 タイムアウトを設定する( ( ) => {
 コンソール.timeLog ( "タイマー" ) ;
 } 、 2000年） ;
 } 、 1000 ） ;

 //タイマー: 1002.80224609375ミリ秒
//タイマー: 3008.044189453125ミリ秒

console.timeEnd() を使用する場合:

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

タイムアウトを設定する( ( ) => {
 コンソール.timeEnd ( "タイマー" )
 タイムアウトを設定する( ( ) => {
 コンソール.timeLog ( "タイマー" ) ;
 } 、 2000年） ;
 } 、 1000 ） ;

印刷結果は次のとおりです。

ご覧のとおり、現在のタイマーが終了するため、内部の timeLog はタイマー カウンターを見つけられなくなります。したがって、両者の違いは、現在のタイミングが終了するかどうかにあります。

3. グループ印刷

1. console.group() と console.groupEnd()

これら 2 つの方法は、コンソールにメッセージ グループを作成するために使用されます。完全なメッセージ グループは console.group() で始まり、console.groupEnd() で終わります。次の例を見てみましょう。

コンソール.group ( ) ;
 console .log ( '最初のグループ' ) ;
コンソール.group ( ) ;
コンソール.log ( '2 番目のグループ' )
コンソール.groupEnd ( ) ;
コンソール.groupEnd ( ) ;

印刷結果は次のとおりです。

もっと複雑なものを見てみましょう:

コンソール.group ( "アルファベット" )
 コンソール.log ( "A" ) ;
 コンソール.log ( "B" ) ;
 コンソール.log ( "C" ) ;
 コンソール.group ( "数値" ) ;
 コンソール.log ( "1" ) ;
 コンソール.log ( "2" ) ;
 コンソール.groupEnd ( "数値" ) ;
コンソール.groupEnd ( "アルファベット" ) ;

印刷結果は次のとおりです。

ご覧のとおり、これらのグループはネストできます。現在、多くのデバッグ出力をデバッグする必要があるため、グループ出力を使用することを選択できます。

2. コンソール.groupCollapsed()

console.groupCollapsed() メソッドは console.group() に似ており、どちらもグループを終了するには console.groupEnd() が必要です。違いは、このメソッドによって出力される情報はデフォルトで折りたたまれるのに対し、group() はデフォルトで展開される点です。上記の例を書き直してみましょう。

コンソール.groupCollapsed ( "アルファベット" )
 コンソール.log ( "A" ) ;
 コンソール.log ( "B" ) ;
 コンソール.log ( "C" ) ;
 コンソール.groupCollapsed ( "数値" ) ;
 コンソール.log ( "1" ) ;
 コンソール.log ( "2" ) ;
 コンソール.groupEnd ( "数値" ) ;
コンソール.groupEnd ( "アルファベット" ) ;

印刷結果は次のとおりです。

ご覧のとおり、上記の方法との唯一の違いは、印刷された結果が折りたたまれており、表示するには手動で展開する必要があることです。

4. 印刷時間

1. コンソール.count()

現在の実行回数を取得するには、console.count() を使用できます。次の例を見てみましょう。

 ( i = 0 ; i < 5 ; i ++ )の場合{
 コンソール.count ( ) ;
 }

 //出力は次のようになります
デフォルト: 1
デフォルト: 2
デフォルト: 3
デフォルト: 4
デフォルト: 5

ラベルにパラメータを指定することもできます (空の場合は、デフォルトのラベルが使用されます)。

 ( i = 0 ; i < 5 ; i ++ )の場合{
 コンソール.count ( "hello" ) ;
 }

 //出力は次のようになります
こんにちは: 1
こんにちは: 2
こんにちは: 3
こんにちは: 4
こんにちは: 5

このメソッドは、主に、より複雑なシナリオで使用されます。関数が複数の場所から呼び出される場合があり、このメソッドを使用して、メソッドが呼び出される回数が少ないか、繰り返し呼び出されるかを判断できます。

2. コンソール.countReset()

名前が示すように、console.countReset() は計算機をリセットし、上記の console.count() メソッドと組み合わせて使用​​する必要があります。オプションのパラメータ ラベルがあります。

引数 label が指定されている場合、この関数は label に関連付けられたカウントを 0 にリセットします。

ラベル パラメータが省略されている場合、この関数はデフォルトのカウンターをリセットし、カウントを 0 にリセットします。

コンソール.count ( ) ;
コンソール.count ( "a" ) ;
コンソール.count ( "b" ) ;
コンソール.count ( "a" ) ;
コンソール.count ( "a" ) ;
コンソール.count ( ) ;
コンソール.count ( ) ;

コンソール.countReset ( ) ;
コンソール.countReset ( "a" ) ;
コンソール.countReset ( "b" ) ;

コンソール.count ( ) ;
コンソール.count ( "a" ) ;
コンソール.count ( "b" ) ;

印刷結果は次のとおりです。

デフォルト: 1
 1 : 1
 1 : 1
 2 : 2
 3 : 3
デフォルト: 2
デフォルト: 3
デフォルト: 1
 1 : 1
 1 : 1

5. その他の印刷

1. コンソール.テーブル()

通常、console.log を使用することが多いです。実際、console オブジェクトには、配列オブジェクトのプロパティを簡単に印刷できる console.table() など、使用できるプロパティが多数あり、印刷結果はテーブルになります。 console.table() メソッドには 2 つのパラメータがあります。最初のパラメータは印刷するオブジェクトであり、2 番目のパラメータは印刷するテーブルのタイトル (配列オブジェクトの属性値) です。次の例を見てみましょう。

 const ユーザー= [
 {
 "first_name" : "ハーコート" ,
 "last_name" : "ハッケルベ" ,
 「性別」 ： 「男性」 、
 「都市」 ： 「リンチェン」 、
 「出生国」 : 「中国」
 } 、
 {
 "first_name" : "アリン" ,
 "last_name" : "マケティゲン" ,
 「性別」 ： 「男性」 、
 「都市」 ： 「アンベロキポイ」 、
 「出生国」 : 「ギリシャ」
 } 、
 {
 "first_name" : "サンダー" ,
 "姓" : "デッグ" ,
 「性別」 ： 「男性」 、
 「都市」 ： 「ムタタ」 、
 「出生国」 : 「南アフリカ」
 }
 ]

コンソール.table ( users 、 [ 'first_name' 、 'last_name' 、 'city' ] ) ;

印刷結果は次のとおりです。

この方法により、配列オブジェクト内の指定されたプロパティをより明確に確認できます。

さらに、console.table() を使用して配列要素を印刷することもできます。

 const app = [ "facebook" 、 "google" 、 "twitter" ] ;
コンソール.table (アプリ) ;

印刷結果は次のとおりです。

この方法により、配列内の要素をより明確に確認できます。

console.table() は最大 1000 行までしか処理できないため、すべてのデータセットに適さない可能性があることに注意してください。しかし、ほとんどのシナリオにも適用できます。

2. コンソールをクリアする()

console.clear() は、名前が示すように、コンソール情報をクリアします。コンソールがクリアされると、「コンソールがクリアされました」という文が出力されます。

もちろん、コンソールのクリア キーを使用してコンソールをクリアすることもできます。

3. コンソール.assert()

console.assert() メソッドは、ステートメントのアサーションに使用されます。アサーションが false の場合、エラー メッセージがコンソールに出力されます。構文は次のとおりです。

コンソール.assert (式,メッセージ)

2 つのパラメータがあります。

式: 条件文。文はブール値に解析され、偽の場合、メッセージ文の出力がトリガーされます。

message: 出力ステートメント。任意のタイプにすることができます。

このメソッドは、式の条件文が false の場合にメッセージ情報を出力します。特定の状況下でのみステートメントを出力したい場合は、console.assert() メソッドを使用できます。

たとえば、リスト要素の子ノードの数が 100 以上の場合、エラー メッセージが出力されます。

 console .assert ( list .childNodes .length < 100 , "ノード数は > 100" ) ;

出力は次の図のようになります。

4. コンソール.トレース()

console.trace() メソッドを使用すると、スタック内で現在実行されているコードの呼び出しパスを出力できます。上記の console.error() と同じ機能を持ちますが、console.log() と同じ出力を出力します。次の例を見てみましょう。

関数a ( ) {
 b （ ） ;
 }
関数b （ ） {
 コンソール.trace ( ) ;
 }
関数c ( ) {
 （ ） ;
 }
 （ ） ;

印刷結果は次のとおりです。

ご覧のとおり、呼び出しスタック情報は b→a→c に出力されます。このスタック情報は呼び出し場所から始まります。

5. コンソール.dir()

console.dir() メソッドは、指定された JavaScript オブジェクトのプロパティをコンソールに表示し、ファイル ツリー スタイルに似たインタラクティブなリストで表示できます。構文は次のとおりです。

コンソール.dir (オブジェクト) ;

そのパラメータはオブジェクトであり、オブジェクトのすべてのプロパティとプロパティ値が出力されます。

ほとんどの場合、consoledir() を使用すると console.log() を使用するのと同じ効果が得られます。しかし、要素構造を出力する場合、大きな違いがあります。console.log() は要素の DOM 構造を出力しますが、console.dir() は要素の属性を出力します。

6. コンソール.dirxml()

console.dirxml() メソッドは、すべての子孫要素を含む特定の XML/HTML 要素のインタラクティブなツリーを表示するために使用されます。要素として表示できない場合は、JavaScript オブジェクトに置き換えられます。出力は元のノードから継承された拡張ノード リストであり、子ノードの内容を確認できます。構文は次のとおりです。

コンソール.dirxml (オブジェクト) ;

このメソッドは、XML 要素とその子孫要素を出力します。console.log() と console.dirxml() の呼び出しは、XML 要素と HTML 要素に対して同等です。

7. コンソールメモリ

console.memory はメソッドではなく、コンソール オブジェクトのプロパティです。現在のメモリ使用量を表示するために使用できます。console.log() が多すぎると、メモリが占​​有され、ブラウザがフリーズする原因になります。