First, understand the console
The JavaScript console (console) is a tool commonly used by developers when writing JavaScript code. It is an interface provided by the browser to allow developers to track the status and results of code execution. The JavaScript console can log information, warnings, and errors output by the code, and help developers debug and fix problems.
In a browser, you can open the JavaScript console by pressing the F12 key to open the developer tools and selecting the Console option. In the console, you can enter and execute JavaScript code, and view the output of the code. The console also provides many useful auxiliary tools, such as inspecting DOM elements, monitoring network requests, performance analysis, etc.
2. Common methods of JavaScript console
| console | |||
|---|---|---|---|
| serial number | usage | usage description | DEMO |
| 1 | console.assert(condition, message) Affirmation // condition: The condition that needs to be verified. |
If the condition is true, there will be no output. If the condition is false, the specified error message will be output to the console. |
function multiply(a, b) { console.assert(typeof a === "number", "a must be a number"); console.assert(typeof b === "number", "b must be a number" ); return a * b; }
console.log(multiply(2, 3)); // output 6 |
| 2 | console.clear() clear console |
Clear all output from the current console, returning the cursor to the first line |
console.clear() |
| 3 | console.count() Record the number of code executions |
You can use the console.count() method to count the number of code executions. Every time a function is called, the console will output the number of times the function was called. |
function myFunction() { console.count("Number of times myFunction was called: "); // function code }
myFunction(); // The console outputs the number of times myFunction is called: 1 |
| 4 | console.countReset() counter reset |
console.count('apple'); The first time console.count('apple') is called, 'apple: 1' is output and the counter value is 1. The second time console.count('banana') is called, 'banana: 1' is output and the counter value is 1. The third time console.count('apple') is called, 'apple: 2' is output and the counter value is 2. Then call console.countReset('apple') to reset the counter value to 0. Finally, when console.count('apple') is called again, 'apple: 1' is output, and the counter value is 1. |
|
| 5 | console.debug debugging |
The console.debug() method can be used to output debugging information, which is often used in the development and debugging process. |
When using the console, you need to select all var a = 5; |
| 6 | console.dir() Display the properties and methods of an object |
Use the console.dir() method to display object properties and methods |
console.dir(document.body) |
| 7 | console.dirxml() | console.dirxml() can output a DOM node (or other object that can be parsed as a DOM node) to the console in XML format. This method is often used to debug front-end code such as HTML and CSS. | const fruits = [ console.dirxml(fruits); |
| 8 | console.error() 输出错误 |
输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈 | console.error('error') |
| 9 | console.exception() | console |
不推荐 |
| 10 | console.event() | 没有这个方法，偶然看到这么个东西，光看名字很迷惑，经过调研，确认没有这个方法。 console.event() 不是 JavaScript 标准库中的方法，也不是浏览器或库定义的方法。 在目前的 JavaScript 标准库中，并不存在 console.event() 方法。 |
|
| 11 | console.group() | 用于将显示的信息分组，可以把信息进行折叠和展开 | console.group("外层分组"); // 开始外层分组 console.group("内层分组"); // 开始内层分组 console.groupEnd(); // 结束外层分组 |
| 12 | console.groupCollapsed() | 与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。 | |
| 13 | console.groupEnd() | 结束内联分组 | |
| 14 | console.info() | console.log 别名，输出信息 | console.info("Hello world!") |
| 15 | console.log() 打印消息 |
使用console.log()方法打印消息到控制台 |
console.log("Hello world!") |
| 16 | console.memory() | 查看内存 这是一个属性，并不是是函数，此属性是用来查看内存使用情况，如果我们使用过多的console.log()会占用大量的内存，导致浏览器出现卡死情况。 |
console.memory() |
| 17 | console.markTimeline() | console.markTimeline() 可以帮助我们记录代码执行中的重要事件，并在时间轴上进行标记，便于调试、分析和优化程序性能。 | |
| 18 | console.profile() | console.profile() 可以很方便地对程序性能进行分析，并提供了丰富的性能数据，便于优化程序性能。 | function heavyCalculation(n) {
function main() {
main(); |
| 19 | console.profileEnd() | 性能分析结束 | |
| 20 | console.table() 将数据以表格显示 |
console.table()会将数组中的对象转换为一个表格，并将表头设置为对象的键。这使得我们可以更容易地查看和比较数组中的对象。 |
const fruits = [ console.table(fruits); |
| 21 | console.time() | 计时开始 使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。 |
console.clear(); console.time("myTimer"); for (var i = 0; i < 1000000; i++) { // do something } console.timeEnd("myTimer"); |
| 22 | console.timeEnd() | 计时结束 使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。 |
|
| 23 | console.trace() 查看堆栈跟踪 |
console.trace()用于打印出当前函数调用栈的详细信息。 |
function funcOne() {
function funcTwo() {
function funcThree() {
funcOne(); |
| 24 | console.warn() 输出警告 |
输出警告 |
console.warn('warn') |
