JavaScript 开发人员必须了解这些控制台方法。

2025-05-25

JavaScript 开发人员必须了解这些控制台方法。

在 Web 浏览器中,控制台是一种帮助我们记录与网页相关的信息(如:错误、警告、网络请求等)的工具。在 JavaScript 中,控制台是一个提供对浏览器调试控制台的访问的对象。

控制台对象为我们提供了几种不同的方法,例如:

console.table(tabledata, tablecolumns)

  • 它以表格形式打印数据。
  • tabledata-它应该是对象或数组。
  • tablecolumns -它指定要在表中打印的数组属性的名称。它是一个可选字段,仅用于对象数组。
console.table([{ name : "Nikhil", language : "Javascript" },
               { name : "Karkra", language : "Python" }]);
Enter fullscreen mode Exit fullscreen mode

替代文本

  • 如果您看到下面的示例,我们将name作为表列传递。因此,表格仅打印name属性。
console.table([{ name : "Nikhil", language : "Javascript" },
               { name : "Karkra", language : "Python" }], ["name"]);
Enter fullscreen mode Exit fullscreen mode

替代文本

console.time(label) & console.timeEnd(label)

  • console.time()方法在控制台视图中启动一个计时器。
  • console.timeEnd()方法用于结束计时器并在控制台中显示结果。
  • 标签——此参数用于为计时器命名,它是一个可选字段。
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()
Enter fullscreen mode Exit fullscreen mode

替代文本

console.log(message)

  • 它将消息打印到浏览器控制台。这对于测试很有用。
console.log('Hurray!! We are JS developer')
Enter fullscreen mode Exit fullscreen mode

替代文本

console.warn(message)

  • 它会在浏览器控制台打印一条警告消息。对于类似“此 API 将来会被弃用”或“此属性是可访问性所必需的”之类的警告非常有用。
console.warn('img elements must have an alt prop, either with meaningful text, or an empty string for decorative images')
Enter fullscreen mode Exit fullscreen mode

替代文本

console.error(message)

  • 它将错误消息打印到浏览器控制台。
console.error('Server is not running!!')
Enter fullscreen mode Exit fullscreen mode

替代文本

console.info(message)

  • 它将信息消息打印到控制台。
console.info('React 17 is available!!')
Enter fullscreen mode Exit fullscreen mode

替代文本

console.count(label)

  • 它会打印该函数被调用的次数console.count()。这对于确认你的特定函数被调用了一次还是两次非常有帮助。你可以添加一个标签,该标签将包含在控制台中。默认情况下,将添加“default”标签。

替代文本

console.clear()

  • 它清除控制台。一旦调用此方法,它会在控制台中打印一条消息:“控制台已清除”。
console.clear()
Enter fullscreen mode Exit fullscreen mode

替代文本

console.assert(expression, message)

  • 如果表达式计算结果为 false,它会将消息打印到控制台
console.assert(2>3, '2 is not greater than 3')
Enter fullscreen mode Exit fullscreen mode

替代文本

console.group(label) & console.groupEnd(label)

  • console.group()它表示一个消息组的开始
  • console.groupEnd()它表示消息组的结束
  • 标签——此参数用于为组命名,它是一个可选字段。
//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");
Enter fullscreen mode Exit fullscreen mode

替代文本

console.groupCollapsed(label)

  • 这与 类似,console.group但它打印折叠的消息组。所有消息都打印在组内。
//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");
Enter fullscreen mode Exit fullscreen mode

替代文本

参考


https://developer.mozilla.org/en-US/docs/Web/API/Console

文章来源:https://dev.to/karkranikhil/javascript-developer-must-know-these-console-methods-57oa
PREV
🚀🚀10 个可将您的前端开发提升至专业*级别的网站或应用程序响应式居家办公伴侣形状分隔线动画边框半径渐变 CSS 剪辑路径形状模板图标字体选择器颜色选择器框阴影
NEXT
在 30 分钟内使用 Svelte 构建一个响应式网站。