diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
index 203cfcc02d..e0a7692e41 100644
--- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
@@ -160,6 +160,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -203,6 +204,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -233,6 +235,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -275,6 +278,7 @@ describe('ReactComponentTreeDevtool', () => {
           }],
         }, {
           displayName: 'hr',
+          element: <hr />,
           children: [],
         }],
       };
@@ -291,8 +295,10 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Foo />;
       var tree = {
         displayName: 'Foo',
+        element,
         children: [{
           displayName: 'div',
+          element: <div />,
           children: [],
         }],
       };
@@ -333,12 +339,15 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Baz />;
       var tree = {
         displayName: 'Baz',
+        element,
         children: [{
           displayName: 'div',
           children: [{
             displayName: 'Foo',
+            element: <Foo />,
             children: [{
               displayName: 'Qux',
+              element: <Qux />,
               children: [],
             }],
           }, {
@@ -349,11 +358,13 @@ describe('ReactComponentTreeDevtool', () => {
                 displayName: 'span',
                 children: [{
                   displayName: '#text',
+                  element: 'Hi,',
                   text: 'Hi,',
                 }],
               }, {
                 displayName: '#text',
                 text: 'Mom',
+                element: 'Mom',
               }],
             }],
           }, {
@@ -361,6 +372,7 @@ describe('ReactComponentTreeDevtool', () => {
             children: [{
               displayName: '#text',
               text: 'Click me.',
+              element: 'Click me.',
             }],
           }],
         }],
@@ -400,6 +412,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{'1'}{2}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '1',
@@ -415,6 +428,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{'1'}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '1',
@@ -427,6 +441,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{42}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '42',
@@ -439,6 +454,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{0}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '0',
@@ -462,16 +478,21 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: 'hi',
+          element: 'hi',
         }, {
           displayName: '#text',
           text: '42',
+          element: 42,
         }, {
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'div',
+            element: <div />,
             children: [],
           }],
         }],
diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
index b65e4dab80..4ba5cdc9d9 100644
--- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <View><Foo /><Baz /><Qux /></View>;
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -273,6 +274,7 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'View',
           children: [{
@@ -281,12 +283,14 @@ describe('ReactComponentTreeDevtool', () => {
               displayName: 'RCText',
               children: [{
                 displayName: '#text',
+                element: 'Hi!',
                 text: 'Hi!',
               }],
             }],
           }],
         }, {
           displayName: 'Image',
+          element: <Image />,
           children: [],
         }],
       };
@@ -303,8 +307,10 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Foo />;
       var tree = {
         displayName: 'Foo',
+        element,
         children: [{
           displayName: 'Image',
+          element: <Image />,
           children: [],
         }],
       };
@@ -344,12 +350,15 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Baz />;
       var tree = {
         displayName: 'Baz',
+        element,
         children: [{
           displayName: 'View',
           children: [{
             displayName: 'Foo',
+            element: <Foo />,
             children: [{
               displayName: 'Qux',
+              element: <Qux />,
               children: [],
             }],
           }, {
@@ -362,6 +371,7 @@ describe('ReactComponentTreeDevtool', () => {
                   displayName: 'RCText',
                   children: [{
                     displayName: '#text',
+                    element: 'Hi,',
                     text: 'Hi,',
                   }],
                 }],
@@ -369,6 +379,7 @@ describe('ReactComponentTreeDevtool', () => {
             }],
           }, {
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }],
@@ -481,16 +492,21 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }, {
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }],
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
index 34b5ca49a7..5468637130 100644
--- a/src/renderers/dom/shared/ReactDOMComponent.js
+++ b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -247,16 +247,34 @@ function optionPostMount() {
 
 var setContentChildForInstrumentation = emptyFunction;
 if (__DEV__) {
-  setContentChildForInstrumentation = function(contentToUse) {
+  setContentChildForInstrumentation = function(content) {
+    var hasExistingContent = this._contentDebugID != null;
     var debugID = this._debugID;
     var contentDebugID = debugID + '#text';
+
+    if (content == null) {
+      if (hasExistingContent) {
+        ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
+      }
+      this._contentDebugID = null;
+      return;
+    }
+
     this._contentDebugID = contentDebugID;
+    var text = '' + content;
+
     ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text');
     ReactInstrumentation.debugTool.onSetParent(contentDebugID, debugID);
-    ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID);
-    ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse);
-    ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
-    ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
+    ReactInstrumentation.debugTool.onSetText(contentDebugID, text);
+
+    if (hasExistingContent) {
+      ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content);
+      ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID);
+    } else {
+      ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content);
+      ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
+      ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
+    }
   };
 }
 
@@ -463,7 +481,7 @@ function ReactDOMComponent(element) {
   this._flags = 0;
   if (__DEV__) {
     this._ancestorInfo = null;
-    this._contentDebugID = null;
+    setContentChildForInstrumentation.call(this, null);
   }
 }
 
@@ -1035,7 +1053,6 @@ ReactDOMComponent.Mixin = {
       if (lastContent !== nextContent) {
         this.updateTextContent('' + nextContent);
         if (__DEV__) {
-          this._contentDebugID = this._debugID + '#text';
           setContentChildForInstrumentation.call(this, nextContent);
         }
       }
@@ -1048,10 +1065,7 @@ ReactDOMComponent.Mixin = {
       }
     } else if (nextChildren != null) {
       if (__DEV__) {
-        if (this._contentDebugID) {
-          ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
-          this._contentDebugID = null;
-        }
+        setContentChildForInstrumentation.call(this, null);
       }
 
       this.updateChildren(nextChildren, transaction, context);
@@ -1113,10 +1127,7 @@ ReactDOMComponent.Mixin = {
     this._wrapperState = null;
 
     if (__DEV__) {
-      if (this._contentDebugID) {
-        ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
-        this._contentDebugID = null;
-      }
+      setContentChildForInstrumentation.call(this, null);
     }
   },
 
diff --git a/src/renderers/shared/stack/reconciler/ReactReconciler.js b/src/renderers/shared/stack/reconciler/ReactReconciler.js
index 149bbedd80..f9e6473b7a 100644
--- a/src/renderers/shared/stack/reconciler/ReactReconciler.js
+++ b/src/renderers/shared/stack/reconciler/ReactReconciler.js
@@ -46,14 +46,14 @@ var ReactReconciler = {
   ) {
     if (__DEV__) {
       if (internalInstance._debugID !== 0) {
-        ReactInstrumentation.debugTool.onBeginReconcilerTimer(
-          internalInstance._debugID,
-          'mountComponent'
-        );
         ReactInstrumentation.debugTool.onBeforeMountComponent(
           internalInstance._debugID,
           internalInstance._currentElement
         );
+        ReactInstrumentation.debugTool.onBeginReconcilerTimer(
+          internalInstance._debugID,
+          'mountComponent'
+        );
       }
     }
     var markup = internalInstance.mountComponent(
@@ -150,14 +150,14 @@ var ReactReconciler = {
 
     if (__DEV__) {
       if (internalInstance._debugID !== 0) {
+        ReactInstrumentation.debugTool.onBeforeUpdateComponent(
+          internalInstance._debugID,
+          nextElement
+        );
         ReactInstrumentation.debugTool.onBeginReconcilerTimer(
           internalInstance._debugID,
           'receiveComponent'
         );
-        ReactInstrumentation.debugTool.onBeforeUpdateComponent(
-          internalInstance._debugID,
-          internalInstance._currentElement
-        );
       }
     }
 
diff --git a/src/test/ReactComponentTreeTestUtils.js b/src/test/ReactComponentTreeTestUtils.js
index 32ba3b37ca..1f5967d3dd 100644
--- a/src/test/ReactComponentTreeTestUtils.js
+++ b/src/test/ReactComponentTreeTestUtils.js
@@ -23,12 +23,13 @@ function getRegisteredDisplayNames() {
     .map(ReactComponentTreeDevtool.getDisplayName);
 }
 
-function expectTree(rootID, expectedTree, parentPath = '') {
+function expectTree(rootID, expectedTree, parentPath) {
   var displayName = ReactComponentTreeDevtool.getDisplayName(rootID);
   var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
   var parentID = ReactComponentTreeDevtool.getParentID(rootID);
   var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
   var text = ReactComponentTreeDevtool.getText(rootID);
+  var element = ReactComponentTreeDevtool.getElement(rootID);
   var path = parentPath ? `${parentPath} > ${displayName}` : displayName;
 
   function expectEqual(actual, expected, name) {
@@ -62,9 +63,21 @@ function expectTree(rootID, expectedTree, parentPath = '') {
   }
   if (expectedTree.text !== undefined) {
     expectEqual(text, expectedTree.text, 'text');
+    expectEqual('' + element, expectedTree.text, 'element.toString()');
   } else {
     expectEqual(text, null, 'text');
   }
+  if (expectedTree.element !== undefined) {
+    // TODO: Comparing elements makes tests run out of memory on errors.
+    // For now, compare just types.
+    expectEqual(
+      element && element.type,
+      expectedTree.element && expectedTree.element.type,
+      'element.type'
+    );
+  } else if (text == null) {
+    expectEqual(typeof element, 'object', 'typeof element');
+  }
   if (expectedTree.children !== undefined) {
     expectEqual(
       childIDs.length,