diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index 3e7f98436..e65f590d0 100644
--- a/cypress/integration/components-tab.js
+++ b/cypress/integration/components-tab.js
@@ -46,25 +46,25 @@ suite('components tab', () => {
 
   it('should expand child instance', () => {
     cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
-    cy.get('.instance').should('have.length', baseInstanceCount + 2)
+    cy.get('.instance').should('have.length', baseInstanceCount + 7)
   })
 
   it('should add/remove component from app side', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('.add').click({ force: true })
     })
-    cy.get('.instance').should('have.length', baseInstanceCount + 5)
+    cy.get('.instance').should('have.length', baseInstanceCount + 10)
     cy.get('#target').iframe().then(({ get }) => {
       get('.remove').click({ force: true })
     })
-    cy.get('.instance').should('have.length', baseInstanceCount + 4)
+    cy.get('.instance').should('have.length', baseInstanceCount + 9)
   })
 
   it('should filter components', () => {
     cy.get('.left .search input').clear().type('counter')
     cy.get('.instance').should('have.length', 1)
     cy.get('.left .search input').clear().type('target')
-    cy.get('.instance').should('have.length', 5)
+    cy.get('.instance').should('have.length', 10)
     cy.get('.left .search input').clear()
   })
 
diff --git a/shells/dev/target/Functional.vue b/shells/dev/target/Functional.vue
new file mode 100644
index 000000000..3fbc65fac
--- /dev/null
+++ b/shells/dev/target/Functional.vue
@@ -0,0 +1,5 @@
+<template functional>
+  <div>
+    Hello {{ props.name }}
+  </div>
+</template>
diff --git a/shells/dev/target/Target.vue b/shells/dev/target/Target.vue
index 9598db6ff..6240ab3e2 100644
--- a/shells/dev/target/Target.vue
+++ b/shells/dev/target/Target.vue
@@ -18,14 +18,25 @@
       >Inspect component</button>
       <span v-if="over" class="over">Mouse over</span>
     </div>
+    <div>
+      <Functional
+        v-for="n in 5"
+        :key="n"
+        :name="`Row ${n}`"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Other from './Other.vue'
 import MyClass from './MyClass.js'
+import Functional from './Functional.vue'
 export default {
-  components: { Other },
+  components: {
+    Other,
+    Functional
+  },
   props: {
     msg: String,
     obj: null,
diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
index a0834f01b..5b0c2430f 100644
--- a/src/backend/highlighter.js
+++ b/src/backend/highlighter.js
@@ -1,4 +1,4 @@
-import { inDoc, classify } from '../util'
+import { inDoc, classify, getComponentName } from '../util'
 import { getInstanceName } from './index'
 import SharedData from 'src/shared-data'
 
@@ -28,10 +28,10 @@ overlay.appendChild(overlayContent)
 
 export function highlight (instance) {
   if (!instance) return
-  const rect = getInstanceRect(instance)
+  const rect = getInstanceOrVnodeRect(instance)
   if (rect) {
     let content = ''
-    let name = getInstanceName(instance)
+    let name = instance.fnContext ? getComponentName(instance.fnOptions) : getInstanceName(instance)
     if (SharedData.classifyComponents) name = classify(name)
     if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
     showOverlay(rect, content)
@@ -55,14 +55,15 @@ export function unHighlight () {
  * @return {Object}
  */
 
-export function getInstanceRect (instance) {
-  if (!inDoc(instance.$el)) {
+export function getInstanceOrVnodeRect (instance) {
+  const el = instance.$el || instance.elm
+  if (!inDoc(el)) {
     return
   }
   if (instance._isFragment) {
     return getFragmentRect(instance)
-  } else if (instance.$el.nodeType === 1) {
-    return instance.$el.getBoundingClientRect()
+  } else if (el.nodeType === 1) {
+    return el.getBoundingClientRect()
   }
 }
 
diff --git a/src/backend/index.js b/src/backend/index.js
index 0064cf35f..6fdc8f39f 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,7 +1,7 @@
 // This is the backend that is injected into the page that a Vue app lives in
 // when the Vue Devtools panel is activated.
 
-import { highlight, unHighlight, getInstanceRect } from './highlighter'
+import { highlight, unHighlight, getInstanceOrVnodeRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
 import { findRelatedComponent } from './utils'
@@ -15,6 +15,7 @@ const rootInstances = []
 const propModes = ['default', 'sync', 'once']
 
 export const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
+export const functionalVnodeMap = window.__VUE_DEVTOOLS_FUNCTIONAL_VNODE_MAP__ = new Map()
 const consoleBoundInstances = Array(5)
 let currentInspectedId
 let bridge
@@ -22,6 +23,7 @@ let filter = ''
 let captureCount = 0
 let isLegacy = false
 let rootUID = 0
+let functionalIds = new Map()
 
 export function initBackend (_bridge) {
   bridge = _bridge
@@ -62,14 +64,14 @@ function connect (Vue) {
 
   bridge.on('select-instance', id => {
     currentInspectedId = id
-    const instance = instanceMap.get(id)
-    bindToConsole(instance)
+    const instance = findInstanceOrVnode(id)
+    if (!/:functional:/.test(id)) bindToConsole(instance)
     flush()
     bridge.send('instance-selected')
   })
 
   bridge.on('scroll-to-instance', id => {
-    const instance = instanceMap.get(id)
+    const instance = findInstanceOrVnode(id)
     instance && scrollIntoView(instance)
   })
 
@@ -80,7 +82,7 @@ function connect (Vue) {
 
   bridge.on('refresh', scan)
 
-  bridge.on('enter-instance', id => highlight(instanceMap.get(id)))
+  bridge.on('enter-instance', id => highlight(findInstanceOrVnode(id)))
 
   bridge.on('leave-instance', unHighlight)
 
@@ -145,6 +147,15 @@ function connect (Vue) {
   setTimeout(scan, 0)
 }
 
+export function findInstanceOrVnode (id) {
+  if (/:functional:/.test(id)) {
+    const [refId] = id.split(':functional:')
+
+    return functionalVnodeMap.get(refId)[id]
+  }
+  return instanceMap.get(id)
+}
+
 /**
  * Scan the page for root level Vue instances.
  */
@@ -225,6 +236,7 @@ function walk (node, fn) {
 
 function flush () {
   let start
+  functionalIds.clear()
   if (process.env.NODE_ENV !== 'production') {
     captureCount = 0
     start = window.performance.now()
@@ -262,20 +274,27 @@ function findQualifiedChildrenFromList (instances) {
  * If the instance itself is qualified, just return itself.
  * This is ok because [].concat works in both cases.
  *
- * @param {Vue} instance
+ * @param {Vue|Vnode} instance
  * @return {Vue|Array}
  */
 
 function findQualifiedChildren (instance) {
   return isQualified(instance)
     ? capture(instance)
-    : findQualifiedChildrenFromList(instance.$children)
+    : findQualifiedChildrenFromList(instance.$children).concat(
+      instance._vnode && instance._vnode.children
+        // Find functional components in recursively in non-functional vnodes.
+        ? flatten(instance._vnode.children.filter(child => !child.componentInstance).map(captureChild))
+          // Filter qualified children.
+          .filter(({ name }) => name.indexOf(filter) > -1)
+        : []
+    )
 }
 
 /**
  * Check if an instance is qualified.
  *
- * @param {Vue} instance
+ * @param {Vue|Vnode} instance
  * @return {Boolean}
  */
 
@@ -284,6 +303,25 @@ function isQualified (instance) {
   return name.indexOf(filter) > -1
 }
 
+function flatten (items) {
+  return items.reduce((acc, item) => {
+    if (item instanceof Array) acc.push(...flatten(item))
+    else if (item) acc.push(item)
+
+    return acc
+  }, [])
+}
+
+function captureChild (child) {
+  if (child.fnContext) {
+    return capture(child)
+  } else if (child.componentInstance) {
+    if (!child._isBeingDestroyed) return capture(child.componentInstance)
+  } else if (child.children) {
+    return flatten(child.children.map(captureChild))
+  }
+}
+
 /**
  * Capture the meta information of an instance. (recursive)
  *
@@ -291,10 +329,38 @@ function isQualified (instance) {
  * @return {Object}
  */
 
-function capture (instance, _, list) {
+function capture (instance, index, list) {
   if (process.env.NODE_ENV !== 'production') {
     captureCount++
   }
+
+  // Functional component.
+  if (instance.fnContext) {
+    const contextUid = instance.fnContext.__VUE_DEVTOOLS_UID__
+    let id = functionalIds.get(contextUid)
+    if (id == null) {
+      id = 0
+    } else {
+      id++
+    }
+    functionalIds.set(contextUid, id)
+    const functionalId = contextUid + ':functional:' + id
+    markFunctional(functionalId, instance)
+    return {
+      id: functionalId,
+      functional: true,
+      name: getComponentName(instance.fnOptions) || 'Anonymous Component',
+      renderKey: getRenderKey(instance.key),
+      children: instance.children ? instance.children.map(
+        child => child.fnContext
+          ? capture(child)
+          : child.componentInstance
+            ? capture(child.componentInstance)
+            : undefined).filter(Boolean) : [],
+      inactive: false, // TODO: Check what is it for.
+      isFragment: false // TODO: Check what is it for.
+    }
+  }
   // instance._uid is not reliable in devtools as there
   // may be 2 roots with same _uid which causes unexpected
   // behaviour
@@ -306,13 +372,13 @@ function capture (instance, _, list) {
     renderKey: getRenderKey(instance.$vnode ? instance.$vnode['key'] : null),
     inactive: !!instance._inactive,
     isFragment: !!instance._isFragment,
-    children: instance.$children
-      .filter(child => !child._isBeingDestroyed)
-      .map(capture)
+    children: instance._vnode.children
+      ? flatten((instance._vnode.children).map(captureChild))
+      : instance.$children.filter(child => !child._isBeingDestroyed).map(capture)
   }
   // record screen position to ensure correct ordering
   if ((!list || list.length > 1) && !instance._inactive) {
-    const rect = getInstanceRect(instance)
+    const rect = getInstanceOrVnodeRect(instance)
     ret.top = rect ? rect.top : Infinity
   } else {
     ret.top = Infinity
@@ -353,6 +419,18 @@ function mark (instance) {
   }
 }
 
+function markFunctional (id, vnode) {
+  const refId = vnode.fnContext.__VUE_DEVTOOLS_UID__
+  if (!functionalVnodeMap.has(refId)) {
+    functionalVnodeMap.set(refId, {})
+    vnode.fnContext.$on('hook:beforeDestroy', function () {
+      functionalVnodeMap.delete(refId)
+    })
+  }
+
+  functionalVnodeMap.get(refId)[id] = vnode
+}
+
 /**
  * Get the detailed information of an inspected instance.
  *
@@ -362,7 +440,19 @@ function mark (instance) {
 function getInstanceDetails (id) {
   const instance = instanceMap.get(id)
   if (!instance) {
-    return {}
+    const vnode = findInstanceOrVnode(id)
+
+    if (!vnode) return {}
+
+    const data = {
+      id,
+      name: getComponentName(vnode.fnOptions),
+      file: vnode.fnOptions.__file || null,
+      state: processProps({ $options: vnode.fnOptions, ...(vnode.devtoolsMeta && vnode.devtoolsMeta.props) }),
+      functional: true
+    }
+
+    return data
   } else {
     const data = {
       id: id,
@@ -427,7 +517,7 @@ export function reduceStateList (list) {
  */
 
 export function getInstanceName (instance) {
-  const name = getComponentName(instance.$options)
+  const name = getComponentName(instance.$options || instance.fnOptions)
   if (name) return name
   return instance.$root === instance
     ? 'Root'
@@ -701,7 +791,7 @@ function processObservables (instance) {
  */
 
 function scrollIntoView (instance) {
-  const rect = getInstanceRect(instance)
+  const rect = getInstanceOrVnodeRect(instance)
   if (rect) {
     window.scrollBy(0, rect.top + (rect.height - window.innerHeight) / 2)
   }
@@ -715,6 +805,7 @@ function scrollIntoView (instance) {
  */
 
 function bindToConsole (instance) {
+  if (!instance) return
   const id = instance.__VUE_DEVTOOLS_UID__
   const index = consoleBoundInstances.indexOf(id)
   if (index > -1) {
diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue
index bb0813336..89e9b41a8 100644
--- a/src/devtools/views/components/ComponentInstance.vue
+++ b/src/devtools/views/components/ComponentInstance.vue
@@ -2,14 +2,18 @@
   <div
     :class="{
       inactive: instance.inactive,
-      selected: selected
+      selected
     }"
     class="instance"
   >
     <div
       ref="self"
-      :class="{ selected: selected }"
-      :style="{ paddingLeft: depth * 15 + 'px' }"
+      :class="{
+        selected
+      }"
+      :style="{
+        paddingLeft: depth * 15 + 'px'
+      }"
       class="self selectable-item"
       @click.stop="select"
       @dblclick.stop="toggle"
@@ -68,6 +72,12 @@
       >
         inactive
       </span>
+      <span
+        v-if="instance.functional"
+        class="info functional"
+      >
+        functional
+      </span>
 
       <span class="spacer" />
 
@@ -91,6 +101,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import { classify, scrollIntoView, UNDEFINED } from '../../../util'
 
 export default {
@@ -108,16 +119,18 @@ export default {
   },
 
   computed: {
-    scrollToExpanded () {
-      return this.$store.state.components.scrollToExpanded
-    },
+    ...mapState('components', [
+      'expansionMap',
+      'inspectedInstance',
+      'scrollToExpanded'
+    ]),
 
     expanded () {
-      return !!this.$store.state.components.expansionMap[this.instance.id]
+      return !!this.expansionMap[this.instance.id]
     },
 
     selected () {
-      return this.instance.id === this.$store.state.components.inspectedInstance.id
+      return this.instance.id === this.inspectedInstance.id
     },
 
     sortedChildren () {
@@ -263,6 +276,12 @@ export default {
     background-color #b3cbf7
   &.inactive
     background-color #aaa
+  &.functional
+    background-color rgba($md-black, .06)
+    color: rgba($md-black, .5)
+    .vue-ui-dark-mode &
+      background-color rgba($md-white, .06)
+      color rgba($md-white, .5)
   &:not(.console)
     margin-left 6px
 
@@ -325,4 +344,6 @@ export default {
     opacity 1
   .attr-title
     color lighten($purple, 70%)
+  .info.functional
+    color $md-white
 </style>
diff --git a/src/devtools/views/components/ComponentTree.vue b/src/devtools/views/components/ComponentTree.vue
index 709e99ddb..ea3f81baa 100644
--- a/src/devtools/views/components/ComponentTree.vue
+++ b/src/devtools/views/components/ComponentTree.vue
@@ -183,6 +183,7 @@ export default {
         }
       }
     },
+
     updateAutoDensity () {
       if (this.$shared.displayDensity === 'auto') {
         this.$nextTick(() => {