JavaScript 开发人员必须了解这些控制台方法。
在 Web 浏览器中,控制台是一种帮助我们记录与网页相关的信息(如:错误、警告、网络请求等)的工具。在 JavaScript 中,控制台是一个提供对浏览器调试控制台的访问的对象。
控制台对象为我们提供了几种不同的方法,例如:
console.table(tabledata, tablecolumns)
- 它以表格形式打印数据。
- tabledata-它应该是对象或数组。
- tablecolumns -它指定要在表中打印的数组属性的名称。它是一个可选字段,仅用于对象数组。
console.table([{ name : "Nikhil", language : "Javascript" },
{ name : "Karkra", language : "Python" }]);
- 如果您看到下面的示例,我们将
name
作为表列传递。因此,表格仅打印name
属性。
console.table([{ name : "Nikhil", language : "Javascript" },
{ name : "Karkra", language : "Python" }], ["name"]);
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()
console.log(message)
- 它将消息打印到浏览器控制台。这对于测试很有用。
console.log('Hurray!! We are JS developer')
console.warn(message)
- 它会在浏览器控制台打印一条警告消息。对于类似“此 API 将来会被弃用”或“此属性是可访问性所必需的”之类的警告非常有用。
console.warn('img elements must have an alt prop, either with meaningful text, or an empty string for decorative images')
console.error(message)
- 它将错误消息打印到浏览器控制台。
console.error('Server is not running!!')
console.info(message)
- 它将信息消息打印到控制台。
console.info('React 17 is available!!')
console.count(label)
- 它会打印该函数被调用的次数
console.count()
。这对于确认你的特定函数被调用了一次还是两次非常有帮助。你可以添加一个标签,该标签将包含在控制台中。默认情况下,将添加“default”标签。
console.clear()
- 它清除控制台。一旦调用此方法,它会在控制台中打印一条消息:“控制台已清除”。
console.clear()
console.assert(expression, message)
- 如果表达式计算结果为 false,它会将消息打印到控制台
console.assert(2>3, '2 is not greater than 3')
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");
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");
参考
https://developer.mozilla.org/en-US/docs/Web/API/Console
文章来源:https://dev.to/karkranikhil/javascript-developer-must-know-these-console-methods-57oa