diff --git a/src/Console/Log.js b/src/Console/Log.js
index 6a347eb..cfa8e29 100644
--- a/src/Console/Log.js
+++ b/src/Console/Log.js
@@ -281,6 +281,8 @@ export default class Log {
       case 'output':
       case 'table':
       case 'dir':
+      case 'group':
+      case 'groupCollapsed':
         if (log.src) {
           if (Log.showSrcInSources) {
             return logger.emit('viewJson', log.src)
@@ -300,6 +302,8 @@ export default class Log {
             Log.click(type, log, $el, logger)
             delete log.args
           })
+        } else if (log.type === 'group' || log.type === 'groupCollapsed') {
+          logger.toggleGroup(log)
         }
         break
       case 'error':
diff --git a/src/Console/Logger.js b/src/Console/Logger.js
index 0350e38..bcb6d5a 100644
--- a/src/Console/Logger.js
+++ b/src/Console/Logger.js
@@ -322,6 +322,10 @@ export default class Logger extends Emitter {
 
     el.scrollTop = el.scrollHeight - el.offsetHeight
   }
+  toggleGroup(log) {
+    const { targetGroup } = log
+    targetGroup.collapsed ? this._openGroup(log) : this._collapseGroup(log)
+  }
   _injectGlobal() {
     each(this._global, (val, name) => {
       if (window[name]) return
diff --git a/test/manual.html b/test/manual.html
index 80d0b6c..af37086 100644
--- a/test/manual.html
+++ b/test/manual.html
@@ -39,6 +39,9 @@
         <li>
             <a href="#" id="stringify-timing">Stringify Timing</a>
         </li>
+        <li>
+            <a href="#" id="log">Log</a>
+        </li>
     </ul>
 </nav>
 <script>
@@ -123,7 +126,42 @@
         console.time('stringify window')
         eruda.util.stringifyAll(window)
         console.timeEnd('stringify window')
-    })
+    });
+    addClickEvent('log', () => {
+        console.clear();
+        console.log('log');
+        console.warn('warn');
+        console.error(Error('test'));
+        console.info('info');
+        console.debug('debug');
+        console.dir(document.createElement('div'));
+        console.time('test');
+        console.timeEnd('test');
+        console.count('eruda');
+        console.count('eruda');
+        console.assert(true, 'assert msg');
+        var site1 = { name: 'Runoob', site: 'www.runoob.com' };
+        var site2 = { name: 'Google', site: 'www.google.com' };
+        var site3 = { name: 'Taobao', site: 'www.taobao.com' };
+        console.table([site1, site2, site3], ['site']);
+        console.log('%c Oh my heavens!', 'background: #222; color: #bada55');
+        console.log('This is the outer level');
+        console.group();
+        console.log('Level 2');
+        console.group();
+        console.log('Level 3');
+        console.warn('More of level 3');
+        console.groupEnd();
+        console.log('Back to level 2');
+        console.groupEnd();
+        console.log('Back to the outer level');
+        console.log(navigator);
+        console.log(location);
+        console.log(performance);
+        var arr = [];
+        for (var i = 0; i < 10000; i++) arr.push(i);
+        console.log(arr);
+    });
 </script>
 <script>
     eruda.init();