Mastering JavaScript Console: Advanced Logging, Grouping, and Performance Tools

1. Basic Logging Methods

Use console.log() to print strings, console.info() for informational messages, console.warn() for warnings, console.error() for errors, and console.debug() for debug output.

console.log("I am a 凡人");
console.info("Yes, you arm a 凡人");
console.warn("凡人你居然敢窥视我");
console.error("天兵天将，把这个凡人给我打入地狱");
console.debug("我就是传说中的debug");

2. Viewing All Console Methods

Inspect the entire console object to see all available methods (note that some are non‑standard and may not be supported in all browsers). console.log(console); Typical output includes methods such as assert, clear, count, debug, dir, group, log, profile, time, warn, etc.

3. Clearing the Console

Remove clutter during debugging with console.clear() or the browser’s command‑line API clear(). Keyboard shortcuts (Cmd + K on macOS, Ctrl + L on Windows) also work in Chrome.

4. Grouping Output

Organise related logs using console.group() and console.groupEnd(). Use console.groupCollapsed() for a collapsed group.

console.group('凡人');
console.log("手");
console.log("脚");
console.groupEnd();

console.group('神');
console.log("法力无边");
console.log("腾云架雾");
console.groupEnd();

Result is shown in the image below:

5. Inspecting Objects

Use console.log() for simple output, console.table() for tabular display of arrays/objects, console.dir() for an interactive property list, and console.dirxml() to view the HTML/XML representation of a DOM node.

var person = {head:1, hand:2, leg:2};
console.log(person);

var data = [{'姓名':'幼儿园','性别':'女'},{'姓名':'李狗嗨','数量':1}];
console.table(data);

Table output is illustrated below:

6. Performance Testing

Measure execution time with console.time(label) and console.timeEnd(label). For deeper profiling, use console.profile(label) and console.profileEnd(label), which generate a profile view in the DevTools.

console.time("神机妙算");
(function(){
  for(var i=0;i<10;i++){
    var sum = (function(){
      var flog = 0;
      for(var j=0;j<10;j++){
        flog+=j;
      }
    })();
  }
})();
console.timeEnd("神机妙算");

console.profile("神机妙算");
// same code block as above
console.profileEnd("神机妙算");

Profile results appear in the DevTools as shown:

7. Stack Tracing

Use console.trace() to print a stack trace at a specific point in the code.

function add(num){
  if(num>0){
    console.trace("现在num的值为", num);
    return num + add(num-1);
  } else {
    return 0;
  }
}
var a = 3;
add(3);

Trace output is displayed in the image below:

8. Assertions

Validate conditions with console.assert(condition, ...optionalMessage). When the condition is false, an error is logged.

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

9. Counting Calls

Track how many times a piece of code runs using console.count(label).

function hi(name){
  console.count(name);
  return "hi " + name;
}
for(var i=0;i<10;i++){
  if(i<4){
    hi("person");
  } else {
    hi("god");
  }
}

10. Summary

The JavaScript console API offers a rich set of functions that greatly aid debugging and performance analysis. By leveraging logging, grouping, object inspection, timing, profiling, tracing, assertions, and counting, developers can create a more efficient development workflow.