私の記事が気に入ったら、コーヒーをおごってください :)

コンソール API は、特に ブラウザ や Node.js などの JavaScript ランタイムで、デバッグ、 メッセージの印刷、さまざまな情報のコンソールへの転送に使用されます。 ]。ただし、コンソール API を正しく使用するには、コンソール API が何であるかを正確に知る必要があります。

この記事では、コンソール API について説明します。 コンソール API はオブジェクトです。この オブジェクトにはキー があり、コンソール メソッドを作成すると、コンソール オブジェクト内のキーの値にアクセスします。

次に、コンソール API でログ メソッドがどのように動作するかのロジックを理解できるように、独自のコンソール オブジェクトをコーディングして説明します。

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

コードを読んでみてください。コードに見られるように、カスタム コンソール オブジェクトを作成し、このオブジェクトのキーを定義しました。この キーの値は関数です。次に、このオブジェクトのログ キーにアクセスしました。

その結果、コンソール API には「log」メソッドだけがありません。それで、何人いますか？今すぐ調べてみましょう。

写真に見られるように、コンソール オブジェクトには複数のキーとこれらのキーの値があります。これらの値は関数です。

これらの関数には、コンソール オブジェクト.
を使用してアクセスできます。

console.error()
console.warn()

ここで、これらの関数のいくつかが何をするかを学びましょう。

1. console.debug()

console.debug 、ブラウザ コンソールでの デバッグ 目的に使用される JavaScript の関数。デフォルトでは、console.debug() メソッドからの出力は Chrome デベロッパー ツール には表示されません。

例 ：

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result 



出力 : 



console.debug() メソッドからの出力は Chrome デベロッパー ツールに表示されません。



  
  
  2. console.error()


これは、JavaScript で コンソールにエラー メッセージを出力するために使用されるメソッドです。エラー発生時のデバッグを容易にするために使用されます。メッセージには、赤色やエラー アイコンなどの特別な形式が適用される場合があります。

例 ：


async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);





データの取得中にエラーが発生した場合、次の出力が表示されます: 





  
  
  3. console.warn()


これは、注意が必要な潜在的な問題や状況をコンソールに出力するためにJavaScriptで使用されるメソッドです。エラー発生時のデバッグを容易にするために使用されます。メッセージには、黄色や警告アイコンなどの特別な形式が適用される場合があります。

例 ：


  if (password.length 
  if (password.length 


  
  
  4. console.dir()


console.dir()メソッドは、指定されたJavaScript オブジェクトのプロパティのリストを表示します。ブラウザ コンソールでは、出力は開閉用三角ボタンが付いた階層リストとして表示され、子オブジェクトの内容を確認できます。

例 ：

const バスケット = {
    名前：「Tシャツ」、
    価格：100、
    数量: 1、
    色 : 
const basket =  {
    name : "t-shirt",
    price : 100,
    quantity : 1,
    color : [ "blue" , "red" , "yellow"],
    size : [ "xs" , "s" , "m" , "l" , "xl"],
    total : function() {
        return this.price * this.quantity;
    }

}

console.dir(basket)
、
    合計 : function() {
        this.price * this.quantity を返します。
    }

}

console.dir(バスケット)




出力
 : 





  
  
  5. console.dirxml()


console.dirxml() メソッドは、指定された XML/HTML 要素  の子孫要素の対話型ツリーを表示します。要素として表示できない場合は、代わりに JavaScript Object
 ビューが表示されます。出力は、子ノードの内容を確認できる展開可能なノードの階層リストとして表示されます。


例
 ：
console.dirxml(document.body);
console.dirxml(document.body);




出力
 :





  
  
  6. console.assert()


console.assert()
 メソッドは、アサーションが false の場合、コンソールにエラー メッセージを書き込みます。アサーションが true の場合、何も起こりません。


例
 ：
console.dirxml(document.body);
consolle.assert("a" === "f" , エラーメッセージ)




出力
 : 





  
  
  7. console.count()


console.count() メソッドは、count()
 へのこの特定の呼び出しが呼び出された回数を記録します。


例
 ：
console.dirxml(document.body);
関数挨拶(ユーザー) {
  コンソール.カウント();
  `こんにちは ${user}` を返します。
}

挨拶("マイケル");
挨拶("ローマ");
挨拶する（）;
コンソール.カウント();




出力
 : 





  
  
  結論


条件が true でない場合は、エラー メッセージが出力されます。条件が true の場合、何も出力されません。