diff --git a/shells/dev/target/NativeTypes.vue b/shells/dev/target/NativeTypes.vue
index 498fb2944..d32900c40 100644
--- a/shells/dev/target/NativeTypes.vue
+++ b/shells/dev/target/NativeTypes.vue
@@ -11,43 +11,118 @@
     <TestComponent ref="component" />
 
     <p>
-      <button @click="sendComponent">Vuex mutation</button>
+      <button @click="sendComponent()">Vuex mutation</button>
+      <button @click="createLargeArray()">Create large array</button>
+    </p>
+
+    <h3>Set</h3>
+    <pre>{{ setDisplay() }}</pre>
+
+    <h3>Map</h3>
+    <pre>{{ mapDisplay() }}</pre>
+
+    <p>
+      <button @click="testVuexSet()">Vuex Set</button>
+      <button @click="testVuexMap()">Vuex Map</button>
+      <button @click="forceRefresh()">Refresh</button>
     </p>
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import CompDef from './Other.vue'
 
 export default {
   components: {
     TestComponent: {
-      data: () => ({ foo: '42' }),
       props: { bar: { default: 'hey' }},
+      data: () => ({ foo: '42' }),
+      computed: {
+        parentComp () { return this.$parent }
+      },
       render: h => h('div', '<TestComponent />')
     }
   },
+
   data () {
     return {
       localDate: new Date(),
-      testComponent: null
+      reg: /abc/gi,
+      testComponent: null,
+      hello: function foo (a, b, c) {},
+      hey: function empty () {},
+      anon: function (foo, bar) {},
+      arrow: (a, b) => {},
+      def: CompDef,
+      def2: {
+        name: 'MyComponent',
+        render () {}
+      },
+      def3: {
+        render () {}
+      },
+      largeArray: [],
+      i: new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])]),
+      j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])], [8, new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])])]])
     }
   },
   computed: {
-    ...mapState(['date']),
-    ...mapGetters(['hours'])
+    ...mapState([
+      'date',
+      'set',
+      'map'
+    ]),
+
+    ...mapGetters([
+      'hours'
+    ]),
+
+    theRouter () {
+      return this.$router
+    },
+
+    theStore () {
+      return this.$store
+    },
   },
+
   mounted () {
     this.testComponent = this.$refs.component
   },
+
   methods: {
     ...mapMutations({
-      updateDate: 'UPDATE_DATE'
+      updateDate: 'UPDATE_DATE',
+      testVuexSet: 'TEST_SET',
+      testVuexMap: 'TEST_MAP'
     }),
+
     sendComponent () {
       this.$store.commit('TEST_COMPONENT', this.testComponent)
+    },
+
+    createLargeArray () {
+      const list = []
+      for (let i = 0; i < 10000000; i++) {
+        list.push(i)
+      }
+      this.largeArray = list
+    },
+
+    setDisplay () {
+      return Array.from(this.set)
+    },
+
+    mapDisplay () {
+      return [...this.map]
+    },
+
+    forceRefresh () {
+      this.$forceUpdate()
     }
   },
+
   filters: {
     prototypeString: val => Object.prototype.toString.call(val)
   }
diff --git a/shells/dev/target/store.js b/shells/dev/target/store.js
index 1c55a3a6f..d3258a18e 100644
--- a/shells/dev/target/store.js
+++ b/shells/dev/target/store.js
@@ -6,7 +6,9 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     count: 0,
-    date: new Date()
+    date: new Date(),
+    set: new Set(),
+    map: new Map()
   },
   mutations: {
     INCREMENT: state => state.count++,
@@ -14,7 +16,13 @@ export default new Vuex.Store({
     UPDATE_DATE: state => {
       state.date = new Date()
     },
-    TEST_COMPONENT: state => {}
+    TEST_COMPONENT: state => {},
+    TEST_SET: state => {
+      state.set.add(Math.random())
+    },
+    TEST_MAP: state => {
+      state.map.set(`mykey_${state.map.size}`, state.map.size)
+    }
   },
   getters: {
     isPositive: state => state.count >= 0,
diff --git a/src/backend/index.js b/src/backend/index.js
index 65fd37d96..92513e42a 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -4,20 +4,10 @@
 import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
-import { stringify, classify, camelize, set, parse } from '../util'
-import path from 'path'
+import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
 import config from './config'
 
-// Use a custom basename functions instead of the shimed version
-// because it doesn't work on Windows
-function basename (filename, ext) {
-  return path.basename(
-    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
-    ext
-  )
-}
-
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 const rootInstances = []
@@ -67,7 +57,6 @@ function connect () {
     currentInspectedId = id
     const instance = instanceMap.get(id)
     bindToConsole(instance)
-    flush()
     bridge.send('instance-details', stringify(getInstanceDetails(id)))
   })
 
@@ -383,6 +372,7 @@ export function getCustomInstanceDetails (instance) {
       type: 'component',
       id: instance.__VUE_DEVTOOLS_UID__,
       display: getInstanceName(instance),
+      tooltip: 'Component instance',
       value: reduceStateList(state),
       fields: {
         abstract: true
@@ -411,14 +401,8 @@ export function reduceStateList (list) {
  */
 
 export function getInstanceName (instance) {
-  const name = instance.$options.name || instance.$options._componentTag
-  if (name) {
-    return name
-  }
-  const file = instance.$options.__file // injected by vue-loader
-  if (file) {
-    return classify(basename(file, '.vue'))
-  }
+  const name = getComponentName(instance.$options)
+  if (name) return name
   return instance.$root === instance
     ? 'Root'
     : 'Anonymous Component'
@@ -444,11 +428,11 @@ function processProps (instance) {
         type: 'props',
         key: prop.path,
         value: instance[prop.path],
-        meta: {
+        meta: options ? {
           type: options.type ? getPropType(options.type) : 'any',
           required: !!options.required,
           mode: propModes[prop.mode]
-        }
+        } : {}
       }
     })
   } else if ((props = instance.$options.props)) {
@@ -461,9 +445,11 @@ function processProps (instance) {
         type: 'props',
         key,
         value: instance[key],
-        meta: {
+        meta: prop ? {
           type: prop.type ? getPropType(prop.type) : 'any',
           required: !!prop.required
+        } : {
+          type: 'invalid'
         }
       })
     }
@@ -565,27 +551,30 @@ function processComputed (instance) {
  */
 
 function processRouteContext (instance) {
-  const route = instance.$route
-  if (route) {
-    const { path, query, params } = route
-    const value = { path, query, params }
-    if (route.fullPath) value.fullPath = route.fullPath
-    if (route.hash) value.hash = route.hash
-    if (route.name) value.name = route.name
-    if (route.meta) value.meta = route.meta
-    return [{
-      key: '$route',
-      value: {
-        _custom: {
-          type: 'router',
-          abstract: true,
-          value
+  try {
+    const route = instance.$route
+    if (route) {
+      const { path, query, params } = route
+      const value = { path, query, params }
+      if (route.fullPath) value.fullPath = route.fullPath
+      if (route.hash) value.hash = route.hash
+      if (route.name) value.name = route.name
+      if (route.meta) value.meta = route.meta
+      return [{
+        key: '$route',
+        value: {
+          _custom: {
+            type: 'router',
+            abstract: true,
+            value
+          }
         }
-      }
-    }]
-  } else {
-    return []
+      }]
+    }
+  } catch (e) {
+    // Invalid $router
   }
+  return []
 }
 
 /**
diff --git a/src/backend/router.js b/src/backend/router.js
new file mode 100644
index 000000000..a7a9f1970
--- /dev/null
+++ b/src/backend/router.js
@@ -0,0 +1,15 @@
+export function getCustomRouterDetails (router) {
+  return {
+    _custom: {
+      type: 'router',
+      display: 'VueRouter',
+      value: {
+        options: router.options,
+        currentRoute: router.currentRoute
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}
diff --git a/src/backend/vuex.js b/src/backend/vuex.js
index 9850455a4..77a5f3b71 100644
--- a/src/backend/vuex.js
+++ b/src/backend/vuex.js
@@ -41,3 +41,19 @@ export function initVuexBackend (hook, bridge) {
     recording = enabled
   })
 }
+
+export function getCustomStoreDetails (store) {
+  return {
+    _custom: {
+      type: 'store',
+      display: 'Store',
+      value: {
+        state: store.state,
+        getters: store.getters
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
index 7f7387b6c..8ceec2345 100644
--- a/src/devtools/components/DataField.vue
+++ b/src/devtools/components/DataField.vue
@@ -8,7 +8,7 @@
       placement="left"
       offset="24"
       :disabled="!field.meta"
-      @click.native="toggle"
+      @click.native="onClick"
     >
       <span
         v-show="isExpandableType"
@@ -67,7 +67,9 @@
           class="value"
           :class="valueClass"
           @dblclick="openEdit()"
-        >{{ formattedValue }}</span>
+          v-tooltip="valueTooltip"
+          v-html="formattedValue"
+        />
         <span class="actions">
           <i
             v-if="isValueEditable"
@@ -149,7 +151,8 @@ import {
   NEGATIVE_INFINITY,
   NAN,
   isPlainObject,
-  sortByKey
+  sortByKey,
+  openInEditor
 } from 'src/util'
 
 import DataFieldEdit from '../mixins/data-field-edit'
@@ -212,11 +215,13 @@ export default {
         return 'literal'
       } else if (value && value._custom) {
         return 'custom'
-      } else if (specialTypeRE.test(value)) {
-        const [, type] = specialTypeRE.exec(value)
-        return `native ${type}`
-      } else if (type === 'string' && !rawTypeRE.test(value)) {
-        return 'string'
+      } else if (type === 'string') {
+        if (specialTypeRE.test(value)) {
+          const [, type] = specialTypeRE.exec(value)
+          return `native ${type}`
+        } else {
+          return 'string'
+        }
       } else if (Array.isArray(value)) {
         return 'array'
       } else if (isPlainObject(value)) {
@@ -275,7 +280,7 @@ export default {
         if (typeMatch) {
           return typeMatch[1]
         } else {
-          return JSON.stringify(value)
+          return `<span>"</span>${value}<span>"</span>`
         }
       } else {
         return value
@@ -300,11 +305,14 @@ export default {
           ...inherit
         }))
       } else if (typeof value === 'object') {
-        value = sortByKey(Object.keys(value).map(key => ({
+        value = Object.keys(value).map(key => ({
           key,
           value: value[key],
           ...inherit
-        })))
+        }))
+        if (this.valueType !== 'custom') {
+          value = sortByKey(value)
+        }
       }
       return value
     },
@@ -313,6 +321,17 @@ export default {
       return this.formattedSubFields.slice(0, this.limit)
     },
 
+    valueTooltip () {
+      const type = this.valueType
+      if (type === 'custom') {
+        return this.field.value._custom.tooltip
+      } else if (type.indexOf('native ') === 0) {
+        return type.substr('native '.length)
+      } else {
+        return null
+      }
+    },
+
     fieldOptions () {
       if (this.valueType === 'custom') {
         return Object.assign({}, this.field, this.field.value._custom)
@@ -345,10 +364,22 @@ export default {
   },
 
   methods: {
-    toggle (event) {
+    onClick (event) {
+      // Cancel if target is interactive
       if (event.target.tagName === 'INPUT' || event.target.className.includes('button')) {
         return
       }
+
+      // CustomValue API `file`
+      if (this.valueType === 'custom' && this.fieldOptions.file) {
+        return openInEditor(this.fieldOptions.file)
+      }
+
+      // Default action
+      this.toggle()
+    },
+
+    toggle () {
       if (this.isExpandableType) {
         this.expanded = !this.expanded
 
@@ -442,11 +473,14 @@ export default {
   display inline-block
   color #444
   &.string, &.native
-    color #c41a16
+    color $red
+  &.string
+    >>> span
+      color $black
   &.null
     color #999
   &.literal
-    color #0033cc
+    color $vividBlue
   &.raw-boolean
     width 36px
   &.custom
@@ -459,6 +493,19 @@ export default {
         content '<'
       &::after
         content '>'
+    &.type-function
+      font-style italic
+      >>> span
+        color $vividBlue
+        font-family dejavu sans mono, monospace
+        .platform-mac &
+          font-family Menlo, monospace
+        .platform-windows &
+          font-family Consolas, Lucida Console, Courier New, monospace
+    &.type-component-definition
+      color $green
+      >>> span
+        color $darkerGrey
   .dark &
     color #bdc6cf
     &.string, &.native
diff --git a/src/devtools/components/StateInspector.vue b/src/devtools/components/StateInspector.vue
index 404979eeb..78dbb0b85 100644
--- a/src/devtools/components/StateInspector.vue
+++ b/src/devtools/components/StateInspector.vue
@@ -46,8 +46,8 @@ import Vue from 'vue'
 import DataField from './DataField.vue'
 
 const keyOrder = {
-  undefined: 1,
-  props: 2,
+  props: 1,
+  undefined: 2,
   computed: 3,
   state: 1,
   getters: 2
@@ -113,7 +113,7 @@ export default {
 @import "../variables"
 
 .data-el
-  font-size 14px
+  font-size 15px
 
   &:not(:last-child)
     border-bottom rgba($grey, .4) solid 1px
@@ -130,7 +130,7 @@ export default {
     padding 2px 9px 2px 21px
 
   .data-type
-    color $green
+    color $blueishGrey
     position relative
     cursor pointer
     border-radius 3px
@@ -144,6 +144,7 @@ export default {
     .arrow
       transition transform .1s ease
       margin-right 8px
+      opacity .7
       &.rotated
         transform rotate(90deg)
 
diff --git a/src/devtools/env.js b/src/devtools/env.js
index cb2beb1b6..540716901 100644
--- a/src/devtools/env.js
+++ b/src/devtools/env.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 
 export const isChrome = typeof chrome !== 'undefined' && !!chrome.devtools
+export const isWindows = navigator.platform.indexOf('Win') === 0
 export const isMac = navigator.platform === 'MacIntel'
+export const isLinux = navigator.platform.indexOf('Linux') === 0
 export const keys = {
   ctrl: isMac ? '&#8984;' : 'Ctrl',
   shift: 'Shift',
@@ -13,6 +15,12 @@ export const keys = {
 
 Object.defineProperties(Vue.prototype, {
   '$isChrome': { get: () => isChrome },
+  '$isWindows': { get: () => isWindows },
   '$isMac': { get: () => isMac },
+  '$isLinux': { get: () => isLinux },
   '$keys': { get: () => keys }
 })
+
+if (isWindows) document.body.classList.add('platform-windows')
+if (isMac) document.body.classList.add('platform-mac')
+if (isLinux) document.body.classList.add('platform-linux')
diff --git a/src/devtools/global.styl b/src/devtools/global.styl
index 7032ec699..f88be11ae 100644
--- a/src/devtools/global.styl
+++ b/src/devtools/global.styl
@@ -318,6 +318,16 @@ $arrow-color = #444
   .material-icons
     color $green
 
+.grey
+  &,
+  .material-icons
+    color $darkerGrey
+
+.red
+  &,
+  .material-icons
+    color $red
+
 .input-example
   background $white
   color $green
diff --git a/src/devtools/variables.styl b/src/devtools/variables.styl
index 8dcc824e2..b2b0769e0 100644
--- a/src/devtools/variables.styl
+++ b/src/devtools/variables.styl
@@ -8,7 +8,9 @@ $darkerGreen = #3BA776
 $slate = #242424
 $white = #FFFFFF
 $orange = #DB6B00
-$black = #000000
+$red = #c41a16
+$black = #222
+$vividBlue = #0033cc
 
 // The min-width to give icons text...
 $wide = 1050px
diff --git a/src/devtools/views/components/ComponentInspector.vue b/src/devtools/views/components/ComponentInspector.vue
index 08c98d17c..7ec849c42 100644
--- a/src/devtools/views/components/ComponentInspector.vue
+++ b/src/devtools/views/components/ComponentInspector.vue
@@ -48,7 +48,7 @@ import { mapState } from 'vuex'
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import StateInspector from 'components/StateInspector.vue'
-import { searchDeepInObject, sortByKey, classify } from 'src/util'
+import { searchDeepInObject, sortByKey, classify, openInEditor } from 'src/util'
 import groupBy from 'lodash.groupby'
 
 export default {
@@ -99,27 +99,7 @@ export default {
     },
     openInEditor () {
       const file = this.target.file
-      // Console display
-      const fileName = file.replace(/\\/g, '\\\\')
-      const src = `fetch('/__open-in-editor?file=${encodeURI(file)}').then(response => {
-        if (response.ok) {
-          console.log('File ${fileName} opened in editor')
-        } else {
-          const msg = 'Opening component ${fileName} failed'
-          if (__VUE_DEVTOOLS_TOAST__) {
-            __VUE_DEVTOOLS_TOAST__(msg, 'error')
-          } else {
-            console.log('%c' + msg, 'color:red')
-          }
-          console.log('Check the setup of your project, see https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md')
-        }
-      })`
-      if (this.$isChrome) {
-        chrome.devtools.inspectedWindow.eval(src)
-      } else {
-        // eslint-disable-next-line no-eval
-        eval(src)
-      }
+      openInEditor(file)
     }
   }
 }
diff --git a/src/devtools/views/components/ComponentTree.vue b/src/devtools/views/components/ComponentTree.vue
index fe21f11ab..b52cb9fdf 100644
--- a/src/devtools/views/components/ComponentTree.vue
+++ b/src/devtools/views/components/ComponentTree.vue
@@ -19,7 +19,7 @@
         @click="setSelecting(!selecting)"
       >
         <i class="material-icons">
-          {{ selecting ? 'gps_fixed' : 'gps_not_fixed' }}
+          gps_fixed
         </i>
         <span>Select</span>
       </a>
diff --git a/src/devtools/views/events/EventInspector.vue b/src/devtools/views/events/EventInspector.vue
index 79f624765..d9cb3f6b5 100644
--- a/src/devtools/views/events/EventInspector.vue
+++ b/src/devtools/views/events/EventInspector.vue
@@ -51,7 +51,7 @@ section:not(:last-child)
   margin 0 10px
 
 .string
-  color: #c41a16
+  color: $red
 
 .literal
   color: #03c
diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue
index 1f53a6712..7a36c24ff 100644
--- a/src/devtools/views/vuex/VuexStateInspector.vue
+++ b/src/devtools/views/vuex/VuexStateInspector.vue
@@ -151,7 +151,7 @@ function copyToClipboard (state) {
   left initial
   top 1px
   font-size 12px
-  color #c41a16
+  color $red
   background-color $background-color
   .dark &
     background-color $dark-background-color
diff --git a/src/transfer.js b/src/transfer.js
new file mode 100644
index 000000000..6ece679f6
--- /dev/null
+++ b/src/transfer.js
@@ -0,0 +1,88 @@
+function encode (data, replacer, list, seen) {
+  var stored, key, value, i, l
+  var seenIndex = seen.get(data)
+  if (seenIndex != null) {
+    return seenIndex
+  }
+  var index = list.length
+  var proto = Object.prototype.toString.call(data)
+  if (proto === '[object Object]') {
+    stored = {}
+    seen.set(data, index)
+    list.push(stored)
+    var keys = Object.keys(data)
+    for (i = 0, l = keys.length; i < l; i++) {
+      key = keys[i]
+      value = data[key]
+      if (replacer) value = replacer.call(data, key, value)
+      stored[key] = encode(value, replacer, list, seen)
+    }
+  } else if (proto === '[object Array]') {
+    stored = []
+    seen.set(data, index)
+    list.push(stored)
+    for (i = 0, l = data.length; i < l; i++) {
+      value = data[i]
+      if (replacer) value = replacer.call(data, i, value)
+      stored[i] = encode(value, replacer, list, seen)
+    }
+  } else {
+    list.push(data)
+  }
+  return index
+}
+
+function decode (list, reviver) {
+  var i = list.length
+  var j, k, data, key, value, proto
+  while (i--) {
+    data = list[i]
+    proto = Object.prototype.toString.call(data)
+    if (proto === '[object Object]') {
+      var keys = Object.keys(data)
+      for (j = 0, k = keys.length; j < k; j++) {
+        key = keys[j]
+        value = list[data[key]]
+        if (reviver) value = reviver.call(data, key, value)
+        data[key] = value
+      }
+    } else if (proto === '[object Array]') {
+      for (j = 0, k = data.length; j < k; j++) {
+        value = list[data[j]]
+        if (reviver) value = reviver.call(data, j, value)
+        data[j] = value
+      }
+    }
+  }
+}
+
+export function stringify (data, replacer, space) {
+  try {
+    return arguments.length === 1
+      ? JSON.stringify(data)
+      : JSON.stringify(data, replacer, space)
+  } catch (e) {
+    return stringifyStrict(data, replacer, space)
+  }
+}
+
+export function parse (data, reviver) {
+  var hasCircular = /^\s/.test(data)
+  if (!hasCircular) {
+    return arguments.length === 1
+      ? JSON.parse(data)
+      : JSON.parse(data, reviver)
+  } else {
+    var list = JSON.parse(data)
+    decode(list, reviver)
+    return list[0]
+  }
+}
+
+export function stringifyStrict (data, replacer, space) {
+  var list = []
+  encode(data, replacer, list, new Map())
+  return space
+    ? ' ' + JSON.stringify(list, null, space)
+    : ' ' + JSON.stringify(list)
+}
diff --git a/src/util.js b/src/util.js
index 19a80b0db..79227b0fa 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,6 +1,12 @@
-import CircularJSON from 'circular-json-es6'
+import path from 'path'
+
+import * as CircularJSON from './transfer'
 
 import { instanceMap, getCustomInstanceDetails } from 'src/backend'
+import { getCustomStoreDetails } from 'src/backend/vuex'
+import { getCustomRouterDetails } from 'src/backend/router'
+
+import { isChrome } from './devtools/env'
 
 function cached (fn) {
   const cache = Object.create(null)
@@ -52,29 +58,184 @@ export const SPECIAL_TOKENS = {
   'NaN': NAN
 }
 
+/**
+ * Needed to prevent stack overflow
+ * while replacing complex objects
+ * like components because we create
+ * new objects with the CustomValue API
+ * (.i.e `{ _custom: { ... } }`)
+ */
+class EncodeCache {
+  constructor () {
+    this.map = new Map()
+  }
+
+  /**
+   * Returns a result unique to each input data
+   * @param {*} data Input data
+   * @param {*} factory Function used to create the unique result
+   */
+  cache (data, factory) {
+    const cached = this.map.get(data)
+    if (cached) {
+      return cached
+    } else {
+      const result = factory(data)
+      this.map.set(data, result)
+      return result
+    }
+  }
+
+  clear () {
+    this.map.clear()
+  }
+}
+
+const encodeCache = new EncodeCache()
+
 export function stringify (data) {
+  // Create a fresh cache for each serialization
+  encodeCache.clear()
   return CircularJSON.stringify(data, replacer)
 }
 
 function replacer (key) {
   const val = this[key]
-  if (val === undefined) {
+  const type = typeof val
+  if (type === 'undefined') {
     return UNDEFINED
   } else if (val === Infinity) {
     return INFINITY
   } else if (val === -Infinity) {
     return NEGATIVE_INFINITY
+  } else if (type === 'function') {
+    return getCustomFunctionDetails(val)
+  } else if (val !== null && type === 'object') {
+    if (val instanceof Map) {
+      return encodeCache.cache(val, () => getCustomMapDetails(val))
+    } else if (val instanceof Set) {
+      return encodeCache.cache(val, () => getCustomSetDetails(val))
+    } else if (val instanceof RegExp) {
+      // special handling of native type
+      return `[native RegExp ${val.toString()}]`
+    } else if (val instanceof Date) {
+      return `[native Date ${val.toString()}]`
+    } else if (val.state && val._vm) {
+      return encodeCache.cache(val, () => getCustomStoreDetails(val))
+    } else if (val.constructor && val.constructor.name === 'VueRouter') {
+      return encodeCache.cache(val, () => getCustomRouterDetails(val))
+    } else if (val._isVue) {
+      return encodeCache.cache(val, () => getCustomInstanceDetails(val))
+    } else if (typeof val.render === 'function') {
+      return encodeCache.cache(val, () => getCustomComponentDefinitionDetails(val))
+    }
   } else if (Number.isNaN(val)) {
     return NAN
-  } else if (val instanceof RegExp) {
-    // special handling of native type
-    return `[native RegExp ${val.toString()}]`
-  } else if (val instanceof Date) {
-    return `[native Date ${val.toString()}]`
-  } else if (val && val._isVue) {
-    return getCustomInstanceDetails(val)
+  }
+  return sanitize(val)
+}
+
+export function getCustomMapDetails (val) {
+  const list = []
+  val.forEach(
+    (value, key) => list.push({
+      key,
+      value
+    })
+  )
+  return {
+    _custom: {
+      type: 'map',
+      display: 'Map',
+      value: list,
+      readOnly: true,
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}
+
+export function reviveMap (val) {
+  const result = new Map()
+  const list = val._custom.value
+  for (let i = 0; i < list.length; i++) {
+    const { key, value } = list[i]
+    result.set(key, reviver(null, value))
+  }
+  return result
+}
+
+export function getCustomSetDetails (val) {
+  const list = Array.from(val)
+  return {
+    _custom: {
+      type: 'set',
+      display: `Set[${list.length}]`,
+      value: list,
+      readOnly: true
+    }
+  }
+}
+
+export function reviveSet (val) {
+  const result = new Set()
+  const list = val._custom.value
+  for (let i = 0; i < list.length; i++) {
+    const value = list[i]
+    result.add(reviver(null, value))
+  }
+  return result
+}
+
+// Use a custom basename functions instead of the shimed version
+// because it doesn't work on Windows
+function basename (filename, ext) {
+  return path.basename(
+    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
+    ext
+  )
+}
+
+export function getComponentName (options) {
+  const name = options.name || options._componentTag
+  if (name) {
+    return name
+  }
+  const file = options.__file // injected by vue-loader
+  if (file) {
+    return classify(basename(file, '.vue'))
+  }
+}
+
+export function getCustomComponentDefinitionDetails (def) {
+  let display = getComponentName(def)
+  if (display) {
+    if (def.name && def.__file) {
+      display += ` <span>(${def.__file})</span>`
+    }
   } else {
-    return sanitize(val)
+    display = '<i>Unknown Component</i>'
+  }
+  return {
+    _custom: {
+      type: 'component-definition',
+      display,
+      tooltip: 'Component definition',
+      ...def.__file ? {
+        file: def.__file
+      } : {}
+    }
+  }
+}
+
+export function getCustomFunctionDetails (func) {
+  const args = func.toString().match(/\(.*\)/)[0]
+  return {
+    _custom: {
+      type: 'function',
+      display: `<span>ƒ</span> ${func.name}${args}`
+    }
   }
 }
 
@@ -98,6 +259,10 @@ function reviver (key, val) {
   } else if (val && val._custom) {
     if (val._custom.type === 'component') {
       return instanceMap.get(val._custom.id)
+    } else if (val._custom.type === 'map') {
+      return reviveMap(val)
+    } else if (val._custom.type === 'set') {
+      return reviveSet(val)
     }
   } else if (specialTypeRE.test(val)) {
     const [, type, string] = specialTypeRE.exec(val)
@@ -237,3 +402,27 @@ export function focusInput (el) {
   el.focus()
   el.setSelectionRange(0, el.value.length)
 }
+
+export function openInEditor (file) {
+  // Console display
+  const fileName = file.replace(/\\/g, '\\\\')
+  const src = `fetch('/__open-in-editor?file=${encodeURI(file)}').then(response => {
+    if (response.ok) {
+      console.log('File ${fileName} opened in editor')
+    } else {
+      const msg = 'Opening component ${fileName} failed'
+      if (__VUE_DEVTOOLS_TOAST__) {
+        __VUE_DEVTOOLS_TOAST__(msg, 'error')
+      } else {
+        console.log('%c' + msg, 'color:red')
+      }
+      console.log('Check the setup of your project, see https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md')
+    }
+  })`
+  if (isChrome) {
+    chrome.devtools.inspectedWindow.eval(src)
+  } else {
+    // eslint-disable-next-line no-eval
+    eval(src)
+  }
+}