How do I print debug messages in the Google Chrome JavaScript Console?

In Google Chrome's JavaScript console, printing debugging messages primarily relies on methods provided by the console object. Here are several commonly used methods along with examples:

1. console.log()

This is the most commonly used method for outputting standard debugging information.

javascript
console.log('This is a standard debugging message');

2. console.error()

This method is used for outputting error messages, typically when errors are caught, and it is displayed in red in the console for easy distinction.

javascript
console.error('This is an error message');

3. console.warn()

Used for outputting warning messages, which are typically displayed in yellow in the console.

javascript
console.warn('This is a warning message');

4. console.info()

Used for outputting informational messages, which are more prominent than console.log.

javascript
console.info('This is an informational message');

5. console.debug()

This method is used for outputting debugging information, similar to log, but can be filtered out in some browsers.

javascript
console.debug('This is a debugging message');

6. Using placeholders

console methods support using placeholders to construct more complex messages.

javascript
console.log('Hello, %s. You have %d unread messages.', 'Alice', 5);

7. Grouped printing

console.group() and console.groupEnd() can group messages, making the output more organized.

javascript
console.group('Order Details');
console.log('Customer Name: Zhang San');
console.log('Order Amount: ¥300');
console.groupEnd();

8. Using console.table()

When displaying arrays or collections of objects, console.table() presents the data in a table format.

javascript
console.table([{ name: 'Zhang San', age: 28 }, { name: 'Li Si', age: 24 }]);

Usage Scenario Example

Suppose we are developing a web page and need to debug a feature that loads a list of users. We can use the following code:

javascript
function fetchUsers() {
  console.log('Starting to load user data');
  fetch('/api/users')
    .then(response => response.json())
    .then(data => {
      console.table(data);
      console.info('User data loading completed');
    })
    .catch(error => {
      console.error('Error loading user data:', error);
    });
}

This logging approach helps developers understand the program's execution flow and quickly identify and resolve issues.