Javascript Console API の詳細な理解と使用

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

---

コンソール API は、特に ブラウザ や Node.js メッセージの印刷、さまざまな情報のコンソールへの転送に使用されます。 >。ただし、コンソール 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 <p>出力<strong> : </strong>

</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172972935550588.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Understanding and Using Javascript Console API in Detail">

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


</p>

<hr>
  
  
  2. console.error()
<h2>

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

</p><p>例<strong> :</strong>
<br>

</p>



<pre class="brush:php;toolbar:false">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 で使用されるメソッドです。エラー発生時のデバッグを容易にするために使用されます。メッセージには、黄色や警告アイコンなどの特別な形式が適用される場合があります。

例 :

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!");

---

4. console.dir()

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

例 :

console.error()
console.warn()

出力 :

---

5. console.dirxml()

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

例 :

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 



<p><strong>出力</strong> :</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172972936047253.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Understanding and Using Javascript Console API in Detail"></p>


<hr>

<h2>
  
  
  6. console.assert()
</h2>

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

<p><strong>例</strong> :<br>
</p>

<pre class="brush:php;toolbar:false">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);

出力 :

---

7. console.count()

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

例 :

  if (password.length 



<p><strong>出力</strong> : </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172972936286489.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Understanding and Using Javascript Console API in Detail"></p>


<hr>

<h2>
  
  
  結論
</h2>

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


          

            
        

以上がJavascript Console API の詳細な理解と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。