像专业人士一样使用 Javascript 控制台
每个JavaScript 开发人员都使用过 `console.log("message")`。
它提供了一个简单的调试控制台,类似于Web浏览器提供的JavaScript控制台机制。
在本文中,我们将讨论每个人都应该开始使用的大多数控制台方法。
以下所有方法均可在全局实例控制台中使用,因此不需要控制台模块。
默认值:console.log() | info() | debug() | warn() | error()🔥
这些控制台将根据提供给它们的事件类型直接以适当的颜色打印原始字符串。
console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
样式控制台输出👻
您可以使用 %c 指令将 CSS 样式应用于控制台输出
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")
我们可以多次添加 %c。
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
1. console.table()
console.table() 允许我们在控制台中生成表格。输入必须是数组或对象,并以表格形式显示。
let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)
2. console.group("组") & console.groupEnd("组")
为了组织控制台,我们使用 console.group() 和 console.groupEnd()。
使用控制台组,您的控制台日志将被分组在一起,而每个分组都会在层次结构中创建一个新的级别。调用 groupEnd 会减少一个级别。
console.group()
console.log("Test 1st message")
console.group("info")
console.log("Suprabha")
console.log("Frontend Engineer")
console.groupEnd()
console.groupEnd()
3. console.dir()
打印指定对象的 JSON 表示形式。
let info = {
"name": "Suprabha",
"designation": "Frontend Engineer",
"social": "@suprabhasupi"
}
console.dir(info)
4. console.assert()
如果第一个参数为假,则将消息和堆栈跟踪记录到控制台。
它只会打印错误的参数。如果第一个参数为真,它什么也不做。
console.assert(false, "Log me!")
例子:
let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
5. console.count()
此函数记录此特定调用的调用次数 count()
。此函数接受一个可选参数 label
。
如果 提供了,该函数将记录 使用该特定 调用的 label
次数 。count()
label
console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
如果 省略,函数将记录 在此特定行被调用的label
次数 count()
for (let i = 0; i < 5; i++) {
console.count()
}
6. console.time() 和 console.timeEnd()
检查代码执行时的性能
console.time() 是跟踪 JavaScript 执行所花费的微时间的更好方法。
console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
l += i
}
console.log("total", l)
console.timeEnd("Time")