后端开发教程 - Java、Spring Boot 实战 - msg200.com
停止使用默认的 console.log，改为检查这个
所以，你总是用它来console.log调试你的应用程序，对吧？
在这篇文章中，我将向你展示更好的调试方法。
插值
你是如何用变量来插入 console.log 的？你是在做类似这样的事情吗？
const a = 'World';
console.log('Hello ' + a);
这并没有错，但还有更好的方法可以做到这一点。
% 运算符
第一种方法是使用 % 运算符。
我相信它的工作原理几乎与任何其他允许这样做的编程语言一样。
因此，你可以像这样使用它：
console.log('Hello %s', a);
还有其他选项，比如%i表示整数，%f表示浮点数。Google
一下，你会看到很多其他选项 ;)
模板字符串
当你用反引号包装字符串时，会调用模板字符串，例如：
const a = `This is a template string`;
但如果您不在其上插入变量，那就没有必要了，在这种情况下最好使用单/双引号。
要使用模板字符串，您必须将变量包装在其中${}，让我们看看您的 console.log 是什么样子的：
const a = 'World';
console.log(`Hello ${a}`);
看起来很干净，对吧？！
风格化
您知道可以将样式应用于 console.log 吗？
为此，你需要在 console.log 字符串中以 开头%c，第二个参数应该是“内联”CSS。看看这个：
console.log('%c I am a great text!', 'font-size: 26px; color: blue;');
将其复制粘贴到控制台，然后检查结果。
太棒了，对吧？
警告
当您需要添加警告时，您可以使用来完成console.warn。
为此，请使用：
console.warn('This is some warning');
错误
是的，我知道，我们的应用程序出现错误是很糟糕的。
但是，当我们尝试调试并修复错误时，为什么不显示错误而不是默认日志呢？
为此，请使用：
console.error('This is some error');
信息
有时你只是想以不同的方式显示一些信息。
使用console.info，它会在你的日志前显示一个小的“信息图标”。
为此，请使用：
console.info('Just a simple information');
断言
你可以使用 assert 来测试某些内容。
第一个参数是要测试的内容，第二个参数是断言失败时显示的内容。
如果断言返回 true，则不会显示任何内容。
console.assert(1 !== 1, '1 is equal to 1');
查看 DOM 元素
假设你有类似这样的内容：
const p = document.querySelector('p');
所以，你的页面中p第一个变量是这个。 如果你使用它，你可能只会获取DOM元素，但你无法知道它的属性等等。<p>console.log
但是，我们有勇气console.dir来拯救我们！
console.dir(p);
它会将 DOM 元素记录为一个对象，以便您可以检查其所有属性、事件等等！太棒了！\o/
分组
有时，您会将某些内容记录到数组中，然后它会在您的控制台中变成垃圾邮件，对吗？
以此为例：
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
dogs.forEach(dog => {
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})
是的，我知道这样读取控制台不太容易。
但是我们可以将它们分组！
我们有两个选择。
控制台.group()
console.group将其分组并显示其最初打开（但您可以关闭它们）
让我们看一个例子：
dogs.forEach(dog => {
console.group(dog.name); // This is the group title
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
console.groupCollapsed()
console.groupCollapsed也会将其分组，但最初显示它已关闭，因此您只能打开您想要的内容。
让我们看一个例子：
dogs.forEach(dog => {
console.groupCollapsed(dog.name); // This is the group title
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
- 对于这两者，您都需要用 来关闭它
console.groupEnd()。 - 对于两者，创建小组和结束小组时都需要相同的标题。
桌子
您可以在控制台中生成一个表格，哦是的，您真的可以！
使用相同的狗数据示例，在控制台中尝试以下操作：
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
console.table(dogs);
它将显示一个包含索引、名称和年龄标题的表格。
清除
现在您在控制台上做了很多事情，为什么不在继续测试其他东西之前清除它呢？
是的，您可以使用以下方法清除它：
console.clear();
现在您就拥有了一个全新的控制台！
好了，各位！
希望大家喜欢，并继续学习！