diff --git a/src/devtools/locales/en.js b/src/devtools/locales/en.js
index b26b9814a..6663d463f 100644
--- a/src/devtools/locales/en.js
+++ b/src/devtools/locales/en.js
@@ -44,6 +44,11 @@ export default {
tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter components by name'
}
},
+ ComponentInstance: {
+ consoleId: {
+ tooltip: 'Available as {{id}} in the console.'
+ }
+ },
ComponentInspector: {
openInEditor: {
tooltip: 'Open <>{{file}} in editor'
diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue
index 3b4eacfa7..b62fe17a3 100644
--- a/src/devtools/views/components/ComponentInstance.vue
+++ b/src/devtools/views/components/ComponentInstance.vue
@@ -23,16 +23,29 @@
<{{ displayName }}>
-
- == {{ instance.consoleId }}
+
+ = {{ instance.consoleId }}
-
+
router-view{{ instance.matchedRouteSegment ? ': ' + instance.matchedRouteSegment : null }}
-
+
fragment
-
+
inactive
@@ -187,7 +200,7 @@ export default {
&.console
color #fff
background-color transparent
- top 0px
+ top 0
&.router-view
background-color #ff8344
&.fragment