Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM console.group() Method
The HTML DOM console.group() method creates a collapsible group of console messages. All messages logged after calling this method appear indented under the group until console.groupEnd() is called. This helps organize related console output for better debugging and readability.
Syntax
Following is the syntax for the console.group() method −
console.group([label])
Parameters
The console.group() method accepts the following optional parameter −
label − An optional string that acts as a label for the message group. If not provided, the group appears without a label.
Return Value
This method does not return any value. It only creates a grouping structure in the console.
Example − Basic Grouping
Following example demonstrates basic usage of console.group() method −
<!DOCTYPE html>
<html>
<head>
<title>console.group() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Press F12 to open Developer Tools and view the console output.</p>
<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="groupMessage()">GROUP</button>
<script>
function normMessage(){
console.log("Hello world!");
}
function groupMessage(){
console.group();
console.log("This message will be inside a group!");
console.log("This message will also be inside a group!");
console.groupEnd();
}
</script>
</body>
</html>
When you click the NORMAL button, a single message appears in the console. When you click the GROUP button, the messages appear indented under a collapsible group −
Console Output:
Hello world!
? console.group
This message will be inside a group!
This message will also be inside a group!
Example − Labeled Groups
Following example shows how to use labels with console groups −
<!DOCTYPE html>
<html>
<head>
<title>Labeled Console Groups</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Check the console to see labeled groups.</p>
<button onclick="createLabeledGroups()">Create Labeled Groups</button>
<script>
function createLabeledGroups() {
console.group("User Information");
console.log("Name: John Doe");
console.log("Age: 30");
console.log("Email: john@example.com");
console.groupEnd();
console.group("System Status");
console.log("Server: Online");
console.log("Database: Connected");
console.log("Cache: Active");
console.groupEnd();
}
</script>
</body>
</html>
The console output shows two separate labeled groups −
? User Information
Name: John Doe
Age: 30
Email: john@example.com
? System Status
Server: Online
Database: Connected
Cache: Active
Example − Nested Groups
Console groups can be nested inside other groups for hierarchical organization −
<!DOCTYPE html>
<html>
<head>
<title>Nested Console Groups</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Open console to see nested group structure.</p>
<button onclick="createNestedGroups()">Create Nested Groups</button>
<script>
function createNestedGroups() {
console.group("Application Startup");
console.log("Loading application...");
console.group("Database Connection");
console.log("Connecting to database...");
console.log("Connection established");
console.groupEnd();
console.group("User Authentication");
console.log("Validating credentials...");
console.log("User authenticated successfully");
console.groupEnd();
console.log("Application ready");
console.groupEnd();
}
</script>
</body>
</html>
The nested structure appears with multiple levels of indentation −
? Application Startup
Loading application...
? Database Connection
Connecting to database...
Connection established
? User Authentication
Validating credentials...
User authenticated successfully
Application ready
Related Methods
The console.group() method works together with these related methods −
console.groupEnd() − Closes the current group. Always call this to properly close groups.
console.groupCollapsed() − Creates a collapsed group that appears closed by default in the console.
Browser Compatibility
The console.group() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 11+. It is part of the standard Console API specification.
Key Points
Always call
console.groupEnd()to close each group you create.Groups can be nested to create hierarchical console output.
Labels are optional but recommended for better organization.
Groups are collapsible in most browser developer tools.
Use groups to organize related debugging information together.
Conclusion
The console.group() method is a valuable debugging tool that helps organize console output into collapsible, labeled sections. By grouping related messages together, developers can create cleaner, more readable console logs that are easier to navigate during development and debugging.
208 Views
