Add:

src/Console/Console.es6

@@ -143,7 +143,7 @@ export default class Console extends Tool
         {
             if (log.type === 'error' && this.config.get('displayIfErr'))
             {
-                parent.show().showTool('console');
+                parent.showTool('console').show();
             }
         });
     }

src/Elements/Highlight.es6

@@ -90,6 +90,11 @@ export default class Highlight
             width: bw - pl - pr,
             height: bh - pt - pb
         });
+
+        this._$size.css({
+            top: -mt - (top < 25 ? 0 : 25),
+            left: -ml
+        }).html(`${formatElName(this._target)} | ${width} × ${height}`);
     }
     _bindEvent()
     {
@@ -103,9 +108,31 @@ export default class Highlight
     {
         $parent.append(require('./Highlight.hbs')());
 
-        this._$el = util.$('.eruda-elements-highlight');
-        this._$margin = this._$el.find('.eruda-margin');
-        this._$padding = this._$el.find('.eruda-padding');
-        this._$content = this._$el.find('.eruda-content');
+        var $el = this._$el = util.$('.eruda-elements-highlight');
+        this._$margin = $el.find('.eruda-margin');
+        this._$padding = $el.find('.eruda-padding');
+        this._$content = $el.find('.eruda-content');
+        this._$size = $el.find('.eruda-size');
     }
 }
+
+function formatElName(el)
+{
+    var {id, className} = el;
+
+    var ret = `<span style="color:#ee78e6">${el.tagName.toLowerCase()}</span>`;
+
+    if (id !== '') ret += `<span style="color:#ffab66">#${id}</span>`;
+
+    var classes = '';
+    util.each(className.split(/\s+/g), (val) =>
+    {
+        if (util.trim(val) === '') return;
+
+        classes += `.${val}`;
+    });
+
+    ret += `<span style="color:#8ed3fb">${classes}</span>`;
+
+    return ret;
+}

src/Elements/Highlight.hbs

@@ -1,6 +1,9 @@
 <div class="eruda-elements-highlight">
-    <div class="eruda-margin"></div>
-    <div class="eruda-border"></div>
-    <div class="eruda-padding"></div>
-    <div class="eruda-content"></div>
+    <div class="eruda-indicator">
+        <div class="eruda-margin"></div>
+        <div class="eruda-border"></div>
+        <div class="eruda-padding"></div>
+        <div class="eruda-content"></div>
+    </div>
+    <div class="eruda-size"></div>
 </div>

src/Elements/Highlight.scss

@@ -1,14 +1,23 @@
+@import "../variable";
+
 .elements-highlight {
     display: none;
     position: absolute;
     left: 0;
     right: 0;
-    opacity: .5;
     z-index: -100;
     pointer-events: none !important;
     * {
         pointer-events: none !important;
     }
+    .indicator {
+        opacity: .5;
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+    }
     .margin {
         position: absolute;
         background: #e8925b;
@@ -33,4 +42,18 @@
         background: #5e88c1;
         z-index: 400;
     }
+    .size {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #333740;
+        color: #d9d9d9;
+        font-size: 12px;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        padding: 0 5px;
+        white-space: nowrap;
+        overflow-x: hidden;
+    }
 }

src/Sources/image.hbs

@@ -2,5 +2,5 @@
     <div class="eruda-img-container">
         <img src="{{src}}">
     </div>
-    <div class="eruda-img-info">{{width}}px * {{height}}px</div>
+    <div class="eruda-img-info">{{width}}px × {{height}}px</div>
 </div>