如果你喜欢我的文章，可以请我喝杯咖啡:)

控制台API用于调试、打印消息以及将各种信息传输到控制台，特别是在JavaScript运行时，例如浏览器和Node.js。但为了正确使用console api，你需要确切地知道console api是什么。

在这篇文章中，我将向您解释控制台API。 控制台 API 是一个对象。这个对象有键，当你编写控制台方法时，你访问控制台对象中某个键的值。

现在，我将通过编写自己的控制台对象来向您解释，以便您了解console API中log方法的工作逻辑.

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 



输出 ： 



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中使用的一种方法，用于在控制台打印潜在的问题或需要注意的情况。用于在发生错误时方便调试。该消息可能会收到特殊格式，例如黄色和警告图标。

例子 ：



  if (password.length 







  
  
  4. 控制台.dir()


console.dir()方法显示指定JavaScript对象的属性列表。在浏览器控制台中，输出显示为带有显示三角形的分层列表，可让您查看子对象的内容。

例子 ：



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)




输出 ： 







  
  
  5. 控制台.dirxml()


console.dirxml() 方法显示指定的 XML/HTML 元素 的后代元素的交互式树。如果无法显示为元素，则会显示 JavaScript 对象 视图。输出显示为可扩展节点的分层列表，让您可以查看子节点的内容。

例子 ：



console.dirxml(document.body);




输出 ：







  
  
  6. 控制台.assert()


如果断言为 false，console.assert() 方法会将错误消息写入控制台。如果断言为真，则不会发生任何事情。

例子 ：



consolle.assert("a" === "f" , error message)




输出 ： 







  
  
  7. 控制台.count()


console.count() 方法记录对 count() 的特定调用被调用的次数。

例子 ：



function greet(user) {
  console.count();
  return `hi ${user}`;
}

greet("micheal");
greet("roman");
greet();
console.count();




输出 ： 







  
  
  结论


如果条件不成立，则打印一条错误消息。如果条件为真，则不会打印任何内容。