詳細了解和使用 Javascript Console API

如果你喜歡我的文章，可以請我一杯咖啡:)

---

控制台API 用於調試、列印訊息以及將各種資訊傳輸到控制台，特別是在JavaScript 運行時，例如瀏覽器 和Node. js。但為了正確使用console api，你需要確切地知道console api是什麼。

在本文中，我將向您解釋控制台 API。 控制台 API 是一個物件。這個物件有鍵，當您編寫控制台方法時，您可以存取控制台物件中鍵的值。

---

現在，我將透過編寫自己的控制台物件來向您解釋，以便您了解 log 方法在 console 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. 控制台.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 < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

輸出 :

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. 控制台.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. 控制台.dir()

console.dir() 方法顯示指定 JavaScript 物件 的屬性清單。在瀏覽器控制台中，輸出顯示為帶有顯示三角形的分層列表，可讓您查看子物件的內容。

範例 :

console.error()
console.warn()

輸出 :

---

5. 控制台.dirxml()

console.dirxml() 方法顯示指定 XML/HTML 元素 的後代元素的互動樹。如果無法顯示為元素，則會顯示 JavaScript Object 視圖。輸出顯示為可擴展節點的分層列表，讓您可以查看子節點的內容。

範例 :

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 < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

輸出 :

---

6. 控制台.assert()

如果斷言為 false，console.assert() 方法會將錯誤訊息寫入控制台。如果斷言為真，則不會發生任何事情。

範例 :

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. 控制台.count()

console.count() 方法記錄對 count() 的特定呼叫被呼叫的次數。

範例 :

  if (password.length < minLength) {
        console.warn("Warning: Password must be at least 8 characters long.");
        return false; 
    }

輸出 :

---

結論

如果條件不成立，則會列印錯誤訊息。如果條件為真，則不會列印任何內容。

以上是詳細了解和使用 Javascript Console API的詳細內容。更多資訊請關注PHP中文網其他相關文章！