From 09a2c363a5175291ecdcbf7f39b0d165bc7da8ec Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 22 Dec 2020 17:09:29 +0100
Subject: [PATCH] Expose DEV-mode warnings in devtools UI (#20463)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../react-devtools-core/src/standalone.js     |    4 +
 .../react-devtools-extensions/src/main.js     |   13 +-
 packages/react-devtools-inline/src/backend.js |    3 +
 .../react-devtools-inline/src/frontend.js     |    2 +
 .../ownersListContext-test.js.snap            |    8 +-
 .../storeComponentFilters-test.js.snap        |  140 --
 .../__snapshots__/treeContext-test.js.snap    | 1293 ----------
 .../__tests__/inspectedElementContext-test.js |  463 +++-
 .../src/__tests__/profilerStore-test.js       |   15 +
 .../src/__tests__/setupTests.js               |   31 +
 .../src/__tests__/store-test.js               |  314 +++
 .../__tests__/storeComponentFilters-test.js   |  261 +-
 .../src/__tests__/treeContext-test.js         | 2179 +++++++++++++++--
 .../__tests__/treeContextStateSerializer.js   |   24 +
 .../src/__tests__/utils.js                    |   34 +
 .../src/backend/agent.js                      |   38 +-
 .../src/backend/console.js                    |  102 +-
 .../src/backend/legacy/renderer.js            |   21 +
 .../src/backend/renderer.js                   |  204 +-
 .../src/backend/types.js                      |    5 +
 .../src/backend/utils.js                      |   49 +
 packages/react-devtools-shared/src/bridge.js  |    4 +
 .../react-devtools-shared/src/constants.js    |    5 +
 .../src/devtools/store.js                     |  152 ++
 .../src/devtools/utils.js                     |   99 +-
 .../src/devtools/views/Components/Element.css |   18 +
 .../src/devtools/views/Components/Element.js  |   52 +-
 .../Components/InspectedElementContext.js     |   18 +
 .../InspectedElementErrorsAndWarningsTree.css |   60 +
 .../InspectedElementErrorsAndWarningsTree.js  |  157 ++
 .../InspectedElementSharedStyles.css          |    2 +
 .../views/Components/InspectedElementView.js  |    8 +
 .../devtools/views/Components/SearchInput.js  |   72 +-
 .../src/devtools/views/Components/Tree.css    |   21 +
 .../src/devtools/views/Components/Tree.js     |   68 +-
 .../devtools/views/Components/TreeContext.js  |   87 +
 .../src/devtools/views/Components/types.js    |    2 +
 .../src/devtools/views/Icon.js                |   14 +-
 .../views/Profiler/CommitTreeBuilder.js       |   20 +
 .../views/Settings/DebuggingSettings.js       |   19 +
 .../views/Settings/SettingsContext.js         |   42 +-
 .../devtools/views/Settings/SettingsModal.css |    2 +-
 .../views/Settings/SettingsShared.css         |    3 +-
 .../src/devtools/views/root.css               |   20 +
 packages/react-devtools-shared/src/hook.js    |    3 +
 packages/react-devtools-shared/src/utils.js   |   39 +
 .../src/app/InlineWarnings/index.js           |  181 ++
 .../react-devtools-shell/src/app/index.js     |    2 +
 packages/react-devtools/OVERVIEW.md           |   31 +-
 scripts/jest/config.build-devtools.js         |    3 +
 50 files changed, 4613 insertions(+), 1794 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
 create mode 100644 packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
 create mode 100644 packages/react-devtools-shell/src/app/InlineWarnings/index.js

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 817b34386c205..e31b43d724d1b 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -20,6 +20,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -303,6 +304,9 @@ function startServer(
       )};
       window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
         getSavedComponentFilters(),
+      )};
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+        getShowInlineWarningsAndErrors(),
       )};`;
 
     response.end(
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 00e3735c72c11..d8789e1c69afc 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -10,6 +10,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -29,18 +30,18 @@ let panelCreated = false;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
-  const appendComponentStack = getAppendComponentStack();
-  const breakOnConsoleErrors = getBreakOnConsoleErrors();
-  const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-      appendComponentStack,
+      getAppendComponentStack(),
     )};
     window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
-      breakOnConsoleErrors,
+      getBreakOnConsoleErrors(),
     )};
     window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      componentFilters,
+      getSavedComponentFilters(),
+    )};
+    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+      getShowInlineWarningsAndErrors(),
     )};`,
   );
 }
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index fb46276924652..7a5bd57b928eb 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -24,11 +24,13 @@ function startActivation(contentWindow: window) {
           appendComponentStack,
           breakOnConsoleErrors,
           componentFilters,
+          showInlineWarningsAndErrors,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+        contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
 
         // TRICKY
         // The backend entry point may be required in the context of an iframe or the parent window.
@@ -40,6 +42,7 @@ function startActivation(contentWindow: window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
         }
 
         finishActivation(contentWindow);
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 9a5c145471139..3972f1789ab74 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -9,6 +9,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -41,6 +42,7 @@ export function initialize(
             appendComponentStack: getAppendComponentStack(),
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
+            showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
           },
           '*',
         );
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index 25e56daf6f44e..d5e244adf062f 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -12,19 +12,19 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 7,
+    "id": 2,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
-    "id": 9,
+    "id": 3,
     "type": 5,
   },
   Object {
     "displayName": "Child",
     "hocDisplayNames": null,
-    "id": 8,
+    "id": 4,
     "type": 5,
   },
 ]
@@ -115,7 +115,7 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 5,
+    "id": 2,
     "type": 5,
   },
 ]
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
deleted file mode 100644
index 49035b9927836..0000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ /dev/null
@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Store component filters should filter HOCs: 1: mount 1`] = `
-[root]
-  ▾ <Component> [Bar][Foo]
-    ▾ <Component> [Foo]
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `
-[root]
-  ▾ <Component> [Bar][Foo]
-    ▾ <Component> [Foo]
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should filter by display name: 1: mount 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-  ▾ <Bar>
-      <Text>
-  ▾ <Baz>
-      <Text>
-`;
-
-exports[`Store component filters should filter by display name: 2: filter "Foo" 1`] = `
-[root]
-    <Text>
-  ▾ <Bar>
-      <Text>
-  ▾ <Baz>
-      <Text>
-`;
-
-exports[`Store component filters should filter by display name: 3: filter "Ba" 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-    <Text>
-    <Text>
-`;
-
-exports[`Store component filters should filter by display name: 4: filter "B.z" 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-  ▾ <Bar>
-      <Text>
-    <Text>
-`;
-
-exports[`Store component filters should filter by path: 1: mount 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;
-
-exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-      <div>
-`;
-
-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `
-[root]
-  ▾ <Root>
-      <div>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Loading>
-        <div>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 3: suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Loading>
-        <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `
-[root]
-  ▾ <Root>
-      <Component>
-`;
-
-exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `
-[root]
-  ▾ <div>
-    ▾ <Component>
-        <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `
-[root]
-  ▾ <div>
-      <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component>
-          <div>
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
deleted file mode 100644
index 1e72710e4bd2b..0000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ /dev/null
@@ -1,1293 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `
-[root]
-  ▾ <Parent>
-    ▾ <Suspense>
-      ▾ <Child>
-        ▾ <Suspense>
-            <Grandchild>
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 5,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 3,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [
-        6,
-      ],
-      "depth": 1,
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 4,
-      "type": 12,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 2,
-      "displayName": "Grandchild",
-      "hocDisplayNames": null,
-      "id": 6,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 5,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 4,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 3,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [
-        6,
-      ],
-      "depth": 1,
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 4,
-      "type": 12,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 2,
-      "displayName": "Grandchild",
-      "hocDisplayNames": null,
-      "id": 6,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 5,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 4,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 5,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Parent>
-      <Child>
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 0,
-      "parentID": 2,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 1,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 0,
-      "parentID": 1,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 2,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 0,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": "0",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": "1",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": "0",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-    <Baz>
-    <Qux> [withHOC]
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    2,
-  ],
-  "searchText": "f",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "y",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    5,
-  ],
-  "searchText": "w",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-    <Baz>
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-  ],
-  "searchText": "ba",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Baz>
-    <Bar>
-    <Baz>
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 2,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 2,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 0,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should navigate next/previous sibling and skip over children in between: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`TreeListContext tree state should navigate the owner hierarchy: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Wrapper>
-      ▾ <Parent>
-          <Child key="0">
-    ▾ <Wrapper>
-      ▾ <Parent>
-          <Child key="0">
-          <Child key="1">
-          <Child key="2">
-    ▾ <Wrapper>
-      ▾ <Parent>
-          <Child key="0">
-          <Child key="1">
-`;
-
-exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `
-Object {
-  "inspectedElementID": 8,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 8,
-  "selectedElementIndex": 6,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `
-Object {
-  "inspectedElementID": 6,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 6,
-  "selectedElementIndex": 4,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index f08a3d9d68074..153bb43801ba2 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -15,6 +15,7 @@ import type {
 } from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
+import {withErrorsOrWarningsIgnored} from 'react-devtools-shared/src/__tests__/utils';
 
 describe('InspectedElementContext', () => {
   let React;
@@ -66,6 +67,10 @@ describe('InspectedElementContext', () => {
       .TreeContextController;
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   const Contexts = ({
     children,
     defaultSelectedElementID = null,
@@ -386,10 +391,10 @@ describe('InspectedElementContext', () => {
   it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {
     let targetRenderCount = 0;
 
-    const errorSpy = ((console: any).error = jest.fn());
-    const infoSpy = ((console: any).info = jest.fn());
-    const logSpy = ((console: any).log = jest.fn());
-    const warnSpy = ((console: any).warn = jest.fn());
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.spyOn(console, 'info').mockImplementation(() => {});
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
 
     const Target = React.memo(props => {
       targetRenderCount++;
@@ -407,14 +412,14 @@ describe('InspectedElementContext', () => {
     );
 
     expect(targetRenderCount).toBe(1);
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(errorSpy).toHaveBeenCalledWith('error');
-    expect(infoSpy).toHaveBeenCalledTimes(1);
-    expect(infoSpy).toHaveBeenCalledWith('info');
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy).toHaveBeenCalledWith('log');
-    expect(warnSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy).toHaveBeenCalledWith('warn');
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledWith('error');
+    expect(console.info).toHaveBeenCalledTimes(1);
+    expect(console.info).toHaveBeenCalledWith('info');
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledWith('log');
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith('warn');
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
@@ -442,10 +447,10 @@ describe('InspectedElementContext', () => {
 
     expect(inspectedElement).not.toBe(null);
     expect(targetRenderCount).toBe(2);
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(infoSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.info).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
 
     done();
   });
@@ -1569,21 +1574,20 @@ describe('InspectedElementContext', () => {
     );
     expect(storeAsGlobal).not.toBeNull();
 
-    const logSpy = jest.fn();
-    spyOn(console, 'log').and.callFake(logSpy);
+    jest.spyOn(console, 'log').mockImplementation(() => {});
 
     // Should store the whole value (not just the hydrated parts)
     storeAsGlobal(id, ['props', 'nestedObject']);
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(console.log).toHaveBeenCalledWith('$reactTemp1');
     expect(global.$reactTemp1).toBe(nestedObject);
 
-    logSpy.mockReset();
+    console.log.mockReset();
 
     // Should store the nested property specified (not just the outer value)
     storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
+    expect(console.log).toHaveBeenCalledWith('$reactTemp2');
     expect(global.$reactTemp2).toBe(nestedObject.a.b);
 
     done();
@@ -1805,4 +1809,421 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  describe('inline errors and warnings', () => {
+    // Some actions require the Fiber id.
+    // In those instances you might want to make assertions based on the ID instead of the index.
+    function getErrorsAndWarningsForElement(id: number) {
+      const index = ((store.getIndexOfElementID(id): any): number);
+      return getErrorsAndWarningsForElementAtIndex(index);
+    }
+
+    async function getErrorsAndWarningsForElementAtIndex(index) {
+      const id = ((store.getElementIDAtIndex(index): any): number);
+
+      let errors = null;
+      let warnings = null;
+
+      function Suspender({target}) {
+        const {getInspectedElement} = React.useContext(InspectedElementContext);
+        const inspectedElement = getInspectedElement(id);
+        errors = inspectedElement.errors;
+        warnings = inspectedElement.warnings;
+        return null;
+      }
+
+      let root;
+      await utils.actAsync(() => {
+        root = TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        );
+      }, false);
+      await utils.actAsync(() => {
+        root.unmount();
+      }, false);
+
+      return {errors, warnings};
+    }
+
+    it('during render get recorded', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      const container = document.createElement('div');
+
+      await withErrorsOrWarningsIgnored(['test-only: '], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: render error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "test-only: render warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during render get deduped', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        console.warn('test-only: render warning');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: render error",
+              2,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "test-only: render warning",
+              3,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during layout (mount) get recorded', async () => {
+      const Example = () => {
+        // Note we only test mount because once the component unmounts,
+        // it is no longer in the store and warnings are ignored.
+        React.useLayoutEffect(() => {
+          console.error('test-only: useLayoutEffect error');
+          console.warn('test-only: useLayoutEffect warning');
+        }, []);
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: useLayoutEffect error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "test-only: useLayoutEffect warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during passive (mount) get recorded', async () => {
+      const Example = () => {
+        // Note we only test mount because once the component unmounts,
+        // it is no longer in the store and warnings are ignored.
+        React.useEffect(() => {
+          console.error('test-only: useEffect error');
+          console.warn('test-only: useEffect warning');
+        }, []);
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: useEffect error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "test-only: useEffect warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('from react get recorded without a component stack', async () => {
+      const Example = () => {
+        return [<div />];
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(
+        ['Warning: Each child in a list should have a unique "key" prop.'],
+        async () => {
+          await utils.actAsync(() =>
+            ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          );
+        },
+      );
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "Warning: Each child in a list should have a unique \\"key\\" prop. See https://reactjs.org/link/warning-keys for more information.",
+              1,
+            ],
+          ],
+          "warnings": Array [],
+        }
+      `);
+    });
+
+    it('can be cleared for the whole app', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      store.clearErrorsAndWarnings();
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [],
+          "warnings": Array [],
+        }
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only errors)', async () => {
+      const Example = ({id}) => {
+        console.error(`test-only: render error #${id}`);
+        console.warn(`test-only: render warning #${id}`);
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      store.clearWarningsForElement(2);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+        ]
+      `);
+
+      store.clearWarningsForElement(1);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+        ]
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only warnings)', async () => {
+      const Example = ({id}) => {
+        console.error(`test-only: render error #${id}`);
+        console.warn(`test-only: render warning #${id}`);
+        return null;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      store.clearErrorsForElement(2);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+
+      store.clearErrorsForElement(1);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 3a6a78597935a..dca154ad170c6 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -120,4 +120,19 @@ describe('ProfilerStore', () => {
     expect(data.commitData).toHaveLength(1);
     expect(data.operations).toHaveLength(1);
   });
+
+  it('should throw if component filters are modified while profiling', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+
+    expect(() => {
+      utils.act(() => {
+        const {
+          ElementTypeHostComponent,
+        } = require('react-devtools-shared/src/types');
+        store.componentFilters = [
+          utils.createElementTypeFilter(ElementTypeHostComponent),
+        ];
+      });
+    }).toThrow('Cannot modify filter preferences while profiling');
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index e1f7f13f76b2c..b244c7e0cf17e 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -33,11 +33,24 @@ env.beforeEach(() => {
   const {
     getDefaultComponentFilters,
     saveComponentFilters,
+    setShowInlineWarningsAndErrors,
   } = require('react-devtools-shared/src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
 
+  // Use utils.js#withErrorsOrWarningsIgnored instead of directly mutating this array.
+  global._ignoredErrorOrWarningMessages = [];
+  function shouldIgnoreConsoleErrorOrWarn(args) {
+    const firstArg = args[0];
+    if (typeof firstArg !== 'string') {
+      return false;
+    }
+    return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {
+      return firstArg.indexOf(errorOrWarningMessage) !== -1;
+    });
+  }
+
   const originalConsoleError = console.error;
   // $FlowFixMe
   console.error = (...args) => {
@@ -54,14 +67,32 @@ env.beforeEach(() => {
       // DevTools intentionally wraps updates with acts from both DOM and test-renderer,
       // since test updates are expected to impact both renderers.
       return;
+    } else if (shouldIgnoreConsoleErrorOrWarn(args)) {
+      // Allows testing how DevTools behaves when it encounters console.error without cluttering the test output.
+      // Errors can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored
+      return;
     }
     originalConsoleError.apply(console, args);
   };
+  const originalConsoleWarn = console.warn;
+  // $FlowFixMe
+  console.warn = (...args) => {
+    if (shouldIgnoreConsoleErrorOrWarn(args)) {
+      // Allows testing how DevTools behaves when it encounters console.warn without cluttering the test output.
+      // Warnings can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored
+      return;
+    }
+    originalConsoleWarn.apply(console, args);
+  };
 
   // Initialize filters to a known good state.
   saveComponentFilters(getDefaultComponentFilters());
   global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
 
+  // Also initialize inline warnings so that we can test them.
+  setShowInlineWarningsAndErrors(true);
+  global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true;
+
   installHook(global);
 
   const bridgeListeners = [];
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 92face2f37655..33d3bc0a072a3 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -14,6 +14,7 @@ describe('Store', () => {
   let act;
   let getRendererID;
   let store;
+  let withErrorsOrWarningsIgnored;
 
   beforeEach(() => {
     agent = global.agent;
@@ -25,6 +26,7 @@ describe('Store', () => {
     const utils = require('./utils');
     act = utils.act;
     getRendererID = utils.getRendererID;
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
   it('should not allow a root node to be collapsed', () => {
@@ -1008,4 +1010,316 @@ describe('Store', () => {
       done();
     });
   });
+
+  describe('inline errors and warnings', () => {
+    it('during render are counted', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    it('during layout get counted', () => {
+      function Example() {
+        React.useLayoutEffect(() => {
+          console.error('test-only: layout error');
+          console.warn('test-only: layout warning');
+        });
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    // This is not great, but it seems safer than potentially flushing between commits.
+    // Our logic for determining how to handle e.g. suspended trees or error boundaries
+    // is built on the assumption that we're evaluating the results of a commit, not an in-progress render.
+    it('during passive get counted (but not until the next commit)', () => {
+      function Example() {
+        React.useEffect(() => {
+          console.error('test-only: passive error');
+          console.warn('test-only: passive warning');
+        });
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <Example>
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    it('from react get counted', () => {
+      const container = document.createElement('div');
+      function Example() {
+        return [<Child />];
+      }
+      function Child() {
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(
+        ['Warning: Each child in a list should have a unique "key" prop'],
+        () => {
+          act(() => ReactDOM.render(<Example />, container));
+        },
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+          ▾ <Example> ✕
+              <Child>
+      `);
+    });
+
+    it('can be cleared for the whole app', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearErrorsAndWarnings();
+      // flush events to the renderer
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <Example>
+            <Example>
+      `);
+    });
+
+    it('can be cleared for particular Fiber (only warnings)', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearWarningsForElement(2);
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 1
+        [root]
+            <Example> ✕⚠
+            <Example> ✕
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only errors)', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearErrorsForElement(2);
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ⚠
+      `);
+    });
+
+    it('are updated when fibers are removed from the tree', () => {
+      function ComponentWithWarning() {
+        console.warn('test-only: render warning');
+        return null;
+      }
+      function ComponentWithError() {
+        console.error('test-only: render error');
+        return null;
+      }
+      function ComponentWithWarningAndError() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithWarning />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<React.Fragment />, container));
+      });
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index a8a0e151ef748..4a365acb0ef3c 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -48,22 +48,28 @@ describe('Store component filters', () => {
   });
 
   it('should support filtering by element type', () => {
-    class Root extends React.Component<{|children: React$Node|}> {
+    class ClassComponent extends React.Component<{|children: React$Node|}> {
       render() {
         return <div>{this.props.children}</div>;
       }
     }
-    const Component = () => <div>Hi</div>;
+    const FunctionComponent = () => <div>Hi</div>;
 
     act(() =>
       ReactDOM.render(
-        <Root>
-          <Component />
-        </Root>,
+        <ClassComponent>
+          <FunctionComponent />
+        </ClassComponent>,
         document.createElement('div'),
       ),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
 
     act(
       () =>
@@ -71,8 +77,11 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeHostComponent),
         ]),
     );
-
-    expect(store).toMatchSnapshot('2: hide host components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+            <FunctionComponent>
+    `);
 
     act(
       () =>
@@ -80,8 +89,12 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeClass),
         ]),
     );
-
-    expect(store).toMatchSnapshot('3: hide class components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+          ▾ <FunctionComponent>
+              <div>
+    `);
 
     act(
       () =>
@@ -90,8 +103,11 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeFunction),
         ]),
     );
-
-    expect(store).toMatchSnapshot('4: hide class and function components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+            <div>
+    `);
 
     act(
       () =>
@@ -100,15 +116,33 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeFunction, false),
         ]),
     );
-
-    expect(store).toMatchSnapshot('5: disable all filters');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
+
+    act(() => (store.componentFilters = []));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
   });
 
   it('should ignore invalid ElementTypeRoot filter', () => {
-    const Root = () => <div>Hi</div>;
+    const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(
       () =>
@@ -117,7 +151,11 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot('2: add invalid filter');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
   });
 
   it('should filter by display name', () => {
@@ -136,27 +174,59 @@ describe('Store component filters', () => {
         document.createElement('div'),
       ),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
 
     act(
       () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
     );
-    expect(store).toMatchSnapshot('2: filter "Foo"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
 
     act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));
-    expect(store).toMatchSnapshot('3: filter "Ba"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+          <Text>
+          <Text>
+    `);
 
     act(
       () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
     );
-    expect(store).toMatchSnapshot('4: filter "B.z"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+          <Text>
+    `);
   });
 
   it('should filter by path', () => {
     const Component = () => <div>Hi</div>;
 
     act(() => ReactDOM.render(<Component />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(
       () =>
@@ -165,9 +235,7 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot(
-      '2: hide all components declared within this test filed',
-    );
+    expect(store).toMatchInlineSnapshot(`[root]`);
 
     act(
       () =>
@@ -176,7 +244,11 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot('3: hide components in a made up fake path');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
   });
 
   it('should filter HOCs', () => {
@@ -187,15 +259,29 @@ describe('Store component filters', () => {
     Bar.displayName = 'Bar(Foo(Component))';
 
     act(() => ReactDOM.render(<Bar />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
 
     act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
-
-    expect(store).toMatchSnapshot('2: hide all HOCs');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(() => (store.componentFilters = [utils.createHOCFilter(false)]));
-
-    expect(store).toMatchSnapshot('3: disable HOC filter');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
   });
 
   it('should not send a bridge update if the set of enabled filters has not changed', () => {
@@ -252,12 +338,117 @@ describe('Store component filters', () => {
 
     const container = document.createElement('div');
     act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
-    expect(store).toMatchSnapshot('1: suspended');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
 
     act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
-    expect(store).toMatchSnapshot('2: resolved');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+            <Component>
+    `);
 
     act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
-    expect(store).toMatchSnapshot('3: suspended');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
+  });
+
+  describe('inline errors and warnings', () => {
+    it('only counts for unfiltered components', () => {
+      function ComponentWithWarning() {
+        console.warn('test-only: render warning');
+        return null;
+      }
+      function ComponentWithError() {
+        console.error('test-only: render error');
+        return null;
+      }
+      function ComponentWithWarningAndError() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(
+          () =>
+            (store.componentFilters = [
+              utils.createDisplayNameFilter('Warning'),
+              utils.createDisplayNameFilter('Error'),
+            ]),
+        );
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+
+      act(() => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+            <ComponentWithError> ✕
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Error')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 1
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+
+      act(() => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+    });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 0b672f91415f6..8c057fb720807 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -22,6 +22,7 @@ describe('TreeListContext', () => {
   let bridge: FrontendBridge;
   let store: Store;
   let utils;
+  let withErrorsOrWarningsIgnored;
 
   let BridgeContext;
   let StoreContext;
@@ -34,6 +35,8 @@ describe('TreeListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -88,43 +91,111 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Test stepping through to the end
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: select first element');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
-      while (
-        state.selectedElementIndex !== null &&
-        state.selectedElementIndex < store.numElements - 1
-      ) {
-        const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
-        utils.act(() => renderer.update(<Contexts />));
-        expect(state).toMatchSnapshot(`3: select element after (${index})`);
-      }
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
-      while (
-        state.selectedElementIndex !== null &&
-        state.selectedElementIndex > 0
-      ) {
-        const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
-        utils.act(() => renderer.update(<Contexts />));
-        expect(state).toMatchSnapshot(`4: select element before (${index})`);
-      }
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Test stepping back to the beginning
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Test wrap around behavior
 
       utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('5: select previous wraps around to last');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('6: select next wraps around to first');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
     it('should select child elements', () => {
@@ -146,30 +217,71 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: select first element');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: select Parent');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: select Child');
-
-      const previousState = state;
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       // There are no more children to select, so this should be a no-op
       utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toEqual(previousState);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
     it('should select parent elements and then collapse', () => {
@@ -191,27 +303,78 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
 
+      // Select the last child
       utils.act(() =>
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: select last child');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Select its parent
       utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: select Parent');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Select grandparent
       utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: select Grandparent');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // No-op
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       const previousState = state;
 
@@ -221,7 +384,7 @@ describe('TreeListContext', () => {
       expect(state).toEqual(previousState);
     });
 
-    it('should clear selection if the selected element is unmounted', async done => {
+    it('should clear selection if the selected element is unmounted', async () => {
       const Grandparent = props => props.children || null;
       const Parent = props => props.children || null;
       const Child = () => null;
@@ -239,16 +402,28 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Select the second child
       utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 3}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: select second child');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Remove the child (which should auto-select the parent)
       await utils.actAsync(() =>
         ReactDOM.render(
           <Grandparent>
@@ -257,16 +432,15 @@ describe('TreeListContext', () => {
           container,
         ),
       );
-      expect(state).toMatchSnapshot(
-        '3: remove children (parent should now be selected)',
-      );
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →      <Parent>
+      `);
 
+      // Unmount the root (so that nothing is selected)
       await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
-      expect(state).toMatchSnapshot(
-        '4: unmount root (nothing should be selected)',
-      );
-
-      done();
+      expect(state).toMatchInlineSnapshot(``);
     });
 
     it('should navigate next/previous sibling and skip over children in between', () => {
@@ -287,21 +461,6 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      /*
-       * 0  ▾ <Grandparent>
-       * 1    ▾ <Parent>
-       * 2        <Child key="0">
-       * 3    ▾ <Parent>
-       * 4        <Child key="0">
-       * 5        <Child key="1">
-       * 6        <Child key="2">
-       * 7    ▾ <Parent>
-       * 8        <Child key="0">
-       * 9        <Child key="1">
-       */
-
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
 
@@ -311,31 +470,131 @@ describe('TreeListContext', () => {
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: firstParentID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(1);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(3);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(7);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(1);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(7);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(3);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(1);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
     });
 
     it('should navigate the owner hierarchy', () => {
@@ -363,24 +622,6 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      /*
-       *  0  ▾ <Grandparent>
-       *  1    ▾ <Wrapper>
-       *  2      ▾ <Parent>
-       *  3          <Child key="0">
-       *  4    ▾ <Wrapper>
-       *  5      ▾ <Parent>
-       *  6          <Child key="0">
-       *  7          <Child key="1">
-       *  8          <Child key="2">
-       *  9    ▾ <Wrapper>
-       * 10      ▾ <Parent>
-       * 11          <Child key="0">
-       * 12          <Child key="1">
-       */
-
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
 
@@ -389,86 +630,281 @@ describe('TreeListContext', () => {
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: childID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBeNull();
-      expect(state.selectedElementIndex).toBe(7);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       // Basic navigation test
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBe(childID);
-      expect(state.selectedElementIndex).toBe(5);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(0);
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the root already)
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(0); // noop since we're at the top
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(5);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(7);
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the leaf node)
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(7); // noop since we're at the leaf node
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       // Other navigational actions should clear out the temporary owner chain.
       utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(6);
-      expect(state.ownerSubtreeLeafElementID).toBeNull();
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+        →          <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Start a new tree on parent
       const parentID = ((store.getElementIDAtIndex(5): any): number);
       utils.act(() =>
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: parentID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBeNull();
-      expect(state.selectedElementIndex).toBe(5);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
-      // It should not be possible to navigate beyond the owner chain leaf.
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBe(parentID);
-      expect(state.selectedElementIndex).toBe(0);
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the top)
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(0); // noop since we're at the top
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
 
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(5);
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the leaf of this owner tree)
+      // It should not be possible to navigate beyond the owner chain leaf.
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(5); // noop since we're at the leaf node
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
     });
   });
 
@@ -493,31 +929,59 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
 
       // NOTE: multi-match
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
 
       // NOTE: single match
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'f'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: search for "f"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
 
       // NOTE: no match
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'y'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: search for "y"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
 
       // NOTE: HOC match
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'w'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('5: search for "w"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+        →    <Qux> [withHOC]
+      `);
     });
 
     it('should select the next and previous items within the search results', () => {
@@ -537,42 +1001,95 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // search for "ba"
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // go to second result
       utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: go to second result');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+        →    <Bar>
+             <Baz>
+      `);
+
+      // go to third result
       utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: go to third result');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+        →    <Baz>
+      `);
+
+      // go to second result
       utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('5: go to second result');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+        →    <Bar>
+             <Baz>
+      `);
+
+      // go to first result
       utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('6: go to first result');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // wrap to last result
       utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('7: wrap to last result');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+        →    <Baz>
+      `);
+
+      // wrap to first result
       utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('8: wrap to first result');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
     });
 
-    it('should add newly mounted elements to the search results set if they match the current text', async done => {
+    it('should add newly mounted elements to the search results set if they match the current text', async () => {
       const Foo = () => null;
       const Bar = () => null;
       const Baz = () => null;
@@ -589,15 +1106,21 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+      `);
 
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(
@@ -610,12 +1133,24 @@ describe('TreeListContext', () => {
         ),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: mount Baz');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
 
-      done();
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+        →    <Baz>
+      `);
     });
 
-    it('should remove unmounted elements from the search results set', async done => {
+    it('should remove unmounted elements from the search results set', async () => {
       const Foo = () => null;
       const Bar = () => null;
       const Baz = () => null;
@@ -633,19 +1168,32 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+      `);
 
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
 
       utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: go to second result');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+        →    <Baz>
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(
@@ -657,9 +1205,28 @@ describe('TreeListContext', () => {
         ),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: unmount Baz');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+      `);
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
 
-      done();
+      // Noop since the list is now one item long
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
     });
   });
 
@@ -678,23 +1245,38 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
       const parentID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child>
+               <Child>
+      `);
 
       utils.act(() => dispatch({type: 'RESET_OWNER_STACK'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: final state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
-    it('should remove an element from the owners list if it is unmounted', async done => {
+    it('should remove an element from the owners list if it is unmounted', async () => {
       const Grandparent = ({count}) => <Parent count={count} />;
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -703,31 +1285,45 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
       utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
 
       const parentID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+               <Child key="1">
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={1} />, container),
       );
-      expect(state).toMatchSnapshot('3: remove second child');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={0} />, container),
       );
-      expect(state).toMatchSnapshot('4: remove first child');
-
-      done();
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
     });
 
-    it('should exit the owners list if the current owner is unmounted', async done => {
+    it('should exit the owners list if the current owner is unmounted', async () => {
       const Parent = props => props.children || null;
       const Child = () => null;
 
@@ -741,29 +1337,38 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+               <Child>
+      `);
 
       const childID = ((store.getElementIDAtIndex(1): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: child owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Child>
+      `);
 
       await utils.actAsync(() => ReactDOM.render(<Parent />, container));
-      expect(state).toMatchSnapshot('3: remove child');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Parent>
+      `);
 
       const parentID = ((store.getElementIDAtIndex(0): any): number);
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
 
       await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
-      expect(state).toMatchSnapshot('5: unmount root');
-
-      done();
+      expect(state).toMatchInlineSnapshot(``);
     });
 
     // This tests ensures support for toggling Suspense boundaries outside of the active owners list.
@@ -783,11 +1388,16 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
       utils.act(() => ReactDOM.render(<Parent />, container));
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+             ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+      `);
 
       const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
       const childID = ((store.getElementIDAtIndex(2): any): number);
@@ -795,21 +1405,1212 @@ describe('TreeListContext', () => {
 
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: child owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Child>
+             ▾ <Suspense>
+                 <Grandchild>
+      `);
 
       // Toggling a Suspense boundary inside of the flat list should update selected index
       utils.act(() =>
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: child owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+           ▾ <Child>
+        →    ▾ <Suspense>
+                 <Grandchild>
+      `);
 
       // Toggling a Suspense boundary outside of the flat list should exit owners list and update index
       utils.act(() =>
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: main tree');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+        →    ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+      `);
+    });
+  });
+
+  describe('inline errors/warnings state', () => {
+    function clearAllErrors() {
+      utils.act(() => store.clearErrorsAndWarnings());
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearErrorsForElement(id) {
+      utils.act(() => store.clearErrorsForElement(id));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearWarningsForElement(id) {
+      utils.act(() => store.clearWarningsForElement(id));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function selectNextErrorOrWarning() {
+      utils.act(() =>
+        dispatch({type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'}),
+      );
+    }
+
+    function selectPreviousErrorOrWarning() {
+      utils.act(() =>
+        dispatch({
+          type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+        }),
+      );
+    }
+
+    function Child({logError = false, logWarning = false}) {
+      if (logError === true) {
+        console.error('test-only: error');
+      }
+      if (logWarning === true) {
+        console.warn('test-only: warning');
+      }
+      return null;
+    }
+
+    it('should handle when there are no errors/warnings', () => {
+      utils.act(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Child />
+            <Child />
+            <Child />
+          </React.Fragment>,
+          document.createElement('div'),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+
+      // Next/previous errors should be a no-op
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+
+      // Next/previous errors should still be a no-op
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+    });
+
+    it('should cycle through the next errors/warnings and wrap around', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the previous errors/warnings and wrap around', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        utils.act(() => {
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+        });
+      });
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        utils.act(() => {
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+        });
+      });
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should select the next or previous element relative to the current selection', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 2}));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        →    <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 2}));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        →    <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+              <Child logError={true} />
+              <Child logWarning={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      // Select the first item in the list
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      // Clear warnings (but the next Fiber has only errors)
+      clearWarningsForElement(store.getElementIDAtIndex(1));
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      clearErrorsForElement(store.getElementIDAtIndex(2));
+
+      // Should step to the (now) next one in the list.
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ✕
+             <Child>
+        →    <Child> ⚠
+      `);
+
+      // Should skip over the (now) cleared Fiber
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ✕
+             <Child>
+             <Child> ⚠
+      `);
+    });
+
+    it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+      `);
+
+      clearWarningsForElement(store.getElementIDAtIndex(0));
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+        →    <Child> ✕
+      `);
+    });
+
+    it('should update correctly when new errors/warnings are added', () => {
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+              <Child logError={true} />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child>
+             <Child>
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child>
+             <Child>
+             <Child> ✕
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+      `);
+    });
+
+    it('should update correctly when all errors/warnings are cleared', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+      `);
+
+      clearAllErrors();
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+      `);
+    });
+
+    it('should update select and auto-expand parts components within hidden parts of the tree', () => {
+      const Wrapper = ({children}) => children;
+
+      store.collapseNodesByDefault = true;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▸ <Wrapper>
+           ▸ <Wrapper>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▸ <Wrapper>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+        →        <Child> ⚠
+      `);
+    });
+
+    it('should properly handle when components filters are updated', () => {
+      const Wrapper = ({children}) => children;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [utils.createDisplayNameFilter('Wrapper')];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ⚠
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+        →        <Child> ⚠
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+    });
+
+    it('should preserve errors for fibers even if they are filtered out of the tree initially', () => {
+      const Wrapper = ({children}) => children;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      store.componentFilters = [utils.createDisplayNameFilter('Child')];
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Wrapper>
+           ▾ <Wrapper>
+               <Wrapper>
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+    });
+
+    describe('suspense', () => {
+      // This verifies that we don't flush before the tree has been committed.
+      it('should properly handle errors/warnings from components inside of delayed Suspense', async () => {
+        const NeverResolves = React.lazy(() => new Promise(() => {}));
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <NeverResolves />
+              </React.Suspense>,
+              document.createElement('div'),
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        jest.runAllTimers();
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+
+        selectNextErrorOrWarning();
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+      });
+
+      it('should properly handle errors/warnings from components that dont mount because of Suspense', async () => {
+        async function fakeImport(result) {
+          return {default: result};
+        }
+        const LazyComponent = React.lazy(() => fakeImport(Child));
+
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 0, ⚠ 1
+          [root]
+             ▾ <Suspense>
+                 <Child> ⚠
+                 <Child>
+        `);
+      });
+
+      it('should properly show errors/warnings from components in the Suspense fallback tree', async () => {
+        async function fakeImport(result) {
+          return {default: result};
+        }
+        const LazyComponent = React.lazy(() => fakeImport(Child));
+
+        const Fallback = () => <Child logError={true} />;
+
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+             ▾ <Suspense>
+               ▾ <Fallback>
+                   <Child> ✕
+        `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                     ▾ <Suspense>
+                         <Child>
+              `);
+      });
+    });
+
+    describe('error boundaries', () => {
+      it('should properly handle errors/warnings from components that dont mount because of an error', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        class BadRender extends React.Component {
+          render() {
+            console.error('test-only: I am about to throw!');
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+              <ErrorBoundary> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+          →    <ErrorBoundary> ✕
+        `);
+
+        utils.act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(state).toMatchInlineSnapshot(``);
+
+        // Should be a noop
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(``);
+      });
+
+      it('should properly handle errors/warnings from components that dont mount because of an error', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        class LogsWarning extends React.Component {
+          render() {
+            console.warn('test-only: I am about to throw!');
+            return <ThrowsError />;
+          }
+        }
+        class ThrowsError extends React.Component {
+          render() {
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <LogsWarning />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+              <ErrorBoundary> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+          →    <ErrorBoundary> ✕
+        `);
+
+        utils.act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(state).toMatchInlineSnapshot(``);
+
+        // Should be a noop
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(``);
+      });
+
+      it('should properly handle errors/warnings from inside of an error boundary', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return <Child logError={true} />;
+            }
+            return this.props.children;
+          }
+        }
+
+        class BadRender extends React.Component {
+          render() {
+            console.error('test-only: I am about to throw!');
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 2, ⚠ 0
+          [root]
+            ▾ <ErrorBoundary> ✕
+                <Child> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 2, ⚠ 0
+          [root]
+          →  ▾ <ErrorBoundary> ✕
+                 <Child> ✕
+        `);
+      });
     });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
new file mode 100644
index 0000000000000..866d4ed4c3662
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
@@ -0,0 +1,24 @@
+import {printStore} from 'react-devtools-shared/src/devtools/utils';
+
+// test() is part of Jest's serializer API
+export function test(maybeState) {
+  if (maybeState === null || typeof maybeState !== 'object') {
+    return false;
+  }
+
+  // Duck typing at its finest.
+  return (
+    maybeState.hasOwnProperty('inspectedElementID') &&
+    maybeState.hasOwnProperty('ownerFlatTree') &&
+    maybeState.hasOwnProperty('ownerSubtreeLeafElementID')
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(state, serialize, indent) {
+  // This is a big of a hack but it works around having to pass in a meta object e.g. {store, state}.
+  // DevTools tests depend on a global Store object anyway (initialized via setupTest).
+  const store = global.store;
+
+  return printStore(store, false, state);
+}
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 2f4325f8ca835..2fb0664a24855 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -213,3 +213,37 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
     profilerStore.profilingData = profilingDataFrontend;
   });
 }
+
+/**
+ * Runs `fn` while preventing console error and warnings that partially match any given `errorOrWarningMessages` from appearing in the console.
+ * @param errorOrWarningMessages Messages are matched partially (i.e. indexOf), pre-formatting.
+ * @param fn
+ */
+export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
+  errorOrWarningMessages: string[],
+  fn: () => T,
+): T {
+  let resetIgnoredErrorOrWarningMessages = true;
+  try {
+    global._ignoredErrorOrWarningMessages = errorOrWarningMessages;
+    const maybeThenable = fn();
+    if (
+      maybeThenable !== undefined &&
+      typeof maybeThenable.then === 'function'
+    ) {
+      resetIgnoredErrorOrWarningMessages = false;
+      return maybeThenable.then(
+        () => {
+          global._ignoredErrorOrWarningMessages = [];
+        },
+        () => {
+          global._ignoredErrorOrWarningMessages = [];
+        },
+      );
+    }
+  } finally {
+    if (resetIgnoredErrorOrWarningMessages) {
+      global._ignoredErrorOrWarningMessages = [];
+    }
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 1e0ffe336f685..326b0fb2e340f 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -169,6 +169,9 @@ export default class Agent extends EventEmitter<{|
 
     this._bridge = bridge;
 
+    bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
+    bridge.addListener('clearErrorsForFiberID', this.clearErrorsForFiberID);
+    bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
     bridge.addListener('getProfilingData', this.getProfilingData);
@@ -226,6 +229,33 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
+  clearErrorsAndWarnings = ({rendererID}: {|rendererID: RendererID|}) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsAndWarnings();
+    }
+  };
+
+  clearErrorsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsForFiberID(id);
+    }
+  };
+
+  clearWarningsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearWarningsForFiberID(id);
+    }
+  };
+
   copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -571,16 +601,22 @@ export default class Agent extends EventEmitter<{|
   updateConsolePatchSettings = ({
     appendComponentStack,
     breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
+    showInlineWarningsAndErrors: boolean,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
     // then install or uninstall the console overrides.
     // It's safe to call these methods multiple times, so we don't need to worry about that.
     if (appendComponentStack || breakOnConsoleErrors) {
-      patchConsole({appendComponentStack, breakOnConsoleErrors});
+      patchConsole({
+        appendComponentStack,
+        breakOnConsoleErrors,
+        showInlineWarningsAndErrors,
+      });
     } else {
       unpatchConsole();
     }
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 9a29d5cb0582e..cc9eff11f6841 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -22,11 +22,22 @@ const PREFIX_REGEX = /\s{4}(in|at)\s{1}/;
 // but we can fallback to looking for location info (e.g. "foo.js:12:345")
 const ROW_COLUMN_NUMBER_REGEX = /:\d+:\d+(\n|$)/;
 
+export function isStringComponentStack(text: string): boolean {
+  return PREFIX_REGEX.test(text) || ROW_COLUMN_NUMBER_REGEX.test(text);
+}
+
+type OnErrorOrWarning = (
+  fiber: Fiber,
+  type: 'error' | 'warn',
+  args: Array<any>,
+) => void;
+
 const injectedRenderers: Map<
   ReactRenderer,
   {|
     currentDispatcherRef: CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
+    onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
   |},
 > = new Map();
@@ -54,7 +65,10 @@ export function dangerous_setTargetConsoleForTesting(
 // v16 renderers should use this method to inject internals necessary to generate a component stack.
 // These internals will be used if the console is patched.
 // Injecting them separately allows the console to easily be patched or un-patched later (at runtime).
-export function registerRenderer(renderer: ReactRenderer): void {
+export function registerRenderer(
+  renderer: ReactRenderer,
+  onErrorOrWarning?: OnErrorOrWarning,
+): void {
   const {
     currentDispatcherRef,
     getCurrentFiber,
@@ -76,6 +90,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
       currentDispatcherRef,
       getCurrentFiber,
       workTagMap: ReactTypeOfWork,
+      onErrorOrWarning,
     });
   }
 }
@@ -83,6 +98,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
 const consoleSettingsRef = {
   appendComponentStack: false,
   breakOnConsoleErrors: false,
+  showInlineWarningsAndErrors: false,
 };
 
 // Patches console methods to append component stack for the current fiber.
@@ -90,14 +106,17 @@ const consoleSettingsRef = {
 export function patch({
   appendComponentStack,
   breakOnConsoleErrors,
+  showInlineWarningsAndErrors,
 }: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
 }): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
   consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
+  consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
 
   if (unpatchFn !== null) {
     // Don't patch twice.
@@ -121,32 +140,51 @@ export function patch({
         targetConsole[method]);
 
       const overrideMethod = (...args) => {
-        const latestAppendComponentStack =
-          consoleSettingsRef.appendComponentStack;
-        const latestBreakOnConsoleErrors =
-          consoleSettingsRef.breakOnConsoleErrors;
-
-        if (latestAppendComponentStack) {
-          try {
-            // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
-            // don't append a second stack.
-            const lastArg = args.length > 0 ? args[args.length - 1] : null;
-            const alreadyHasComponentStack =
-              lastArg !== null &&
-              (PREFIX_REGEX.test(lastArg) ||
-                ROW_COLUMN_NUMBER_REGEX.test(lastArg));
-
-            if (!alreadyHasComponentStack) {
-              // If there's a component stack for at least one of the injected renderers, append it.
-              // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-              for (const {
-                currentDispatcherRef,
-                getCurrentFiber,
-                workTagMap,
-              } of injectedRenderers.values()) {
-                const current: ?Fiber = getCurrentFiber();
-                if (current != null) {
+        const lastArg = args.length > 0 ? args[args.length - 1] : null;
+        const alreadyHasComponentStack =
+          lastArg !== null && isStringComponentStack(lastArg);
+
+        let shouldAppendWarningStack = false;
+        if (consoleSettingsRef.appendComponentStack) {
+          // If we are ever called with a string that already has a component stack,
+          // e.g. a React error/warning, don't append a second stack.
+          shouldAppendWarningStack = !alreadyHasComponentStack;
+        }
+
+        const shouldShowInlineWarningsAndErrors =
+          consoleSettingsRef.showInlineWarningsAndErrors &&
+          (method === 'error' || method === 'warn');
+
+        if (shouldAppendWarningStack || shouldShowInlineWarningsAndErrors) {
+          // Search for the first renderer that has a current Fiber.
+          // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+          // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+          for (const {
+            currentDispatcherRef,
+            getCurrentFiber,
+            onErrorOrWarning,
+            workTagMap,
+          } of injectedRenderers.values()) {
+            const current: ?Fiber = getCurrentFiber();
+            if (current != null) {
+              try {
+                if (shouldShowInlineWarningsAndErrors) {
+                  // patch() is called by two places: (1) the hook and (2) the renderer backend.
+                  // The backend is what impliments a message queue, so it's the only one that injects onErrorOrWarning.
+                  if (typeof onErrorOrWarning === 'function') {
+                    onErrorOrWarning(
+                      current,
+                      ((method: any): 'error' | 'warn'),
+                      // Copy args before we mutate them (e.g. adding the component stack)
+                      alreadyHasComponentStack
+                        ? // Replace component stack with an empty string in case there's a string placeholder for it.
+                          [...args.slice(0, -1), '']
+                        : args.slice(),
+                    );
+                  }
+                }
+
+                if (shouldAppendWarningStack) {
                   const componentStack = getStackByFiberInDevAndProd(
                     workTagMap,
                     current,
@@ -155,16 +193,17 @@ export function patch({
                   if (componentStack !== '') {
                     args.push(componentStack);
                   }
-                  break;
                 }
+              } catch (error) {
+                // Don't let a DevTools or React internal error interfere with logging.
+              } finally {
+                break;
               }
             }
-          } catch (error) {
-            // Don't let a DevTools or React internal error interfere with logging.
           }
         }
 
-        if (latestBreakOnConsoleErrors) {
+        if (consoleSettingsRef.breakOnConsoleErrors) {
           // --- Welcome to debugging with React DevTools ---
           // This debugger statement means that you've enabled the "break on warnings" feature.
           // Use the browser's Call Stack panel to step out of this override function-
@@ -177,6 +216,7 @@ export function patch({
       };
 
       overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+      originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
 
       // $FlowFixMe property error|warn is not writable.
       targetConsole[method] = overrideMethod;
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 86d987c8f2e26..90f0f3ad12b46 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -779,6 +779,10 @@ export function attach(
       state = publicInstance.state || null;
     }
 
+    // Not implemented
+    const errors = [];
+    const warnings = [];
+
     return {
       id,
 
@@ -812,6 +816,8 @@ export function attach(
       hooks: null,
       props,
       state,
+      errors,
+      warnings,
 
       // List of owners
       owners,
@@ -1040,7 +1046,22 @@ export function attach(
     return null;
   }
 
+  function clearErrorsAndWarnings() {
+    // Not implemented
+  }
+
+  function clearErrorsForFiberID(id: number) {
+    // Not implemented
+  }
+
+  function clearWarningsForFiberID(id: number) {
+    // Not implemented
+  }
+
   return {
+    clearErrorsAndWarnings,
+    clearErrorsForFiberID,
+    clearWarningsForFiberID,
     cleanup,
     copyElementPath,
     deletePath,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 983a17f51dc9f..11beef37f76d4 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -49,7 +49,9 @@ import {
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
@@ -76,6 +78,7 @@ import {
   MEMO_NUMBER,
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
+import {format} from './utils';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -117,6 +120,7 @@ type ReactTypeOfSideEffectType = {|
   NoFlags: number,
   PerformedWork: number,
   Placement: number,
+  Incomplete: number,
 |};
 
 function getFiberFlags(fiber: Fiber): number {
@@ -143,6 +147,7 @@ export function getInternalReactConstants(
     NoFlags: 0b00,
     PerformedWork: 0b01,
     Placement: 0b10,
+    Incomplete: 0b10000000000000,
   };
 
   // **********************************************************
@@ -479,7 +484,7 @@ export function attach(
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(renderer.version);
-  const {NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
+  const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -522,13 +527,104 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  // Set of Fibers (IDs) with recently changed number of error/warning messages.
+  const fibersWithChangedErrorOrWarningCounts: Set<number> = new Set();
+
+  // Mapping of fiber IDs to error/warning messages and counts.
+  const fiberToErrorsMap: Map<number, Map<string, number>> = new Map();
+  const fiberToWarningsMap: Map<number, Map<string, number>> = new Map();
+
+  function clearErrorsAndWarnings() {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const id of fiberToErrorsMap.keys()) {
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      updateMostRecentlyInspectedElementIfNecessary(id);
+    }
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const id of fiberToWarningsMap.keys()) {
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      updateMostRecentlyInspectedElementIfNecessary(id);
+    }
+
+    fiberToErrorsMap.clear();
+    fiberToWarningsMap.clear();
+
+    flushPendingEvents();
+  }
+
+  function clearErrorsForFiberID(id: number) {
+    if (fiberToErrorsMap.has(id)) {
+      fiberToErrorsMap.delete(id);
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      flushPendingEvents();
+    }
+
+    updateMostRecentlyInspectedElementIfNecessary(id);
+  }
+
+  function clearWarningsForFiberID(id: number) {
+    if (fiberToWarningsMap.has(id)) {
+      fiberToWarningsMap.delete(id);
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      flushPendingEvents();
+    }
+
+    updateMostRecentlyInspectedElementIfNecessary(id);
+  }
+
+  function updateMostRecentlyInspectedElementIfNecessary(
+    fiberID: number,
+  ): void {
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id === fiberID
+    ) {
+      hasElementUpdatedSinceLastInspected = true;
+    }
+  }
+
+  // Called when an error or warning is logged during render, commit, or passive (including unmount functions).
+  function onErrorOrWarning(
+    fiber: Fiber,
+    type: 'error' | 'warn',
+    args: $ReadOnlyArray<any>,
+  ): void {
+    const message = format(...args);
+
+    // Note that by calling these functions we may be creating the ID for the first time.
+    // If the Fiber is then never mounted, we are responsible for cleaning up after ourselves.
+    // This is important because getPrimaryFiber() stores a Fiber in the primaryFibers Set.
+    // If a Fiber never mounts, and we don't clean up after this code, we could leak.
+    // Fortunately we would only leak Fibers that have errors/warnings associated with them,
+    // which is hopefully only a small set and only in DEV mode– but this is still not great.
+    // We should clean up Fibers like this when flushing; see recordPendingErrorsAndWarnings().
+    const fiberID = getFiberID(getPrimaryFiber(fiber));
+
+    // Mark this Fiber as needed its warning/error count updated during the next flush.
+    fibersWithChangedErrorOrWarningCounts.add(fiberID);
+
+    // Update the error/warning messages and counts for the Fiber.
+    const fiberMap = type === 'error' ? fiberToErrorsMap : fiberToWarningsMap;
+    const messageMap = fiberMap.get(fiberID);
+    if (messageMap != null) {
+      const count = messageMap.get(message) || 0;
+      messageMap.set(message, count + 1);
+    } else {
+      fiberMap.set(fiberID, new Map([[message, 1]]));
+    }
+
+    // If this Fiber is currently being inspected, mark it as needing an udpate as well.
+    updateMostRecentlyInspectedElementIfNecessary(fiberID);
+  }
+
   // Patching the console enables DevTools to do a few useful things:
   // * Append component stacks to warnings and error messages
   // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
   //
   // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
   if (process.env.NODE_ENV !== 'test') {
-    registerRendererWithConsole(renderer);
+    registerRendererWithConsole(renderer, onErrorOrWarning);
 
     // The renderer interface can't read these preferences directly,
     // because it is stored in localStorage within the context of the extension.
@@ -537,10 +633,13 @@ export function attach(
       window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
     const breakOnConsoleErrors =
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+    const showInlineWarningsAndErrors =
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
     if (appendComponentStack || breakOnConsoleErrors) {
       patchConsole({
         appendComponentStack,
         breakOnConsoleErrors,
+        showInlineWarningsAndErrors,
       });
     }
   }
@@ -652,8 +751,11 @@ export function attach(
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
-      unmountFiberChildrenRecursively(root.current);
-      recordUnmount(root.current, false);
+      // The TREE_OPERATION_REMOVE_ROOT operation serves two purposes:
+      // 1. It avoids sending unnecessary bridge traffic to clear a root.
+      // 2. It preserves Fiber IDs when remounting (below) which in turn ID to error/warning mapping.
+      pushOperation(TREE_OPERATION_REMOVE_ROOT);
+      flushPendingEvents(root);
       currentRootID = -1;
     });
 
@@ -670,6 +772,10 @@ export function attach(
       flushPendingEvents(root);
       currentRootID = -1;
     });
+
+    // Also re-evaluate all error and warning counts given the new filters.
+    reevaluateErrorsAndWarnings();
+    flushPendingEvents();
   }
 
   // NOTICE Keep in sync with get*ForFiber methods
@@ -1055,7 +1161,64 @@ export function attach(
     pendingOperations.push(op);
   }
 
+  function reevaluateErrorsAndWarnings() {
+    fibersWithChangedErrorOrWarningCounts.clear();
+    fiberToErrorsMap.forEach((countMap, fiberID) => {
+      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    });
+    fiberToWarningsMap.forEach((countMap, fiberID) => {
+      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    });
+    recordPendingErrorsAndWarnings();
+  }
+
+  function recordPendingErrorsAndWarnings() {
+    fibersWithChangedErrorOrWarningCounts.forEach(fiberID => {
+      const fiber = idToFiberMap.get(fiberID);
+      if (fiber != null) {
+        // Don't send updates for Fibers that didn't mount due to e.g. Suspense or an error boundary.
+        // We may also need to clean up after ourselves to avoid leaks.
+        // See inline comments in onErrorOrWarning() for more info.
+        if (isFiberMountedImpl(fiber) !== MOUNTED) {
+          fiberToIDMap.delete(fiber);
+          idToFiberMap.delete(fiberID);
+          primaryFibers.delete(fiber);
+          return;
+        }
+
+        let errorCount = 0;
+        let warningCount = 0;
+
+        if (!shouldFilterFiber(fiber)) {
+          const errorCountsMap = fiberToErrorsMap.get(fiberID);
+          const warningCountsMap = fiberToWarningsMap.get(fiberID);
+
+          if (errorCountsMap != null) {
+            errorCountsMap.forEach(count => {
+              errorCount += count;
+            });
+          }
+          if (warningCountsMap != null) {
+            warningCountsMap.forEach(count => {
+              warningCount += count;
+            });
+          }
+        }
+
+        pushOperation(TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS);
+        pushOperation(fiberID);
+        pushOperation(errorCount);
+        pushOperation(warningCount);
+      }
+    });
+    fibersWithChangedErrorOrWarningCounts.clear();
+  }
+
   function flushPendingEvents(root: Object): void {
+    // Add any pending errors and warnings to the operations array.
+    // We do this just before flushing, so we can ignore errors for no-longer-mounted Fibers.
+    recordPendingErrorsAndWarnings();
+
     if (
       pendingOperations.length === 0 &&
       pendingRealUnmountedIDs.length === 0 &&
@@ -2028,17 +2191,42 @@ export function attach(
   // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
   function isFiberMountedImpl(fiber: Fiber): number {
     let node = fiber;
+    let prevNode = null;
     if (!fiber.alternate) {
       // If there is no alternate, this might be a new tree that isn't inserted
       // yet. If it is, then it will have a pending insertion effect on it.
       if ((getFiberFlags(node) & Placement) !== NoFlags) {
         return MOUNTING;
       }
+      // This indicates an error during render.
+      if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
+        return UNMOUNTED;
+      }
       while (node.return) {
+        prevNode = node;
         node = node.return;
+
         if ((getFiberFlags(node) & Placement) !== NoFlags) {
           return MOUNTING;
         }
+        // This indicates an error during render.
+        if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
+          return UNMOUNTED;
+        }
+
+        // If this node is inside of a timed out suspense subtree, we should also ignore errors/warnings.
+        const isTimedOutSuspense =
+          node.tag === SuspenseComponent && node.memoizedState !== null;
+        if (isTimedOutSuspense) {
+          // Note that this does not include errors/warnings in the Fallback tree though!
+          const primaryChildFragment = node.child;
+          const fallbackChildFragment = primaryChildFragment
+            ? primaryChildFragment.sibling
+            : null;
+          if (prevNode !== fallbackChildFragment) {
+            return UNMOUNTED;
+          }
+        }
       }
     } else {
       while (node.return) {
@@ -2455,6 +2643,9 @@ export function attach(
       rootType = fiberRoot._debugRootType;
     }
 
+    const errors = fiberToErrorsMap.get(id) || new Map();
+    const warnings = fiberToWarningsMap.get(id) || new Map();
+
     return {
       id,
 
@@ -2497,6 +2688,8 @@ export function attach(
       hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
+      errors: Array.from(errors.entries()),
+      warnings: Array.from(warnings.entries()),
 
       // List of owners
       owners,
@@ -3425,6 +3618,9 @@ export function attach(
 
   return {
     cleanup,
+    clearErrorsAndWarnings,
+    clearErrorsForFiberID,
+    clearWarningsForFiberID,
     copyElementPath,
     deletePath,
     findNativeNodesForFiberID,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index d87c2fdf97b2e..93ac3c7827e8b 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -234,6 +234,8 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
 
   // List of owners
   owners: Array<Owner> | null,
@@ -294,6 +296,9 @@ type Type = 'props' | 'hooks' | 'state' | 'context';
 
 export type RendererInterface = {
   cleanup: () => void,
+  clearErrorsAndWarnings: () => void,
+  clearErrorsForFiberID: (id: number) => void,
+  clearWarningsForFiberID: (id: number) => void,
   copyElementPath: (id: number, path: Array<string | number>) => void,
   deletePath: (
     type: Type,
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index d0ff4192d6edb..06329eff72150 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -134,3 +134,52 @@ export function serializeToString(data: any): string {
     return value;
   });
 }
+
+// based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1
+// based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions
+// Implements s, d, i and f placeholders
+export function format(
+  maybeMessage: any,
+  ...inputArgs: $ReadOnlyArray<any>
+): string {
+  if (typeof maybeMessage !== 'string') {
+    return [maybeMessage, ...inputArgs].join(' ');
+  }
+
+  const re = /(%?)(%([jds]))/g;
+  const args = inputArgs.slice();
+  let formatted: string = maybeMessage;
+
+  if (args.length) {
+    formatted = formatted.replace(re, (match, escaped, ptn, flag) => {
+      let arg = args.shift();
+      switch (flag) {
+        case 's':
+          arg += '';
+          break;
+        case 'd':
+        case 'i':
+          arg = parseInt(arg, 10).toString();
+          break;
+        case 'f':
+          arg = parseFloat(arg).toString();
+          break;
+      }
+      if (!escaped) {
+        return arg;
+      }
+      args.unshift(arg);
+      return match;
+    });
+  }
+
+  // arguments remain after formatting
+  if (args.length) {
+    formatted += ' ' + args.join(' ');
+  }
+
+  // update escaped %% values
+  formatted = formatted.replace(/%{2,2}/g, '%');
+
+  return '' + formatted;
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 2bde2aed8b071..1da4d8eb3e549 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -114,6 +114,7 @@ type NativeStyleEditor_SetValueParams = {|
 type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
 |};
 
 type BackendEvents = {|
@@ -141,7 +142,10 @@ type BackendEvents = {|
 |};
 
 type FrontendEvents = {|
+  clearErrorsAndWarnings: [{|rendererID: RendererID|}],
+  clearErrorsForFiberID: [ElementAndRendererID],
   clearNativeElementHighlight: [],
+  clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
   getOwnersList: [ElementAndRendererID],
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index c5223f7cb43d9..f8868111e095d 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -14,6 +14,8 @@ export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_REORDER_CHILDREN = 3;
 export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
+export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;
+export const TREE_OPERATION_REMOVE_ROOT = 6;
 
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
@@ -33,6 +35,9 @@ export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 
+export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
+  'React::DevTools::showInlineWarningsAndErrors';
+
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index cd829bb3bf3ab..6b1b83e524838 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -12,7 +12,9 @@ import {inspect} from 'util';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import {ElementTypeRoot} from '../types';
@@ -78,11 +80,22 @@ export default class Store extends EventEmitter<{|
 |}> {
   _bridge: FrontendBridge;
 
+  // Computed whenever _errorsAndWarnings Map changes.
+  _cachedErrorCount: number = 0;
+  _cachedWarningCount: number = 0;
+  _cachedErrorAndWarningTuples: Array<{|id: number, index: number|}> = [];
+
   // Should new nodes be collapsed by default when added to the tree?
   _collapseNodesByDefault: boolean = true;
 
   _componentFilters: Array<ComponentFilter>;
 
+  // Map of ID to number of recorded error and warning message IDs.
+  _errorsAndWarnings: Map<
+    number,
+    {|errorCount: number, warningCount: number|},
+  > = new Map();
+
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -289,6 +302,10 @@ export default class Store extends EventEmitter<{|
     this.emit('componentFilters');
   }
 
+  get errorCount(): number {
+    return this._cachedErrorCount;
+  }
+
   get hasOwnerMetadata(): boolean {
     return this._hasOwnerMetadata;
   }
@@ -357,6 +374,46 @@ export default class Store extends EventEmitter<{|
     return this._unsupportedRendererVersionDetected;
   }
 
+  get warningCount(): number {
+    return this._cachedWarningCount;
+  }
+
+  clearErrorsAndWarnings(): void {
+    this._rootIDToRendererID.forEach(rendererID => {
+      this._bridge.send('clearErrorsAndWarnings', {
+        rendererID,
+      });
+    });
+  }
+
+  clearErrorsForElement(id: number): void {
+    const rendererID = this.getRendererIDForElement(id);
+    if (rendererID === null) {
+      console.warn(
+        `Unable to find rendererID for element ${id} when clearing errors.`,
+      );
+    } else {
+      this._bridge.send('clearErrorsForFiberID', {
+        rendererID,
+        id,
+      });
+    }
+  }
+
+  clearWarningsForElement(id: number): void {
+    const rendererID = this.getRendererIDForElement(id);
+    if (rendererID === null) {
+      console.warn(
+        `Unable to find rendererID for element ${id} when clearing warnings.`,
+      );
+    } else {
+      this._bridge.send('clearWarningsForFiberID', {
+        rendererID,
+        id,
+      });
+    }
+  }
+
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
@@ -425,6 +482,17 @@ export default class Store extends EventEmitter<{|
     return element;
   }
 
+  // Returns a tuple of [id, index]
+  getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> {
+    return this._cachedErrorAndWarningTuples;
+  }
+
+  getErrorAndWarningCountForElementID(
+    id: number,
+  ): {|errorCount: number, warningCount: number|} {
+    return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
+  }
+
   getIndexOfElementID(id: number): number | null {
     const element = this.getElementByID(id);
 
@@ -709,6 +777,7 @@ export default class Store extends EventEmitter<{|
     }
 
     let haveRootsChanged = false;
+    let haveErrorsOrWarningsChanged = false;
 
     // The first two values are always rendererID and rootID
     const rendererID = operations[0];
@@ -910,7 +979,41 @@ export default class Store extends EventEmitter<{|
                 set.delete(id);
               }
             }
+
+            if (this._errorsAndWarnings.has(id)) {
+              this._errorsAndWarnings.delete(id);
+              haveErrorsOrWarningsChanged = true;
+            }
+          }
+          break;
+        }
+        case TREE_OPERATION_REMOVE_ROOT: {
+          i += 1;
+
+          const id = operations[1];
+
+          if (__DEBUG__) {
+            debug(`Remove root ${id}`);
           }
+
+          const recursivelyDeleteElements = elementID => {
+            const element = this._idToElement.get(elementID);
+            this._idToElement.delete(elementID);
+            if (element) {
+              // Mostly for Flow's sake
+              for (let index = 0; index < element.children.length; index++) {
+                recursivelyDeleteElements(element.children[index]);
+              }
+            }
+          };
+
+          const root = ((this._idToElement.get(id): any): Element);
+          recursivelyDeleteElements(id);
+
+          this._rootIDToCapabilities.delete(id);
+          this._rootIDToRendererID.delete(id);
+          this._roots = this._roots.filter(rootID => rootID !== id);
+          this._weightAcrossRoots -= root.weight;
           break;
         }
         case TREE_OPERATION_REORDER_CHILDREN: {
@@ -958,6 +1061,20 @@ export default class Store extends EventEmitter<{|
           // The profiler UI uses them lazily in order to generate the tree.
           i += 3;
           break;
+        case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:
+          const id = operations[i + 1];
+          const errorCount = operations[i + 2];
+          const warningCount = operations[i + 3];
+
+          i += 4;
+
+          if (errorCount > 0 || warningCount > 0) {
+            this._errorsAndWarnings.set(id, {errorCount, warningCount});
+          } else if (this._errorsAndWarnings.has(id)) {
+            this._errorsAndWarnings.delete(id);
+          }
+          haveErrorsOrWarningsChanged = true;
+          break;
         default:
           throw Error(`Unsupported Bridge operation ${operation}`);
       }
@@ -965,6 +1082,41 @@ export default class Store extends EventEmitter<{|
 
     this._revision++;
 
+    if (haveErrorsOrWarningsChanged) {
+      let errorCount = 0;
+      let warningCount = 0;
+
+      this._errorsAndWarnings.forEach(entry => {
+        errorCount += entry.errorCount;
+        warningCount += entry.warningCount;
+      });
+
+      this._cachedErrorCount = errorCount;
+      this._cachedWarningCount = warningCount;
+
+      const errorAndWarningTuples: Array<{|id: number, index: number|}> = [];
+
+      this._errorsAndWarnings.forEach((_, id) => {
+        const index = this.getIndexOfElementID(id);
+        if (index !== null) {
+          let low = 0;
+          let high = errorAndWarningTuples.length;
+          while (low < high) {
+            const mid = (low + high) >> 1;
+            if (errorAndWarningTuples[mid].index > index) {
+              high = mid;
+            } else {
+              low = mid + 1;
+            }
+          }
+
+          errorAndWarningTuples.splice(low, 0, {id, index});
+        }
+      });
+
+      this._cachedErrorAndWarningTuples = errorAndWarningTuples;
+    }
+
     if (haveRootsChanged) {
       const prevSupportsProfiling = this._supportsProfiling;
 
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 46b15d18a1159..4e71d70bd68f5 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -10,6 +10,7 @@
 import JSON5 from 'json5';
 
 import type {Element} from './views/Components/types';
+import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 
 export function printElement(element: Element, includeWeight: boolean = false) {
@@ -49,40 +50,96 @@ export function printOwnersList(
     .join('\n');
 }
 
-export function printStore(store: Store, includeWeight: boolean = false) {
+export function printStore(
+  store: Store,
+  includeWeight: boolean = false,
+  state: StateContext | null = null,
+) {
   const snapshotLines = [];
 
   let rootWeight = 0;
 
-  store.roots.forEach(rootID => {
-    const {weight} = ((store.getElementByID(rootID): any): Element);
+  function printSelectedMarker(index: number): string {
+    if (state === null) {
+      return '';
+    }
+    return state.selectedElementIndex === index ? `→` : ' ';
+  }
+
+  function printErrorsAndWarnings(element: Element): string {
+    const {
+      errorCount,
+      warningCount,
+    } = store.getErrorAndWarningCountForElementID(element.id);
+    if (errorCount === 0 && warningCount === 0) {
+      return '';
+    }
+    return ` ${errorCount > 0 ? '✕' : ''}${warningCount > 0 ? '⚠' : ''}`;
+  }
+
+  const ownerFlatTree = state !== null ? state.ownerFlatTree : null;
+  if (ownerFlatTree !== null) {
+    snapshotLines.push(
+      '[owners]' + (includeWeight ? ` (${ownerFlatTree.length})` : ''),
+    );
+    ownerFlatTree.forEach((element, index) => {
+      const printedSelectedMarker = printSelectedMarker(index);
+      const printedElement = printElement(element, false);
+      const printedErrorsAndWarnings = printErrorsAndWarnings(element);
+      snapshotLines.push(
+        `${printedSelectedMarker}${printedElement}${printedErrorsAndWarnings}`,
+      );
+    });
+  } else {
+    const errorsAndWarnings = store._errorsAndWarnings;
+    if (errorsAndWarnings.size > 0) {
+      let errorCount = 0;
+      let warningCount = 0;
+      errorsAndWarnings.forEach(entry => {
+        errorCount += entry.errorCount;
+        warningCount += entry.warningCount;
+      });
+
+      snapshotLines.push(`✕ ${errorCount}, ⚠ ${warningCount}`);
+    }
+
+    store.roots.forEach(rootID => {
+      const {weight} = ((store.getElementByID(rootID): any): Element);
+      const maybeWeightLabel = includeWeight ? ` (${weight})` : '';
+
+      // Store does not (yet) expose a way to get errors/warnings per root.
+      snapshotLines.push(`[root]${maybeWeightLabel}`);
 
-    snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
+      for (let i = rootWeight; i < rootWeight + weight; i++) {
+        const element = store.getElementAtIndex(i);
 
-    for (let i = rootWeight; i < rootWeight + weight; i++) {
-      const element = store.getElementAtIndex(i);
+        if (element == null) {
+          throw Error(`Could not find element at index ${i}`);
+        }
 
-      if (element == null) {
-        throw Error(`Could not find element at index ${i}`);
+        const printedSelectedMarker = printSelectedMarker(i);
+        const printedElement = printElement(element, includeWeight);
+        const printedErrorsAndWarnings = printErrorsAndWarnings(element);
+        snapshotLines.push(
+          `${printedSelectedMarker}${printedElement}${printedErrorsAndWarnings}`,
+        );
       }
 
-      snapshotLines.push(printElement(element, includeWeight));
-    }
+      rootWeight += weight;
+    });
 
-    rootWeight += weight;
-  });
+    // Make sure the pretty-printed test align with the Store's reported number of total rows.
+    if (rootWeight !== store.numElements) {
+      throw Error(
+        `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${store.numElements})`,
+      );
+    }
 
-  // Make sure the pretty-printed test align with the Store's reported number of total rows.
-  if (rootWeight !== store.numElements) {
-    throw Error(
-      `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${store.numElements})`,
-    );
+    // If roots have been unmounted, verify that they've been removed from maps.
+    // This helps ensure the Store doesn't leak memory.
+    store.assertExpectedRootMapSizes();
   }
 
-  // If roots have been unmounted, verify that they've been removed from maps.
-  // This helps ensure the Store doesn't leak memory.
-  store.assertExpectedRootMapSizes();
-
   return snapshotLines.join('\n');
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
index cd92bd3937d37..a21b303a3504a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -73,3 +73,21 @@
 .Badge {
   margin-left: 0.25rem;
 }
+
+.ErrorIcon,
+.ErrorIconContrast,
+.WarningIcon,
+.WarningIconContrast {
+  height: 0.75rem !important;
+  width: 0.75rem !important;
+  margin-left: 0.25rem;
+}
+.ErrorIcon {
+  color: var(--color-console-error-icon);
+}
+.WarningIcon {
+  color: var(--color-console-warning-icon);
+}
+.ErrorIconContrast, .WarningIconContrast {
+  color: var(--color-component-name);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index a209a55ace781..73789a9bd62ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -14,12 +14,15 @@ import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
 import {createRegExp} from '../utils';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
 
 import type {ItemData} from './Tree';
-import type {Element} from './types';
+import type {Element as ElementType} from './types';
 
 import styles from './Element.css';
+import Icon from '../Icon';
 
 type Props = {
   data: ItemData,
@@ -28,12 +31,13 @@ type Props = {
   ...
 };
 
-export default function ElementView({data, index, style}: Props) {
+export default function Element({data, index, style}: Props) {
   const store = useContext(StoreContext);
   const {ownerFlatTree, ownerID, selectedElementID} = useContext(
     TreeStateContext,
   );
   const dispatch = useContext(TreeDispatcherContext);
+  const {showInlineWarningsAndErrors} = React.useContext(SettingsContext);
 
   const element =
     ownerFlatTree !== null
@@ -46,6 +50,24 @@ export default function ElementView({data, index, style}: Props) {
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
+  const errorsAndWarningsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () =>
+        element === null
+          ? {errorCount: 0, warningCount: 0}
+          : store.getErrorAndWarningCountForElementID(element.id),
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => store.removeListener('mutated', callback);
+      },
+    }),
+    [store, element],
+  );
+  const {errorCount, warningCount} = useSubscription<{|
+    errorCount: number,
+    warningCount: number,
+  |}>(errorsAndWarningsSubscription);
+
   const handleDoubleClick = () => {
     if (id !== null) {
       dispatch({type: 'SELECT_OWNER', payload: id});
@@ -81,7 +103,7 @@ export default function ElementView({data, index, style}: Props) {
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
-    console.warn(`<ElementView> Could not find element at index ${index}`);
+    console.warn(`<Element> Could not find element at index ${index}`);
 
     // This return needs to happen after hooks, since hooks can't be conditional.
     return null;
@@ -93,7 +115,7 @@ export default function ElementView({data, index, style}: Props) {
     hocDisplayNames,
     key,
     type,
-  } = ((element: any): Element);
+  } = ((element: any): ElementType);
 
   let className = styles.Element;
   if (isSelected) {
@@ -148,6 +170,26 @@ export default function ElementView({data, index, style}: Props) {
             />
           </Badge>
         ) : null}
+        {showInlineWarningsAndErrors && errorCount > 0 && (
+          <Icon
+            type="error"
+            className={
+              isSelected && treeFocused
+                ? styles.ErrorIconContrast
+                : styles.ErrorIcon
+            }
+          />
+        )}
+        {showInlineWarningsAndErrors && warningCount > 0 && (
+          <Icon
+            type="warning"
+            className={
+              isSelected && treeFocused
+                ? styles.WarningIconContrast
+                : styles.WarningIcon
+            }
+          />
+        )}
       </div>
     </div>
   );
@@ -160,7 +202,7 @@ const swallowDoubleClick = event => {
 };
 
 type ExpandCollapseToggleProps = {|
-  element: Element,
+  element: ElementType,
   store: Store,
 |};
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index f80f099f52479..01b05a9fa33a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -51,10 +51,13 @@ export type GetInspectedElement = (
   id: number,
 ) => InspectedElementFrontend | null;
 
+type RefreshInspectedElement = () => void;
+
 export type InspectedElementContextType = {|
   copyInspectedElementPath: CopyInspectedElementPath,
   getInspectedElementPath: GetInspectedElementPath,
   getInspectedElement: GetInspectedElement,
+  refreshInspectedElement: RefreshInspectedElement,
   storeAsGlobal: StoreAsGlobal,
 |};
 
@@ -159,6 +162,15 @@ function InspectedElementContextController({children}: Props) {
   // would itself be blocked by the same render that suspends (waiting for the data).
   const {selectedElementID} = useContext(TreeStateContext);
 
+  const refreshInspectedElement = useCallback<RefreshInspectedElement>(() => {
+    if (selectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(selectedElementID);
+      if (rendererID !== null) {
+        bridge.send('inspectElement', {id: selectedElementID, rendererID});
+      }
+    }
+  }, [bridge, selectedElementID]);
+
   const [
     currentlyInspectedElement,
     setCurrentlyInspectedElement,
@@ -217,6 +229,8 @@ function InspectedElementContextController({children}: Props) {
             rootType,
             state,
             key,
+            errors,
+            warnings,
           } = ((data.value: any): InspectedElementBackend);
 
           const inspectedElement: InspectedElementFrontend = {
@@ -257,6 +271,8 @@ function InspectedElementContextController({children}: Props) {
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),
+            errors,
+            warnings,
           };
 
           element = store.getElementByID(id);
@@ -343,6 +359,7 @@ function InspectedElementContextController({children}: Props) {
       copyInspectedElementPath,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     }),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
@@ -351,6 +368,7 @@ function InspectedElementContextController({children}: Props) {
       currentlyInspectedElement,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     ],
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
new file mode 100644
index 0000000000000..6ef5583b8957c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
@@ -0,0 +1,60 @@
+.ErrorTree, .WarningTree {
+  padding: 0.25rem 0 0 0;
+}
+
+.HeaderRow {
+  padding: 0 0.25rem;
+}
+
+.HeaderRow {
+  padding: 0 0.25rem;
+}
+
+.Error, .Warning {
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.Error {
+  border-top: 1px solid var(--color-console-error-border);
+  background-color: var(--color-console-error-background);
+  color: var(--color-error-text);
+  padding: 0 0.5rem;
+}
+
+.Warning {
+  border-top: 1px solid var(--color-console-warning-border);
+  background-color: var(--color-console-warning-background);
+  color: var(--color-warning-text);
+  padding: 0 0.5rem;
+}
+
+.Message {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ErrorBadge,
+.WarningBadge {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 0.75rem;
+  line-height: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  margin-right: 0.25rem;
+  font-size: var(--font-size-monospace-small);
+}
+
+.ErrorBadge {
+  background-color: var(--color-console-error-icon);
+  color: var(--color-console-error-badge-text);
+}
+
+.WarningBadge {
+  background-color: var(--color-console-warning-icon);
+  color: var(--color-console-warning-badge-text);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
new file mode 100644
index 0000000000000..1f161c98836b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Store from '../../store';
+import sharedStyles from './InspectedElementSharedStyles.css';
+import styles from './InspectedElementErrorsAndWarningsTree.css';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {InspectedElementContext} from './InspectedElementContext';
+
+import type {InspectedElement} from './types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+type Props = {|
+  bridge: FrontendBridge,
+  inspectedElement: InspectedElement,
+  store: Store,
+|};
+
+export default function InspectedElementErrorsAndWarningsTree({
+  bridge,
+  inspectedElement,
+  store,
+}: Props) {
+  const {refreshInspectedElement} = useContext(InspectedElementContext);
+
+  const {showInlineWarningsAndErrors} = useContext(SettingsContext);
+  if (!showInlineWarningsAndErrors) {
+    return null;
+  }
+
+  const {errors, warnings} = inspectedElement;
+
+  const clearErrors = () => {
+    const {id} = inspectedElement;
+    store.clearErrorsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing errors.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
+  };
+
+  const clearWarnings = () => {
+    const {id} = inspectedElement;
+    store.clearWarningsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing warnings.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
+  };
+
+  return (
+    <React.Fragment>
+      {errors.length > 0 && (
+        <Tree
+          badgeClassName={styles.ErrorBadge}
+          bridge={bridge}
+          className={styles.ErrorTree}
+          clearMessages={clearErrors}
+          entries={errors}
+          label="errors"
+          messageClassName={styles.Error}
+        />
+      )}
+      {warnings.length > 0 && (
+        <Tree
+          badgeClassName={styles.WarningBadge}
+          bridge={bridge}
+          className={styles.WarningTree}
+          clearMessages={clearWarnings}
+          entries={warnings}
+          label="warnings"
+          messageClassName={styles.Warning}
+        />
+      )}
+    </React.Fragment>
+  );
+}
+
+type TreeProps = {|
+  badgeClassName: string,
+  actions: React$Node,
+  className: string,
+  clearMessages: () => {},
+  entries: Array<[string, number]>,
+  label: string,
+  messageClassName: string,
+|};
+
+function Tree({
+  badgeClassName,
+  actions,
+  className,
+  clearMessages,
+  entries,
+  label,
+  messageClassName,
+}: TreeProps) {
+  if (entries.length === 0) {
+    return null;
+  }
+  return (
+    <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
+      <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
+        <div className={sharedStyles.Header}>{label}</div>
+        <Button
+          onClick={clearMessages}
+          title={`Clear all ${label} for this component`}>
+          <ButtonIcon type="clear" />
+        </Button>
+      </div>
+      {entries.map(([message, count], index) => (
+        <ErrorOrWarningView
+          key={`${label}-${index}`}
+          badgeClassName={badgeClassName}
+          className={messageClassName}
+          count={count}
+          message={message}
+        />
+      ))}
+    </div>
+  );
+}
+
+type ErrorOrWarningViewProps = {|
+  badgeClassName: string,
+  className: string,
+  count: number,
+  message: string,
+|};
+
+function ErrorOrWarningView({
+  className,
+  badgeClassName,
+  count,
+  message,
+}: ErrorOrWarningViewProps) {
+  return (
+    <div className={className}>
+      {count > 1 && <div className={badgeClassName}>{count}</div>}
+      <div className={styles.Message} title={message}>
+        {message}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
index 2da0a11286bf6..0e76706bcf138 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
@@ -12,6 +12,8 @@
 }
 
 .Header {
+  display: flex;
+  align-items: center;
   flex: 1 1;
   font-family: var(--font-family-sans);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index fd2c514e57823..a1c77b9b37b18 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -19,6 +19,7 @@ import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
 import HocBadges from './HocBadges';
 import InspectedElementContextTree from './InspectedElementContextTree';
+import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
@@ -120,6 +121,13 @@ export default function InspectedElementView({
           store={store}
         />
 
+        <InspectedElementErrorsAndWarningsTree
+          bridge={bridge}
+          getInspectedElementPath={getInspectedElementPath}
+          inspectedElement={inspectedElement}
+          store={store}
+        />
+
         <NativeStyleEditor />
 
         {showRenderedBy && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
index 0fe2ccaa78ea3..736d39fc75244 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -85,42 +85,44 @@ export default function SearchInput(props: Props) {
         value={searchText}
       />
       {!!searchText && (
-        <span className={styles.IndexLabel}>
-          {Math.min(searchIndex + 1, searchResults.length)} |{' '}
-          {searchResults.length}
-        </span>
+        <React.Fragment>
+          <span className={styles.IndexLabel}>
+            {Math.min(searchIndex + 1, searchResults.length)} |{' '}
+            {searchResults.length}
+          </span>
+          <div className={styles.LeftVRule} />
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+            title={
+              <React.Fragment>
+                Scroll to previous search result (<kbd>Shift</kbd> +{' '}
+                <kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="up" />
+          </Button>
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+            title={
+              <React.Fragment>
+                Scroll to next search result (<kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="down" />
+          </Button>
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={resetSearch}
+            title="Reset search">
+            <ButtonIcon type="close" />
+          </Button>
+        </React.Fragment>
       )}
-      <div className={styles.LeftVRule} />
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
-        title={
-          <React.Fragment>
-            Scroll to previous search result (<kbd>Shift</kbd> +{' '}
-            <kbd>Enter</kbd>)
-          </React.Fragment>
-        }>
-        <ButtonIcon type="up" />
-      </Button>
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
-        title={
-          <React.Fragment>
-            Scroll to next search result (<kbd>Enter</kbd>)
-          </React.Fragment>
-        }>
-        <ButtonIcon type="down" />
-      </Button>
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={resetSearch}
-        title="Reset search">
-        <ButtonIcon type="close" />
-      </Button>
     </div>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.css b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
index 64a5983ee06d9..2036695a50e34 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
@@ -44,6 +44,7 @@
 .VRule {
   height: 20px;
   width: 1px;
+  flex: 0 0 1px;
   margin: 0 0.5rem;
   background-color: var(--color-border);
 }
@@ -58,3 +59,23 @@
   font-size: var(--font-size-sans-large);
   color: var(--color-dim);
 }
+
+.IconAndCount {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-sans-normal);
+}
+
+.ErrorIcon, .WarningIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  flex: 0 0 auto;
+}
+.ErrorIcon {
+  color: var(--color-console-error-icon);
+}
+.WarningIcon {
+  color: var(--color-console-warning-icon);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index fe5221a66f166..467af81b77f3d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -21,18 +21,21 @@ import {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import Icon from '../Icon';
 import {SettingsContext} from '../Settings/SettingsContext';
 import {BridgeContext, StoreContext} from '../context';
-import ElementView from './Element';
+import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightNativeElement, useSubscription} from '../hooks';
 
 import styles from './Tree.css';
+import ButtonIcon from '../ButtonIcon';
+import Button from '../Button';
 
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
@@ -71,7 +74,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const {lineHeight} = useContext(SettingsContext);
+  const {lineHeight, showInlineWarningsAndErrors} = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -301,6 +304,29 @@ export default function Tree(props: Props) {
     [store],
   );
 
+  const handlePreviousErrorOrWarningClick = React.useCallback(() => {
+    dispatch({type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'});
+  }, []);
+
+  const handleNextErrorOrWarningClick = React.useCallback(() => {
+    dispatch({type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'});
+  }, []);
+
+  const errorsOrWarningsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        errors: store.errorCount,
+        warnings: store.warningCount,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => store.removeListener('mutated', callback);
+      },
+    }),
+    [store],
+  );
+  const {errors, warnings} = useSubscription(errorsOrWarningsSubscription);
+
   return (
     <TreeFocusedContext.Provider value={treeFocused}>
       <div className={styles.Tree} ref={treeRef}>
@@ -315,6 +341,40 @@ export default function Tree(props: Props) {
             {ownerID !== null ? <OwnersStack /> : <SearchInput />}
           </Suspense>
           <div className={styles.VRule} />
+          {showInlineWarningsAndErrors &&
+            ownerID === null &&
+            (errors > 0 || warnings > 0) && (
+              <React.Fragment>
+                {errors > 0 && (
+                  <div className={styles.IconAndCount}>
+                    <Icon className={styles.ErrorIcon} type="error" />
+                    {errors}
+                  </div>
+                )}
+                {warnings > 0 && (
+                  <div className={styles.IconAndCount}>
+                    <Icon className={styles.WarningIcon} type="warning" />
+                    {warnings}
+                  </div>
+                )}
+                <Button
+                  onClick={handlePreviousErrorOrWarningClick}
+                  title="Scroll to previous error or warning">
+                  <ButtonIcon type="up" />
+                </Button>
+                <Button
+                  onClick={handleNextErrorOrWarningClick}
+                  title="Scroll to next error or warning">
+                  <ButtonIcon type="down" />
+                </Button>
+                <Button
+                  onClick={() => store.clearErrorsAndWarnings()}
+                  title="Clear all errors and warnings">
+                  <ButtonIcon type="clear" />
+                </Button>
+                <div className={styles.VRule} />
+              </React.Fragment>
+            )}
           <SettingsModalContextToggle />
         </div>
         <div
@@ -339,7 +399,7 @@ export default function Tree(props: Props) {
                 itemSize={lineHeight}
                 ref={listCallbackRef}
                 width={width}>
-                {ElementView}
+                {Element}
               </FixedSizeList>
             )}
           </AutoSizer>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index f748a9f3548af..a824bd493ff84 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -93,6 +93,9 @@ type ACTION_SELECT_ELEMENT_BY_ID = {|
 type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
   type: 'SELECT_NEXT_ELEMENT_IN_TREE',
 |};
+type ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {|
+  type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+|};
 type ACTION_SELECT_NEXT_SIBLING_IN_TREE = {|
   type: 'SELECT_NEXT_SIBLING_IN_TREE',
 |};
@@ -106,6 +109,9 @@ type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
 type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|
   type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',
 |};
+type ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {|
+  type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+|};
 type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {|
   type: 'SELECT_PREVIOUS_SIBLING_IN_TREE',
 |};
@@ -132,10 +138,12 @@ type Action =
   | ACTION_SELECT_ELEMENT_AT_INDEX
   | ACTION_SELECT_ELEMENT_BY_ID
   | ACTION_SELECT_NEXT_ELEMENT_IN_TREE
+  | ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE
   | ACTION_SELECT_NEXT_SIBLING_IN_TREE
   | ACTION_SELECT_OWNER
   | ACTION_SELECT_PARENT_ELEMENT_IN_TREE
   | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE
   | ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE
   | ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE
   | ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE
@@ -372,6 +380,83 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           }
         }
         break;
+      case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        if (store.errorCount === 0 && store.warningCount === 0) {
+          return state;
+        }
+
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+
+        let flatIndex = 0;
+        if (selectedElementIndex !== null) {
+          // Resume from the current position in the list.
+          // Otherwise step to the previous item, relative to the current selection.
+          for (
+            let i = elementIndicesWithErrorsOrWarnings.length - 1;
+            i >= 0;
+            i--
+          ) {
+            const {index} = elementIndicesWithErrorsOrWarnings[i];
+            if (index >= selectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let prevEntry;
+        if (flatIndex === 0) {
+          prevEntry =
+            elementIndicesWithErrorsOrWarnings[
+              elementIndicesWithErrorsOrWarnings.length - 1
+            ];
+          selectedElementID = prevEntry.id;
+          selectedElementIndex = prevEntry.index;
+        } else {
+          prevEntry = elementIndicesWithErrorsOrWarnings[flatIndex - 1];
+          selectedElementID = prevEntry.id;
+          selectedElementIndex = prevEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
+      case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        if (store.errorCount === 0 && store.warningCount === 0) {
+          return state;
+        }
+
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+
+        let flatIndex = -1;
+        if (selectedElementIndex !== null) {
+          // Resume from the current position in the list.
+          // Otherwise step to the next item, relative to the current selection.
+          for (let i = 0; i < elementIndicesWithErrorsOrWarnings.length; i++) {
+            const {index} = elementIndicesWithErrorsOrWarnings[i];
+            if (index <= selectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let nextEntry;
+        if (flatIndex >= elementIndicesWithErrorsOrWarnings.length - 1) {
+          nextEntry = elementIndicesWithErrorsOrWarnings[0];
+          selectedElementID = nextEntry.id;
+          selectedElementIndex = nextEntry.index;
+        } else {
+          nextEntry = elementIndicesWithErrorsOrWarnings[flatIndex + 1];
+          selectedElementID = nextEntry.id;
+          selectedElementIndex = nextEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
       default:
         // React can bailout of no-op updates.
         return state;
@@ -776,11 +861,13 @@ function TreeContextController({
         case 'SELECT_ELEMENT_BY_ID':
         case 'SELECT_CHILD_ELEMENT_IN_TREE':
         case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE':
         case 'SELECT_NEXT_SIBLING_IN_TREE':
         case 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE':
         case 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE':
         case 'SELECT_PARENT_ELEMENT_IN_TREE':
         case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE':
         case 'SELECT_PREVIOUS_SIBLING_IN_TREE':
         case 'SELECT_OWNER':
         case 'UPDATE_INSPECTED_ELEMENT_ID':
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index cccaba1c9b151..efdb894636885 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -84,6 +84,8 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
 
   // List of owners
   owners: Array<Owner> | null,
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index db54b7091e425..ce02611127f31 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -16,13 +16,15 @@ export type IconType =
   | 'code'
   | 'components'
   | 'copy'
+  | 'error'
   | 'flame-chart'
   | 'interactions'
   | 'profiler'
   | 'ranked-chart'
   | 'search'
   | 'settings'
-  | 'store-as-global-variable';
+  | 'store-as-global-variable'
+  | 'warning';
 
 type Props = {|
   className?: string,
@@ -47,6 +49,9 @@ export default function Icon({className = '', type}: Props) {
     case 'copy':
       pathData = PATH_COPY;
       break;
+    case 'error':
+      pathData = PATH_ERROR;
+      break;
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
@@ -68,6 +73,9 @@ export default function Icon({className = '', type}: Props) {
     case 'store-as-global-variable':
       pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
       break;
+    case 'warning':
+      pathData = PATH_WARNING;
+      break;
     default:
       console.warn(`Unsupported type "${type}" specified for Icon`);
       break;
@@ -107,6 +115,8 @@ const PATH_COPY = `
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
 `;
 
+const PATH_ERROR = `M16.971 0h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-1.402 16.945l-3.554-3.521-3.518 3.568-1.418-1.418 3.507-3.566-3.586-3.472 1.418-1.417 3.581 3.458 3.539-3.583 1.431 1.431-3.535 3.568 3.566 3.522-1.431 1.43z`;
+
 const PATH_FLAME_CHART = `
   M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627
   5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,
@@ -154,3 +164,5 @@ const PATH_STORE_AS_GLOBAL_VARIABLE = `
   1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6
   8h-4v-2h4v2zm0-4h-4v-2h4v2z
 `;
+
+const PATH_WARNING = `M12 1l-12 22h24l-12-22zm-1 8h2v7h-2v-7zm1 11.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z`;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 55779509bfd17..85b5c875e4739 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -11,8 +11,10 @@ import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
 } from 'react-devtools-shared/src/constants';
 import {utfDecodeString} from 'react-devtools-shared/src/utils';
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
@@ -294,6 +296,9 @@ function updateTree(
         }
         break;
       }
+      case TREE_OPERATION_REMOVE_ROOT: {
+        throw Error('Operation REMOVE_ROOT is not supported while profiling.');
+      }
       case TREE_OPERATION_REORDER_CHILDREN: {
         id = ((operations[i + 1]: any): number);
         const numChildren = ((operations[i + 2]: any): number);
@@ -329,6 +334,21 @@ function updateTree(
         i += 3;
         break;
       }
+      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:
+        id = operations[i + 1];
+        const numErrors = operations[i + 2];
+        const numWarnings = operations[i + 3];
+
+        i += 4;
+
+        if (__DEBUG__) {
+          debug(
+            'Warnings and Errors update',
+            `fiber ${id} has ${numErrors} errors and ${numWarnings} warnings`,
+          );
+        }
+        break;
+
       default:
         throw Error(`Unsupported Bridge operation ${operation}`);
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index bc26ead4fc150..8d5da190be457 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -19,6 +19,8 @@ export default function DebuggingSettings(_: {||}) {
     breakOnConsoleErrors,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
+    setShowInlineWarningsAndErrors,
+    showInlineWarningsAndErrors,
   } = useContext(SettingsContext);
 
   return (
@@ -36,6 +38,19 @@ export default function DebuggingSettings(_: {||}) {
         </label>
       </div>
 
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={showInlineWarningsAndErrors}
+            onChange={({currentTarget}) =>
+              setShowInlineWarningsAndErrors(currentTarget.checked)
+            }
+          />{' '}
+          Show inline warnings and errors.
+        </label>
+      </div>
+
       <div className={styles.Setting}>
         <label>
           <input
@@ -48,6 +63,10 @@ export default function DebuggingSettings(_: {||}) {
           Break on warnings
         </label>
       </div>
+
+      <div className={styles.ConsoleAPIWarning}>
+        These settings require DevTools to override native console APIs.
+      </div>
     </div>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 2a89a9fe679b7..f63a901410fb6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -21,6 +21,7 @@ import {
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -44,6 +45,9 @@ type Context = {|
   breakOnConsoleErrors: boolean,
   setBreakOnConsoleErrors: (value: boolean) => void,
 
+  showInlineWarningsAndErrors: boolean,
+  setShowInlineWarningsAndErrors: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 
@@ -90,6 +94,13 @@ function SettingsContextController({
     LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
     false,
   );
+  const [
+    showInlineWarningsAndErrors,
+    setShowInlineWarningsAndErrors,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    true,
+  );
   const [
     traceUpdatesEnabled,
     setTraceUpdatesEnabled,
@@ -147,8 +158,14 @@ function SettingsContextController({
     bridge.send('updateConsolePatchSettings', {
       appendComponentStack,
       breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
     });
-  }, [bridge, appendComponentStack, breakOnConsoleErrors]);
+  }, [
+    bridge,
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+  ]);
 
   useEffect(() => {
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
@@ -168,6 +185,8 @@ function SettingsContextController({
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
+      setShowInlineWarningsAndErrors,
+      showInlineWarningsAndErrors,
       theme,
       traceUpdatesEnabled,
     }),
@@ -180,6 +199,8 @@ function SettingsContextController({
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
+      setShowInlineWarningsAndErrors,
+      showInlineWarningsAndErrors,
       theme,
       traceUpdatesEnabled,
     ],
@@ -324,6 +345,25 @@ export function updateThemeVariables(
     'color-component-badge-count-inverted',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-console-error-badge-text', documentElements);
+  updateStyleHelper(theme, 'color-console-error-background', documentElements);
+  updateStyleHelper(theme, 'color-console-error-border', documentElements);
+  updateStyleHelper(theme, 'color-console-error-icon', documentElements);
+  updateStyleHelper(theme, 'color-console-error-text', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-console-warning-badge-text',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-console-warning-background',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-console-warning-border', documentElements);
+  updateStyleHelper(theme, 'color-console-warning-icon', documentElements);
+  updateStyleHelper(theme, 'color-console-warning-text', documentElements);
+  updateStyleHelper(theme, 'color-context-border', documentElements);
   updateStyleHelper(theme, 'color-context-background', documentElements);
   updateStyleHelper(theme, 'color-context-background-hover', documentElements);
   updateStyleHelper(
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
index af400ba9161d0..7c1e6b55b4494 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
@@ -42,4 +42,4 @@
   padding: 0.5rem;
   flex: 0 1 auto;
   overflow: auto;
-}
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index bcdc427668df3..8bf8b3de1fddf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -128,7 +128,8 @@
   background-color: var(--color-toggle-text);
 }
 
-.ReleaseNotes {
+.ReleaseNotes,
+.ConsoleAPIWarning {
   width: 100%;
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index b49213ccdffee..1fc6d461a4da1 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -44,6 +44,16 @@
   --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
   --light-color-component-badge-count: #777d88;
   --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-console-error-badge-text: #ffffff;
+  --light-color-console-error-background: #fff0f0;
+  --light-color-console-error-border: #ffd6d6;
+  --light-color-console-error-icon: #eb3941;
+  --light-color-console-error-text: #fe2e31;
+  --light-color-console-warning-badge-text: #000000;
+  --light-color-console-warning-background: #fffbe5;
+  --light-color-console-warning-border: #fff5c1;
+  --light-color-console-warning-icon: #f4bd00;
+  --light-color-console-warning-text: #64460c;
   --light-color-context-background: rgba(0,0,0,.9);
   --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
   --light-color-context-background-selected: #178fb9;
@@ -121,6 +131,16 @@
   --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
   --dark-color-component-badge-count: #8f949d;
   --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-console-error-badge-text: #000000;
+  --dark-color-console-error-background: #290000;
+  --dark-color-console-error-border: #5c0000;
+  --dark-color-console-error-icon: #eb3941;
+  --dark-color-console-error-text: #fc7f7f;
+  --dark-color-console-warning-badge-text: #000000;
+  --dark-color-console-warning-background: #332b00;
+  --dark-color-console-warning-border: #665500;
+  --dark-color-console-warning-icon: #f4bd00;
+  --dark-color-console-warning-text: #f5f2ed;
   --dark-color-context-background: rgba(255,255,255,.9);
   --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
   --dark-color-context-background-selected: #0088fa;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 62234fdc46425..9bec6f40a1537 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -182,6 +182,8 @@ export function installHook(target: any): DevToolsHook | null {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
         const breakOnConsoleErrors =
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+        const showInlineWarningsAndErrors =
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
@@ -195,6 +197,7 @@ export function installHook(target: any): DevToolsHook | null {
           patchConsole({
             appendComponentStack,
             breakOnConsoleErrors,
+            showInlineWarningsAndErrors,
           });
         }
       } catch (error) {}
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 2c796c2228b8d..d84d5e67e98b6 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -26,7 +26,9 @@ import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from './constants';
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
@@ -34,6 +36,7 @@ import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
 } from './constants';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
@@ -204,6 +207,12 @@ export function printOperationsArray(operations: Array<number>) {
         }
         break;
       }
+      case TREE_OPERATION_REMOVE_ROOT: {
+        i += 1;
+
+        logs.push(`Remove root ${rootID}`);
+        break;
+      }
       case TREE_OPERATION_REORDER_CHILDREN: {
         const id = ((operations[i + 1]: any): number);
         const numChildren = ((operations[i + 2]: any): number);
@@ -220,6 +229,17 @@ export function printOperationsArray(operations: Array<number>) {
         // The profiler UI uses them lazily in order to generate the tree.
         i += 3;
         break;
+      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:
+        const id = operations[i + 1];
+        const numErrors = operations[i + 2];
+        const numWarnings = operations[i + 3];
+
+        i += 4;
+
+        logs.push(
+          `Node ${id} has ${numErrors} errors and ${numWarnings} warnings`,
+        );
+        break;
       default:
         throw Error(`Unsupported Bridge operation ${operation}`);
     }
@@ -293,6 +313,25 @@ export function setBreakOnConsoleErrors(value: boolean): void {
   );
 }
 
+export function getShowInlineWarningsAndErrors(): boolean {
+  try {
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    );
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return true;
+}
+
+export function setShowInlineWarningsAndErrors(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    JSON.stringify(value),
+  );
+}
+
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
   type: ElementType,
diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
new file mode 100644
index 0000000000000..9aa681b29381d
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -0,0 +1,181 @@
+/** @flow */
+
+import * as React from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
+
+function WarnDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  return children;
+}
+
+function WarnOnMount({children = null}) {
+  useEffect(() => {
+    console.warn('This warning fires on initial mount only');
+  }, []);
+  return children;
+}
+
+function WarnOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.warn('This warning fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+function WarnOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+function ErrorDuringRender({children = null}) {
+  console.error('This error fires during every render');
+  return children;
+}
+
+function ErrorOnMount({children = null}) {
+  useEffect(() => {
+    console.error('This error fires on initial mount only');
+  }, []);
+  return children;
+}
+
+function ErrorOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.error('This error fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+function ErrorOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+function ErrorAndWarningDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  console.error('This error fires during every render');
+  return children;
+}
+
+function ErrorAndWarningOnMount({children = null}) {
+  useEffect(() => {
+    console.warn('This warning fires on initial mount only');
+    console.error('This error fires on initial mount only');
+  }, []);
+  return children;
+}
+
+function ErrorAndWarningOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.warn('This warning fires on every update');
+      console.error('This error fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+function ErrorAndWarningOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+function ReallyLongErrorMessageThatWillCauseTextToBeTruncated({
+  children = null,
+}) {
+  console.error(
+    'This error is a really long error message that should cause the text to be truncated in DevTools',
+  );
+  return children;
+}
+
+function ErrorWithMultipleArgs({children = null}) {
+  console.error('This error', 'passes console', 4, 'arguments');
+  return children;
+}
+
+function ErrorWithStringSubstitutions({children = null}) {
+  console.error('This error uses "%s" substitutions', 'string');
+  return children;
+}
+
+function ReactErrorOnHostComponent({children = null}) {
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+function DuplicateWarningsAndErrors({children = null}) {
+  console.warn('this warning is logged twice per render');
+  console.warn('this warning is logged twice per render');
+  console.error('this error is logged twice per render');
+  console.error('this error is logged twice per render');
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+function MultipleWarningsAndErrors({children = null}) {
+  console.warn('this is the first warning logged');
+  console.warn('this is the second warning logged');
+  console.error('this is the first error logged');
+  console.error('this is the second error logged');
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+function ComponentWithMissingKey({children}) {
+  return [<div />];
+}
+
+export default function ErrorsAndWarnings() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => setCount(count + 1);
+  return (
+    <Fragment>
+      <h1>Inline warnings</h1>
+      <button onClick={handleClick}>Update {count > 0 ? count : ''}</button>
+      <ComponentWithMissingKey />
+      <WarnDuringRender />
+      <WarnOnMount />
+      <WarnOnUpdate />
+      {count === 0 ? <WarnOnUnmount /> : null}
+      {count === 0 ? <WarnOnMount /> : null}
+      <ErrorDuringRender />
+      <ErrorOnMount />
+      <ErrorOnUpdate />
+      {count === 0 ? <ErrorOnUnmount /> : null}
+      <ErrorAndWarningDuringRender />
+      <ErrorAndWarningOnMount />
+      <ErrorAndWarningOnUpdate />
+      {count === 0 ? <ErrorAndWarningOnUnmount /> : null}
+      <ErrorWithMultipleArgs />
+      <ErrorWithStringSubstitutions />
+      <ReactErrorOnHostComponent />
+      <ReallyLongErrorMessageThatWillCauseTextToBeTruncated />
+      <DuplicateWarningsAndErrors />
+      <MultipleWarningsAndErrors />
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index 8483be6b050a9..b3c7b9be228c1 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -12,6 +12,7 @@ import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
+import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import PriorityLevels from './PriorityLevels';
@@ -53,6 +54,7 @@ function mountTestApp() {
   mountHelper(Hydration);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(InlineWarnings);
   mountHelper(PriorityLevels);
   mountHelper(ReactNativeWeb);
   mountHelper(Toggle);
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index a59a9fcc3bfdc..ee73da31c64ab 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -141,12 +141,41 @@ While profiling is in progress, we send an extra operation any time a fiber is a
 For example, updating the base duration for a fiber with an id of 1:
 ```js
 [
+  4,  // update tree base duration operation
   4,  // tree base duration operation
   1,  // fiber id
   32, // new tree base duration value
 ]
 ```
 
+#### Updating errors and warnings on a Fiber
+
+We record calls to `console.warn` and `console.error` in the backend.
+Periodically we notify the frontend that the number of recorded calls got updated.
+We only send the serialized messages as part of the `inspectElement` event.
+
+
+```js
+[
+  5, // update error/warning counts operation
+  4, // fiber id
+  0, // number of calls to console.error from that fiber
+  3, // number of calls to console.warn from that fiber
+]
+```
+
+#### Removing a root
+
+Special case of unmounting an entire root (include its decsendants). This specialized message replaces what would otherwise be a series of remove-node operations. It is currently only used in one case: updating component filters. The primary motivation for this is actually to preserve fiber ids for components that are re-added to the tree after the updated filters have been applied. This preserves mappings between the Fiber (id) and things like error and warning logs.
+
+```js
+[
+  6, // remove root operation
+]
+```
+
+This operation has no additional payload because renderer and root ids are already sent at the beginning of every operations payload.
+
 ## Reconstructing the tree
 
 The frontend stores its information about the tree in a map of id to objects with the following keys:
@@ -268,4 +297,4 @@ Once profiling is finished, the frontend requests profiling data from the backen
 
 ### Importing/exporting data
 
-Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as a single JSON object), enabling profiling sessions to be shared between users.
\ No newline at end of file
+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as a single JSON object), enabling profiling sessions to be shared between users.
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 7f1cd8855929b..39985e7416e18 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -59,6 +59,9 @@ module.exports = Object.assign({}, baseConfig, {
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
     ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js'
+    ),
   ],
   setupFiles: [
     ...baseConfig.setupFiles,