diff --git a/src/Console/Log.es6 b/src/Console/Log.es6
index ab42bbf..1c13459 100644
--- a/src/Console/Log.es6
+++ b/src/Console/Log.es6
@@ -2,6 +2,7 @@ import util from '../lib/util'
 import stringify from '../lib/stringify.es6'
 import highlight from '../lib/highlight.es6'
 import beautify from 'js-beautify'
+import JsonViewer from '../lib/JsonViewer.es6'
 
 export default class Log
 {
@@ -62,6 +63,9 @@ export default class Log
             case 'log':
                 msg = formatMsg(args);
                 break;
+            case 'dir':
+                msg = formatDir(args);
+                break;
             case 'info':
                 icon = 'info-circle';
                 msg = formatMsg(args);
@@ -98,17 +102,35 @@ export default class Log
         delete this.args;
         this._formattedMsg = msg;
     }
-    static click(type, $el)
+    static click(type, log, $el)
     {
         switch (type)
         {
             case 'log':
             case 'warn':
             case 'info':
-                return 'src';
+                return 'viewSrc';
             case 'error':
                 $el.find('.eruda-stack').toggleClass('eruda-hidden');
                 break;
+            case 'dir':
+                if (log.src)
+                {
+                    let $json = $el.find('.eruda-json');
+                    if ($json.hasClass('eruda-hidden'))
+                    {
+                        if ($json.data('init') !== 'true')
+                        {
+                            new JsonViewer(log.src, $json);
+                            $json.data('init', 'true');
+                        }
+                        $json.rmClass('eruda-hidden');
+                    } else
+                    {
+                        $json.addClass('eruda-hidden');
+                    }
+                }
+                break;
         }
 
         return 'handled';
@@ -206,6 +228,13 @@ function formatMsg(args)
     return args.join(' ');
 }
 
+function formatDir(args)
+{
+    let msg = formatMsg(args);
+
+    return msg + '<div class="eruda-json eruda-hidden"></div>'
+}
+
 function substituteStr(args)
 {
     if (!util.isStr(args[0]) || args.length === 1) return args;
diff --git a/src/Console/Logger.es6 b/src/Console/Logger.es6
index 94901fd..347e374 100644
--- a/src/Console/Logger.es6
+++ b/src/Console/Logger.es6
@@ -224,14 +224,15 @@ export default class Logger extends util.Emitter
         {
             let $el = util.$(this),
                 idx = $el.data('idx'),
-                type = $el.data('type');
+                type = $el.data('type'),
+                log = self._renderLogs[idx];
 
-            let action = Log.click(type, $el);
+            let action = Log.click(type, log, $el);
 
             switch (action)
             {
                 case 'viewSrc':
-                    let src = self._renderLogs[idx].src;
+                    let src = log.src;
                     try {
                         if (!util.isObj(src)) src = JSON.parse(src);
                         self.emit('viewJson', src);
diff --git a/src/Console/Logger.scss b/src/Console/Logger.scss
index 0e8c54c..86f16a4 100644
--- a/src/Console/Logger.scss
+++ b/src/Console/Logger.scss
@@ -100,6 +100,11 @@
                 border-top: 1px solid $yellow;
                 border-bottom: 1px solid $yellow;
             }
+            &.dir {
+                .json {
+                    padding-top: 10px;
+                }
+            }
             &.info {
                 color: $blue;
             }
diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6
index 84b9f54..e193377 100644
--- a/src/Sources/Sources.es6
+++ b/src/Sources/Sources.es6
@@ -2,7 +2,7 @@ import Tool from '../DevTools/Tool.es6'
 import util from '../lib/util'
 import beautify from 'js-beautify'
 import highlight from '../lib/highlight.es6'
-import JsonViewer from './JsonViewer.es6'
+import JsonViewer from '../lib/JsonViewer.es6'
 
 export default class Sources extends Tool
 {
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
index 7aad135..b55d5e8 100644
--- a/src/Sources/Sources.scss
+++ b/src/Sources/Sources.scss
@@ -31,6 +31,9 @@
                 color: $gray;
             }
         }
+        .json {
+            padding: $padding 25px 10px;
+        }
         .http {
             .breadcrumb {
                 @include breadcrumb();
@@ -66,76 +69,5 @@
             width: 100%;
             height: 100%;
         }
-        .json {
-            @include overflow-auto(x);
-            cursor: default;
-            font-family: $font-family-code;
-            font-size: $font-size-s;
-            line-height: 1.2;
-            background: #fff;
-            min-height: 100%;
-            padding: $padding 25px 10px;
-            &, ul {
-                list-style: none !important;
-            }
-            ul {
-                padding: 0 !important;
-                padding-left: 20px !important;
-                margin: 0 !important;
-            }
-            li {
-                position: relative;
-                white-space: nowrap;
-            }
-            & > li > .key,
-            & .array .key {
-                display: none;
-            }
-            .array .object .key {
-                display: inline;
-            }
-            .null {
-                color: #0086b3;
-            }
-            .string {
-                color: #183691;
-            }
-            .number {
-                color: #0086b3;
-            }
-            .boolean {
-                color: #0086b3;
-            }
-            .key {
-                color: #a71d5d;
-            }
-            .expanded:before {
-                content: "";
-                width: 0;
-                height: 0;
-                border: 4px solid transparent;
-                position: absolute;
-                border-top-color: $gray;
-                left: -12px;
-                top: 5px;
-            }
-            .collapsed:before {
-                content: "";
-                border-left-color: $gray;
-                border-top-color: transparent;
-                left: -10px;
-                top: 3px;
-            }
-            li .collapsed ~ .close:before {
-                content: "... ";
-                color: #999;
-            }
-            .hidden ~ ul {
-                display: none;
-            }
-            span {
-                position: static !important;
-            }
-        }
     }
 } }
\ No newline at end of file
diff --git a/src/Sources/JsonViewer.es6 b/src/lib/JsonViewer.es6
similarity index 97%
rename from src/Sources/JsonViewer.es6
rename to src/lib/JsonViewer.es6
index 721097a..db97b99 100644
--- a/src/Sources/JsonViewer.es6
+++ b/src/lib/JsonViewer.es6
@@ -1,5 +1,5 @@
-import util from '../lib/util'
-import highlight from '../lib/highlight.es6'
+import util from './util'
+import highlight from './highlight.es6'
 
 export default class JsonViewer
 {
diff --git a/src/style/style.scss b/src/style/style.scss
index f0e93ea..ca19cd4 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -1,4 +1,5 @@
 @import "variable";
+@import "mixin";
 
 .container {
     pointer-events: none;
@@ -45,3 +46,74 @@
     color: $green;
 }
 
+.container .json {
+    @include overflow-auto(x);
+    cursor: default;
+    font-family: $font-family-code;
+    font-size: $font-size-s;
+    line-height: 1.2;
+    background: #fff;
+    min-height: 100%;
+    &, ul {
+        list-style: none !important;
+    }
+    ul {
+        padding: 0 !important;
+        padding-left: 20px !important;
+        margin: 0 !important;
+    }
+    li {
+        position: relative;
+        white-space: nowrap;
+    }
+    & > li > .key,
+    & .array .key {
+        display: none;
+    }
+    .array .object .key {
+        display: inline;
+    }
+    .null {
+        color: #0086b3;
+    }
+    .string {
+        color: #183691;
+    }
+    .number {
+        color: #0086b3;
+    }
+    .boolean {
+        color: #0086b3;
+    }
+    .key {
+        color: #a71d5d;
+    }
+    .expanded:before {
+        content: "";
+        width: 0;
+        height: 0;
+        border: 4px solid transparent;
+        position: absolute;
+        border-top-color: $gray;
+        left: -12px;
+        top: 5px;
+    }
+    .collapsed:before {
+        content: "";
+        border-left-color: $gray;
+        border-top-color: transparent;
+        left: -10px;
+        top: 3px;
+    }
+    li .collapsed ~ .close:before {
+        content: "... ";
+        color: #999;
+    }
+    .hidden ~ ul {
+        display: none;
+    }
+    span {
+        position: static !important;
+    }
+}
+