Differences

This shows you the differences between two versions of the page.

--- java-script:console-table-error-assert-group [2023/08/09 20:24] – ↷ Page name changed from java-script:console-table to java-script:console-table-error-assert-group odefta
+++ java-script:console-table-error-assert-group [2023/08/09 20:33] (current) – odefta
@@ Line 1: / Line 1: @@
-====== Java Script Console Error, Table, Assert ======
+====== Java Script Console Error, Table, Assert, Group ======
 ===== Console table =====
@@ Line 112: / Line 112: @@
 <note tip>
 One common approach to handle this is to have a build step in your deployment process that removes or comments out calls to console.assert() (and other debugging code) as part of the **[[java-script:minification-uglification|minification or uglification process]]**.
+</note>
+===== Console group =====
+**console.group()** and **console.groupEnd()** are used in JavaScript to **group together related log messages**. \\ You can also nest groups inside other groups, creating a hierarchical view in the console.
+Simple example:
+<code>
+console.group("Hello!")
+console.log("First message");
+console.log("Second message");
+console.groupEnd();
+</code>
+Output:
+{{:java-script:pasted:20230809-202925.png}}
+Nested group example:
+<code>
+console.log("Starting logs");
+console.group("Outer Group");
+console.log("Inside the outer group");
+console.group("Inner Group 1");
+console.log("Inside the inner group 1");
+console.groupEnd(); // Ends Inner Group 1
+console.group("Inner Group 2");
+console.log("Inside the inner group 2");
+console.groupEnd(); // Ends Inner Group 2
+console.groupEnd(); // Ends Outer Group
+console.log("Outside of all groups");
+</code>
+Output:
+{{:java-script:pasted:20230809-203033.png}}
+<note>
+Using **console.groupCollapsed()** instead of console.group() can create a collapsible group that is closed by default.
 </note>