在前端开发中，console 和 debugger 可谓前端调试的两大常用的调试利器和技巧。它们可以帮助开发人员快速定位问题、查看变量值、追踪代码执行流程等，从而提高开发效率。如果你仅仅还是只停留在只会简单的console.log/error(obj),那我建议你可以看完这篇文章，保证对你大有裨益。同时，也建议在看完之后的过程中，多实践多练习，这样才会得心应手。
在前端开发中，console 是一个非常常用的调试工具，可以帮助开发人员输出信息、查看变量值、追踪代码执行流程等。通过灵活使用 console，开发人员可以更快速地定位和解决问题。在本文中，我们将介绍一些 console 的调试技巧，帮助您提高前端调试效率。
请注意，console 调试技巧可以适用于各种前端项目，无论是纯粹的 JavaScript 应用、基于框架的应用，还是使用了其他库和工具的项目。通过掌握这些技巧，您可以更加灵活地利用 console 进行调试，提高开发效率。
概述
首先我们在控制台打出console，看浏览器中console对象包含的所有方法。
这里有一些方法不是经常使用，本篇文章我也主要介绍一些比较常用的console技巧，主要有：
基础打印：
console.log()：用于输出一般信息到控制台。console.warn()：用于输出警告信息到控制台。console.error()：用于输出错误信息到控制台。console.info()：用于输出一般信息到控制台。
计算时间：
console.time(label)：开始一个计时器，参数label用于标识计时器。console.timeEnd(label)：结束指定标识的计时器，并输出执行时间。console.timeLog(label)：输出指定标识的计时器当前的执行时间，不会停止计时器。
计数：
console.count(label)：输出指定标识的调用次数，可以用于统计某个函数被调用的次数。console.countReset(label)：重置指定标识的调用次数计数器。
其他：
console.trace()：输出当前的调用栈，可以帮助定位函数调用的来源。console.table(data)：以表格形式输出数据，方便查看复杂数据结构。console.clear()：清空控制台的输出。console.assert(expression, message)：如果expression为false，则输出message到控制台。
通过灵活使用这些 console 技巧，开发人员可以更加高效地进行调试工作，快速定位和解决问题。
在结尾会介绍两个浏览器的奇技淫巧，敬请期待。
话不多说，我们开干。
基础打印
console.log()：用于输出一般信息到控制台。console.warn()：用于输出警告信息到控制台。console.error()：用于输出错误信息到控制台。console.info()：用于输出一般信息到控制台。
本文不描述console使用样式格式的写法。
console.log()
console.log()是最基本、最常用的方法之一。它可以在JavaScript代码的任何位置使用，将信息打印到浏览器的控制台中。
以下是console.log()的基本用法：
javascript
let name = "CUGGZ";
let age = 18;
console.log(name) // CUGGZ
console.log(`my name is: ${name}`) // CUGGZ
console.log(name, age) // CUGGZ 18
console.log("message:", name, age) // message: CUGGZ 18上面是比较基础的使用，这里我们也分享一些常用的使用技巧：
- 对象解构：可以使用模板字符串来输出变量值和固定内容，更加直观。例如：
javascript
const name = 'zs';
console.log({ name }); // { name: zs }这样我们就不用为了区分，而这样写：
javascript
const name = 'zs';
console.log('name:', name);- 模板字符串：可以使用模板字符串来输出变量值和固定内容，更加直观。例如：
javascript
console.log(`Name: ${name}, Age: ${age}`); // 使用模板字符串输出- 条件输出：可以根据条件输出不同的信息。例如：
javascript
let isAdmin = true;
console.log(isAdmin ? 'Admin user' : 'Regular user'); // 根据条件输出不同信息- 格式化输出 ：可以使用格式化字符串来输出信息，如
%s表示字符串，%d表示数字等。例如：
javascript
console.log('Name: %s, Age: %d', name, age); // 格式化输出- 对象输出：可以输出对象的属性和值。例如：
javascript
let person = { name: 'Alice', age: 25 };
console.log(person); // 输出对象上述方法都适用于 console.log()、console.warn()、console.error() 和 console.info() 这些控制台输出方法。您可以在这些方法中使用对象解构、模板字符串、条件输出、格式化输出和对象输出等技巧来更好地展示信息。因此下面介绍时，不会再多做赘述。
console.warn()
console.warn()方法用于在控制台输出警告信息。它的用法和console.log一样，只是显示的样式不同，会在信息前面加上一个黄色三角，表示警告：
下面是一个示例，展示如何使用 console.warn() 方法输出带有警告图标的信息：
javascript
console.warn('This is a warning message');当您在控制台中运行上述代码时，会看到输出的信息前面有一个黄色的三角形图标，以及您传入的警告信息。
console.error()
console.error()方法用于在控制台输出错误信息。与console.log()和console.warn()类似，console.error()也是用于在控制台中显示信息，但它会以红色文本显示，并在输出信息前面显示一个红色的叉号图标，以表示这是一条错误信息。
以下是一个示例，展示如何使用 console.error() 方法输出带有错误图标的信息：
javascript
console.error('This is an error message');当您在控制台中运行上述代码时，会看到输出的信息前面有一个红色的叉号图标，以及您传入的错误信息。
当然，console.error()还有一个console.log()不具备的功能，那就是打印函数的调用栈。
函数的调用栈是指当前执行的函数以及它被调用的函数的层次关系。通过打印函数的调用栈，您可以追踪代码执行的路径，从而更容易地找到错误所在的位置。
下面是一个示例，展示如何使用 console.error() 方法输出错误信息以及函数的调用栈：
javascript
function func1() {
func2();
}
function func2() {
console.error('An error occurred');
}
func1();当您在控制台中运行上述代码时，会看到输出的错误信息后面会有函数的调用栈信息，显示了 func2() 被 func1() 调用的关系。
通过查看函数的调用栈，您可以更清晰地了解代码执行的路径，有助于定位和解决问题。
console.info()
console.info()可用于输出资讯类说明信息，其用法与console.log()相同，打印效果也相似。
以下是一个示例，展示如何使用 console.info() 方法输出带有信息图标的信息：
javascript
console.info('This is an information message');通过使用 console.info() 方法，您可以将一般的信息以更清晰和易识别的方式输出到控制台中。
上述四种方法中，按照使用的频率排名应该是:log>error>warn>info。
计算时间
console.time(label)：开始一个计时器，参数label用于标识计时器。console.timeEnd(label)：结束指定标识的计时器，并输出执行时间。console.timeLog(label)：输出指定标识的计时器当前的执行时间，不会停止计时器。
console.time() & console.timeEnd()
console.time()和console.timeEnd()方法是用于在控制台中计算代码执行时间的方法。这两个方法结合使用可以帮助您测量代码块的执行时间，从而进行性能分析和优化。
console.time(label): 开始一个计时器，并将计时器命名为指定的标签（label）。可以使用任何字符串作为标签。每个标签对应一个独立的计时器。console.timeEnd(label): 停止指定标签（label）的计时器，并在控制台中输出执行时间，以毫秒（ms）为单位。
以下是一个示例，展示如何使用 console.time() 和 console.timeEnd() 方法来计算代码块的执行时间：
javascript
console.time('myTimer');
// 模拟一个耗时操作
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
}
console.timeEnd('myTimer');在上面的示例中，我们首先使用 console.time('myTimer') 开始一个名为 'myTimer' 的计时器，然后执行一个耗时操作，最后使用 console.timeEnd('myTimer') 停止 'myTimer' 计时器，并输出执行时间到控制台。
通过使用 console.time() 和 console.timeEnd() 方法，您可以方便地测量代码执行时间，帮助您了解代码的性能表现。
如果有多个计时器，就需要使用这个标签来标记每一个计时器：
javascript
console.time("timer1");
console.time("timer2");
setTimeout(() => {
console.timeEnd("timer1");
}, 1000);
setTimeout(() => {
console.timeEnd("timer2");
}, 2000);
// timer1: 1004.666259765625 ms
// timer2: 2004.654052734375 msconsole.timeLog()
console.timeLog()方法用于在控制台中记录当前已经经过的时间，console.timeLog()与上面的console.timeEnd()类似，但是也有一定的差别。
这两个方法都需要通过 console.time() 来启动一个计时器，然后可以用来监控代码执行时间。
console.timeLog()用于在代码执行过程中打印计时器的当前时间，而不会终止计时器，这样可以多次记录时间点并输出当前时间。console.timeEnd()用于打印计时器的最终时间，并且会终止计时器，这样可以得到整个代码执行的总时间。
通过结合使用这两个方法，我们可以更好地监控代码的执行时间，从而优化性能、调试程序或者分析代码的时间消耗。这种精细的时间监控对于开发和调试复杂的程序非常有帮助。
以下是一个示例，演示如何使用 console.time()、console.timeLog() 和 console.timeEnd() 来记录代码块的执行时间并在不同阶段输出已经经过的时间：
javascript
console.time('timer');
// 模拟一个耗时操作
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
if (i % 10000 === 0) {
console.timeLog('timer', `已经执行 ${i} 次`);
}
}
console.timeEnd('timer');在上面的示例中，我们首先使用 console.time('timer') 开始一个名为 'timer' 的计时器，然后在循环中每执行 10000 次操作时使用 console.timeLog('timer', message) 记录已经执行的次数，并输出已经经过的时间。最后使用 console.timeEnd('timer') 停止 'timer' 计时器，并输出总的执行时间。
通过使用 console.timeLog()，您可以在代码执行过程中输出已经经过的时间，帮助您更好地了解代码的执行情况。
在使用 console.timeLog() 方法时，有一些注意点需要考虑，以确保正确使用和获取准确的时间记录：
-
计时器名称匹配 ：确保在调用
console.timeLog()方法时，传入的计时器名称要与之前通过console.time()启动的计时器名称匹配。否则，将无法输出正确的时间记录。而且中间不能被console.timeEnd()，否则也会导致报错. -
适当的时间点 ：选择合适的时间点调用
console.timeLog()方法，以便获取有意义的时间记录。通常在代码执行的关键部分、循环迭代或异步操作完成后调用，可以更好地了解代码的执行时间分布。 -
多次调用 ：
console.timeLog()方法可以多次调用，以记录不同时间点的时间。这有助于分析代码执行过程中的时间消耗情况。但要注意不要过度调用，以避免影响代码执行性能。 -
不会终止计时器 ：
console.timeLog()方法并不会终止计时器，只是输出当前时间。如果需要获取整个代码块的总执行时间，应该在适当的时机使用console.timeEnd()方法来终止计时器并输出最终时间。
通过注意以上这些点，可以更好地利用 console.timeLog() 方法来监控代码执行时间，帮助调试和优化程序。
计数
console.count(label)：输出指定标识的调用次数，可以用于统计某个函数被调用的次数。console.countReset(label)：重置指定标识的调用次数计数器。
console.count()
console.count()是一个用于计数的控制台方法，它可以帮助我们统计特定事件发生的次数。当我们在代码中多次调用console.count()时，它会输出一个特定事件被调用的次数。
下面是 console.count() 的基本用法和示例：
基本用法：
javascript
console.count(label);label：可选参数，用于标识计数器的名称。如果提供了label，则会输出该计数器的名称和次数；如果未提供label，则会输出默认的次数计数器。
示例：
javascript
function greet(name) {
console.log('Hello, ' + name);
console.count('Greet Count');
}
greet('Alice');
greet('Bob');
greet('Alice');在上面的示例中，console.count('Greet Count') 会统计 greet() 函数被调用的次数，并输出如下结果：
css
Hello, Alice
Greet Count: 1
Hello, Bob
Greet Count: 2
Hello, Alice
Greet Count: 3通过 console.count() 方法，我们可以方便地统计特定事件的发生次数，有助于在开发过程中跟踪和调试代码。
console.countReset()
console.countReset()用于重置console.count()方法的计数器。调用console.countReset()后，计数器将被重置为初始状态，下次调用console.count()时，计数器将从零开始计数。
基本用法：
javascript
console.countReset([label]);label：可选参数，用于指定要重置的计数器的名称。如果提供了label，则会重置该特定名称的计数器；如果未提供label，则会重置默认的计数器。
示例：
javascript
console.count();
console.count("a");
console.count("b");
console.count("a");
console.count("a");
console.count();
console.count();
console.countReset();
console.countReset("a");
console.countReset("b");
console.count();
console.count("a");
console.count("b");打印结果如下：
javascript
default:1
a:1
b:1
a:2
a:3
default:2
default:3
default:1
a:1
b:1通过 console.countReset() 方法，我们可以在需要时重置计数器，以便重新开始计数。这在某些情况下可能很有用，例如在特定事件之后重新开始计数。
其他
console.trace()：输出当前的调用栈，可以帮助定位函数调用的来源。console.table(data)：以表格形式输出数据，方便查看复杂数据结构。console.clear()：清空控制台的输出。console.assert(expression, message)：如果expression为false，则输出message到控制台。
console.trace()
console.trace()用于在控制台中输出当前的函数调用栈信息。它会显示当前代码的调用路径，从调用console.trace()的位置开始，一直到代码执行的起始点。
它和上面提到的console.error()具有相同的功能，不过打印的样式与console.log()相同。
示例：
javascript
function greet(name) {
console.trace('Greet function called with name: ' + name);
console.log('Hello, ' + name);
}
function sayHello() {
greet('Alice');
}
sayHello();在上面的示例中，我们定义了两个函数 greet() 和 sayHello()。在 sayHello() 函数中调用了 greet('Alice')，并在 greet() 函数中调用了 console.trace() 方法。当我们运行代码时，console.trace() 将输出类似以下内容的调用栈信息：
这些信息显示了函数调用的路径，从最内部的函数开始，一直到代码执行的起始点。这对于调试和跟踪函数调用路径非常有用。
console.table(data)
console.table(data) 用于以表格形式在控制台中显示数据。它接收一个对象或数组作为参数，并将其以表格的形式呈现出来，使数据更易于查看和理解。
示例：
javascript
const data = [
{ name: 'Alice', age: 30, city: 'New York' },
{ name: 'Bob', age: 25, city: 'San Francisco' },
{ name: 'Charlie', age: 35, city: 'Los Angeles' }
];
console.table(data);在上面的示例中，我们定义了一个包含个人信息的数组 data，然后使用 console.table(data) 将数据以表格形式输出到控制台。输出的表格将显示每个对象的属性及其对应的值，使数据更易于查看和比较。
注意：
console.table()方法适用于对象和数组，它会自动根据数据的结构生成表格。- 表格的列名将根据对象的属性名自动生成。
- 您可以在表格中显示特定的列，通过传递第二个参数指定要显示的列名数组，例如：
console.table(data, ['name', 'age'])。
console.clear()
console.clear() 用于清除控制台中的所有输出内容，使控制台变得干净整洁。
示例：
javascript
console.log('Hello, World!');
console.clear();在上面的示例中，我们首先使用 console.log() 方法输出了一条消息到控制台，然后调用 console.clear() 方法清除了控制台中的所有内容。这将清除之前的输出，使控制台变为空白。
注意：
console.clear()方法通常在需要清除之前的输出并重新开始时使用，以保持控制台的可读性。- 在浏览器控制台中，
console.clear()方法通常会清除整个控制台的内容，而在 Node.js 等环境中，可能只会清除当前终端窗口的内容。
console.assert(expression, message)
console.assert(expression, message) 用于在表达式为假时输出一条错误消息到控制台。
expression：一个表达式，如果为false，则会输出错误消息到控制台。message：要输出的错误消息。
示例：
javascript
const value = 10;
console.assert(value > 20, 'Value is not greater than 20');在上面的示例中，我们定义了一个变量 value，并使用 console.assert() 方法来检查该变量是否大于 20。由于 value 的值是 10，不大于 20，因此表达式为假，将输出错误消息到控制台。
注意：
- 如果表达式为真，则不会输出任何内容到控制台。
console.assert()方法通常用于在代码中添加断言，用于检查代码的正确性。- 错误消息通常会包含有关断言失败的信息，帮助开发人员调试代码。
彩蛋篇
浏览器转为编辑器
作为前端，你开始是不是做过，在一个页面上，打开控制台。在html页面上替换页面的内容，比如热搜等等。 那有没有一种方法，可以在浏览器上直接便捷网页页面的。答案是有的。那要怎么做呢? 打开控制台，在控制台上输入：
javascript
document.body.contentEditable = true;
// 或者
document.designMode = "on"然后就可以随心所欲的改变网页内容了。
浏览器转为记事本
如果你想打开个空页面，并在空页面上可以编辑，你可以在浏览器地址栏中输入 data:text/html, <html contenteditable>回车直接变编辑器，这里可以直接输入字符进行编辑了。
整理不易，如果对你有帮助，你的一个点赞，值得让我付出更多的努力！