JavaScript開発者はこれらのコンソールメソッドを知らなければなりません.


Webブラウザコンソールでは、JavaScriptのエラー、警告、ネットワーク要求などのようなWebページに関連付けられた情報をログ出力するのに役立つツールです.コンソールは、ブラウザのデバッグコンソールへのアクセスを提供するオブジェクトです.
コンソールオブジェクトはいくつかの異なるメソッドを提供します.
console.table(tabledata, tablecolumns)
  • は、データを表形式で印刷します.

  • tabledata -オブジェクトか配列でなければなりません.

  • tableColumns -テーブルに表示する配列プロパティの名前を指定します.これはオプションのフィールドであり、オブジェクトの配列でのみ使用されます.
  • console.table([{ name : "Nikhil", language : "Javascript" },
                   { name : "Karkra", language : "Python" }]);
    
  • 以下の例を参照してください.したがって、テーブルはnameプロパティだけで印刷されます.
  • console.table([{ name : "Nikhil", language : "Javascript" },
                   { name : "Karkra", language : "Python" }], ["name"]);
    

    name
  • console.time(label) & console.timeEnd(label)メソッドは、コンソールビューのタイマーを開始します.
  • console.time()メソッドは、タイマーを終了し、コンソールで結果を表示するために使用されます.

  • ラベル-このパラメータは、タイマーに名前を与えるために使用され、オプションのフィールドです.
  • function callApi(){
    console.time('API TIMMER')
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
            console.timeEnd('API TIMMER') //prints time taken by the API
            console.table(json) // prints the response of API
      })
    }
    callApi()
    

    console.timeEnd()
  • ブラウザコンソールにメッセージを出力します.これはテストに便利です.
  • console.log('Hurray!! We are JS developer')
    

    console.log(message)
  • ブラウザコンソールに警告メッセージを出力します.このAPIのような何かを警告するのは非常に便利です.将来的にはこのアクセシビリティが必要です.
  • console.warn('img elements must have an alt prop, either with meaningful text, or an empty string for decorative images')
    

    console.warn(message)
  • ブラウザコンソールにエラーメッセージを出力します.
  • console.error('Server is not running!!')
    

    console.error(message)
  • それはコンソールに情報メッセージを印刷する.
  • console.info('React 17 is available!!')
    

    console.info(message)
  • は、このconsole.count(label)が呼ばれる時間の数を印刷します.あなたの特定の機能が一度か二度呼ばれるかどうか確認するのは非常に役に立ちます.
    コンソールに含まれるラベルを追加できます.デフォルトでは、ラベル“default”が追加されます.
  • Alt Text
    console.count()
  • コンソールをクリアします.このメソッドが呼ばれると、コンソールにメッセージが表示されます.
  • console.clear()
    

    console.clear()
  • 式が偽に評価された場合、メッセージをコンソールに出力します
  • console.assert(2>3, '2 is not greater than 3')
    

    console.assert(expression, message)
  • console.group(label) & console.groupEnd(label)は、メッセージグループ
  • の開始を示した
  • console.group()は、メッセージグループ
  • の終わりを示しました

  • ラベル-このパラメータは、グループに名前を与えるために使用され、オプションのフィールドです.
  • //First group
    console.group("URL Details");
    console.log("Request URL: https://dev.to");
    console.log("Request Method: GET");
    console.log("Status Code: 200")
    console.groupEnd("URL Details");
    //Second group
    console.group("Author Details");
    console.log('Author name: Nikhil karkra')
    console.groupEnd("Author Details");
    

    console.groupEnd()
  • console.groupCollapsed(label)に似ていますが、折りたたまれたメッセージグループを出力します.すべてのメッセージは、グループの中に印刷します.
  • //First collapsed group
    console.groupCollapsed("URL Details");
    console.log("Request URL: https://dev.to");
    console.log("Request Method: GET");
    console.log("Status Code: 200")
    console.groupEnd("URL Details");
    //Second collapsed group
    console.groupCollapsed("Author Details");
    console.log('Author name: Nikhil karkra')
    console.groupEnd("Author Details");
    


    参考文献
    https://developer.mozilla.org/en-US/docs/Web/API/Console