diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 0cb5f8b9364d5..fb920df93807e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -4,11 +4,7 @@ import {createElement} from 'react';
 import {createRoot, flushSync} from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
-import {
-  createViewElementSource,
-  getBrowserName,
-  getBrowserTheme,
-} from './utils';
+import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {
   getSavedComponentFilters,
@@ -155,10 +151,54 @@ function createPanelIfReactLoaded() {
           },
         );
 
-        const viewElementSourceFunction = createViewElementSource(
-          bridge,
-          store,
-        );
+        const viewAttributeSourceFunction = (id, path) => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to find the specified attribute,
+            // and store it as a global variable on the window.
+            bridge.send('viewAttributeSource', {id, path, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the attribute,
+              // assuming the renderer found a match.
+              chrome.devtools.inspectedWindow.eval(`
+                if (window.$attribute != null) {
+                  inspect(window.$attribute);
+                }
+              `);
+            }, 100);
+          }
+        };
+
+        const viewElementSourceFunction = id => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to determine the component function,
+            // and store it as a global variable on the window
+            bridge.send('viewElementSource', {id, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the component function,
+              // or a render method if it is a Class (ideally Class instance, not type)
+              // assuming the renderer found one.
+              chrome.devtools.inspectedWindow.eval(`
+                if (window.$type != null) {
+                  if (
+                    window.$type &&
+                    window.$type.prototype &&
+                    window.$type.prototype.isReactComponent
+                  ) {
+                    // inspect Component.render, not constructor
+                    inspect(window.$type.prototype.render);
+                  } else {
+                    // inspect Functional Component
+                    inspect(window.$type);
+                  }
+                }
+              `);
+            }, 100);
+          }
+        };
 
         root = createRoot(document.createElement('div'));
 
@@ -170,11 +210,13 @@ function createPanelIfReactLoaded() {
               bridge,
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
               overrideTab,
               profilerPortalContainer,
               showTabBar: false,
-              warnIfUnsupportedVersionDetected: true,
               store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
               viewElementSourceFunction,
             }),
           );
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 922b1717563b5..4fc27de2ee6a1 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -2,38 +2,6 @@
 
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
 
-export function createViewElementSource(bridge: Bridge, store: Store) {
-  return function viewElementSource(id) {
-    const rendererID = store.getRendererIDForElement(id);
-    if (rendererID != null) {
-      // Ask the renderer interface to determine the component function,
-      // and store it as a global variable on the window
-      bridge.send('viewElementSource', {id, rendererID});
-
-      setTimeout(() => {
-        // Ask Chrome to display the location of the component function,
-        // or a render method if it is a Class (ideally Class instance, not type)
-        // assuming the renderer found one.
-        chrome.devtools.inspectedWindow.eval(`
-          if (window.$type != null) {
-            if (
-              window.$type &&
-              window.$type.prototype &&
-              window.$type.prototype.isReactComponent
-            ) {
-              // inspect Component.render, not constructor
-              inspect(window.$type.prototype.render);
-            } else {
-              // inspect Functional Component
-              inspect(window.$type);
-            }
-          }
-        `);
-      }, 100);
-    }
-  };
-}
-
 export type BrowserName = 'Chrome' | 'Firefox';
 
 export function getBrowserName(): BrowserName {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index f476cfee365da..c48711cce3bbd 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -8,7 +8,11 @@
  */
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type {GetInspectedElementPath} from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
+import type {
+  CopyInspectedElementPath,
+  GetInspectedElementPath,
+  StoreAsGlobal,
+} 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';
 
@@ -1203,4 +1207,139 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should enable inspected values to be stored as global variables', async done => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      storeAsGlobal = context.storeAsGlobal;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(storeAsGlobal).not.toBeNull();
+
+    const logSpy = jest.fn();
+    spyOn(console, 'log').and.callFake(logSpy);
+
+    // Should store the whole value (not just the hydrated parts)
+    storeAsGlobal(id, ['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject);
+
+    logSpy.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(global.$reactTemp2).toBe(nestedObject.a.b);
+
+    done();
+  });
+
+  it('should enable inspected values to be copied to the clipboard', async done => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
+
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      copyPath = context.copyInspectedElementPath;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(copyPath).not.toBeNull();
+
+    // Should copy the whole value (not just the hydrated parts)
+    copyPath(id, ['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    copyPath(id, ['props', 'nestedObject', 'a', 'b']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b),
+    );
+
+    done();
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 8c595d734f2fd..97aa706152e5e 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -392,4 +392,109 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should enable inspected values to be stored as global variables', () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    act(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+    const logSpy = jest.fn();
+    spyOn(console, 'log').and.callFake(logSpy);
+
+    // Should store the whole value (not just the hydrated parts)
+    bridge.send('storeAsGlobal', {
+      count: 1,
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject);
+
+    logSpy.mockReset();
+
+    // Should store the nested property specified (not just the outer value)
+    bridge.send('storeAsGlobal', {
+      count: 2,
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
+    expect(global.$reactTemp2).toBe(nestedObject.a.b);
+  });
+
+  it('should enable inspected values to be copied to the clipboard', () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    act(() =>
+      ReactDOM.render(
+        <Example nestedObject={nestedObject} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+    // Should copy the whole value (not just the hydrated parts)
+    bridge.send('copyElementPath', {
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    bridge.send('copyElementPath', {
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b),
+    );
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index 5d5511207b3e8..278419c814f85 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -14,6 +14,13 @@ import type {
 
 const env = jasmine.getEnv();
 env.beforeEach(() => {
+  global.mockClipboardCopy = jest.fn();
+
+  // Test environment doesn't support document methods like execCommand()
+  // Also once the backend components below have been required,
+  // it's too late for a test to mock the clipboard-js modules.
+  jest.mock('clipboard-js', () => ({copy: global.mockClipboardCopy}));
+
   // These files should be required (and re-reuired) before each test,
   // rather than imported at the head of the module.
   // That's because we reset modules between tests,
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 5161b434c5bad..73c09f6a84239 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -55,6 +55,19 @@ type ElementAndRendererID = {|
   rendererID: number,
 |};
 
+type StoreAsGlobalParams = {|
+  count: number,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+|};
+
+type CopyElementParams = {|
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+|};
+
 type InspectElementParams = {|
   id: number,
   path?: Array<string | number>,
@@ -126,6 +139,7 @@ export default class Agent extends EventEmitter<{|
 
     this._bridge = bridge;
 
+    bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getOwnersList', this.getOwnersList);
@@ -140,6 +154,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopProfiling', this.stopProfiling);
+    bridge.addListener('storeAsGlobal', this.storeAsGlobal);
     bridge.addListener(
       'syncSelectionFromNativeElementsPanel',
       this.syncSelectionFromNativeElementsPanel,
@@ -150,6 +165,7 @@ export default class Agent extends EventEmitter<{|
       this.updateAppendComponentStack,
     );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
+    bridge.addListener('viewAttributeSource', this.viewAttributeSource);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
@@ -173,6 +189,15 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
+  copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.copyElementPath(id, path);
+    }
+  };
+
   getInstanceAndStyle({
     id,
     rendererID,
@@ -409,6 +434,15 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  storeAsGlobal = ({count, id, path, rendererID}: StoreAsGlobalParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.storeAsGlobal(id, path, count);
+    }
+  };
+
   updateAppendComponentStack = (appendComponentStack: boolean) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
@@ -430,6 +464,15 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  viewAttributeSource = ({id, path, rendererID}: CopyElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.prepareViewAttributeSource(id, path);
+    }
+  };
+
   viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 3e7232874504b..310941f8e21d2 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -15,8 +15,8 @@ import {
   ElementTypeOtherOrUnknown,
 } from 'react-devtools-shared/src/types';
 import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
-import {cleanForBridge, copyWithSet} from '../utils';
-import {getDisplayName} from 'react-devtools-shared/src/utils';
+import {cleanForBridge, copyToClipboard, copyWithSet} from '../utils';
+import {getDisplayName, getInObject} from 'react-devtools-shared/src/utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
@@ -649,6 +649,30 @@ export function attach(
     }
   }
 
+  function storeAsGlobal(
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      const value = getInObject(inspectedElement, path);
+      const key = `$reactTemp${count}`;
+
+      window[key] = value;
+
+      console.log(key);
+      console.log(value);
+    }
+  }
+
+  function copyElementPath(id: number, path: Array<string | number>): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      copyToClipboard(getInObject(inspectedElement, path));
+    }
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>,
@@ -812,6 +836,16 @@ export function attach(
     }
   }
 
+  function prepareViewAttributeSource(
+    id: number,
+    path: Array<string | number>,
+  ): void {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      window.$attribute = getInObject(inspectedElement, path);
+    }
+  }
+
   function prepareViewElementSource(id: number): void {
     const internalInstance = idToInternalInstanceMap.get(id);
     if (internalInstance == null) {
@@ -927,6 +961,7 @@ export function attach(
 
   return {
     cleanup,
+    copyElementPath,
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getFiberIDForNative: getInternalIDForNative,
@@ -943,6 +978,7 @@ export function attach(
     inspectElement,
     logElementToConsole,
     overrideSuspense,
+    prepareViewAttributeSource,
     prepareViewElementSource,
     renderer,
     setInContext,
@@ -953,6 +989,7 @@ export function attach(
     setTrackedPath,
     startProfiling,
     stopProfiling,
+    storeAsGlobal,
     updateComponentFilters,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index f62255579054e..0b1c35be6f595 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -34,7 +34,7 @@ import {
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
-import {cleanForBridge, copyWithSet} from './utils';
+import {cleanForBridge, copyToClipboard, copyWithSet} from './utils';
 import {
   __DEBUG__,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
@@ -2113,6 +2113,19 @@ export function attach(
   }
   // END copied code
 
+  function prepareViewAttributeSource(
+    id: number,
+    path: Array<string | number>,
+  ): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+    if (isCurrent) {
+      window.$attribute = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+    }
+  }
+
   function prepareViewElementSource(id: number): void {
     let fiber = idToFiberMap.get(id);
     if (fiber == null) {
@@ -2488,6 +2501,40 @@ export function attach(
     }
   }
 
+  function storeAsGlobal(
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      const value = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+      const key = `$reactTemp${count}`;
+
+      window[key] = value;
+
+      console.log(key);
+      console.log(value);
+    }
+  }
+
+  function copyElementPath(id: number, path: Array<string | number>): void {
+    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+
+    if (isCurrent) {
+      copyToClipboard(
+        getInObject(
+          ((mostRecentlyInspectedElement: any): InspectedElement),
+          path,
+        ),
+      );
+    }
+  }
+
   function inspectElement(
     id: number,
     path?: Array<string | number>,
@@ -3129,6 +3176,7 @@ export function attach(
 
   return {
     cleanup,
+    copyElementPath,
     findNativeNodesForFiberID,
     flushInitialOperations,
     getBestMatchForTrackedPath,
@@ -3141,6 +3189,7 @@ export function attach(
     handleCommitFiberUnmount,
     inspectElement,
     logElementToConsole,
+    prepareViewAttributeSource,
     prepareViewElementSource,
     overrideSuspense,
     renderer,
@@ -3152,6 +3201,7 @@ export function attach(
     setTrackedPath,
     startProfiling,
     stopProfiling,
+    storeAsGlobal,
     updateComponentFilters,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 044c153cceeab..8f738fbfe94cf 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -225,6 +225,7 @@ export type InstanceAndStyle = {|
 
 export type RendererInterface = {
   cleanup: () => void,
+  copyElementPath: (id: number, path: Array<string | number>) => void,
   findNativeNodesForFiberID: FindNativeNodesForFiberID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
@@ -241,6 +242,10 @@ export type RendererInterface = {
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
+  prepareViewAttributeSource: (
+    id: number,
+    path: Array<string | number>,
+  ) => void,
   prepareViewElementSource: (id: number) => void,
   renderer: ReactRenderer | null,
   setInContext: (id: number, path: Array<string | number>, value: any) => void,
@@ -256,6 +261,11 @@ export type RendererInterface = {
   setTrackedPath: (path: Array<PathFrame> | null) => void,
   startProfiling: (recordChangeDescriptions: boolean) => void,
   stopProfiling: () => void,
+  storeAsGlobal: (
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ) => void,
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
 };
 
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index f6a2494ba7c79..47355f2072a7c 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import {copy} from 'clipboard-js';
 import {dehydrate} from '../hydration';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -37,6 +38,11 @@ export function cleanForBridge(
   }
 }
 
+export function copyToClipboard(value: any): void {
+  const safeToCopy = serializeToString(value);
+  copy(safeToCopy === undefined ? 'undefined' : safeToCopy);
+}
+
 export function copyWithSet(
   obj: Object | Array<any>,
   path: Array<string | number>,
@@ -52,3 +58,17 @@ export function copyWithSet(
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
 }
+
+export function serializeToString(data: any): string {
+  const cache = new Set();
+  // Use a custom replacer function to protect against circular references.
+  return JSON.stringify(data, (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (cache.has(value)) {
+        return;
+      }
+      cache.add(value);
+    }
+    return value;
+  });
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index f6b39afac7e23..7bdc37971ee37 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -51,11 +51,27 @@ type OverrideSuspense = {|
   forceFallback: boolean,
 |};
 
+type CopyElementPathParams = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+|};
+
+type ViewAttributeSourceParams = {|
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+|};
+
 type InspectElementParams = {|
   ...ElementAndRendererID,
   path?: Array<string | number>,
 |};
 
+type StoreAsGlobalParams = {|
+  ...ElementAndRendererID,
+  count: number,
+  path: Array<string | number>,
+|};
+
 type NativeStyleEditor_RenameAttributeParams = {|
   ...ElementAndRendererID,
   oldName: string,
@@ -95,6 +111,7 @@ type BackendEvents = {|
 
 type FrontendEvents = {|
   clearNativeElementHighlight: [],
+  copyElementPath: [CopyElementPathParams],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],
   getProfilingStatus: [],
@@ -115,8 +132,10 @@ type FrontendEvents = {|
   startProfiling: [boolean],
   stopInspectingNative: [boolean],
   stopProfiling: [],
+  storeAsGlobal: [StoreAsGlobalParams],
   updateAppendComponentStack: [boolean],
   updateComponentFilters: [Array<ComponentFilter>],
+  viewAttributeSource: [ViewAttributeSourceParams],
   viewElementSource: [ElementAndRendererID],
 
   // React Native style editor plug-in.
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
new file mode 100644
index 0000000000000..20af7c096f059
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
@@ -0,0 +1,7 @@
+.ContextMenu {
+  position: absolute;
+  background-color: var(--color-context-background);
+  border-radius: 0.25rem;
+  overflow: hidden;
+  z-index: 10000002;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
new file mode 100644
index 0000000000000..b0e703af9e37e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -0,0 +1,128 @@
+import React, {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+import {RegistryContext} from './Contexts';
+
+import styles from './ContextMenu.css';
+
+function respositionToFit(element, pageX, pageY) {
+  const ownerWindow = element.ownerDocument.defaultView;
+  if (element !== null) {
+    if (pageY + element.offsetHeight >= ownerWindow.innerHeight) {
+      if (pageY - element.offsetHeight > 0) {
+        element.style.top = `${pageY - element.offsetHeight}px`;
+      } else {
+        element.style.top = '0px';
+      }
+    } else {
+      element.style.top = `${pageY}px`;
+    }
+
+    if (pageX + element.offsetWidth >= ownerWindow.innerWidth) {
+      if (pageX - element.offsetWidth > 0) {
+        element.style.left = `${pageX - element.offsetWidth}px`;
+      } else {
+        element.style.left = '0px';
+      }
+    } else {
+      element.style.left = `${pageX}px`;
+    }
+  }
+}
+
+const HIDDEN_STATE = {
+  data: null,
+  isVisible: false,
+  pageX: 0,
+  pageY: 0,
+};
+
+type Props = {|
+  children: React$Node,
+  id: string,
+|};
+
+export default function ContextMenu({children, id}: Props) {
+  const {registerMenu} = useContext(RegistryContext);
+
+  const [state, setState] = useState(HIDDEN_STATE);
+
+  const bodyAccessorRef = useRef(null);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const ownerDocument = bodyAccessorRef.current.ownerDocument;
+    containerRef.current = ownerDocument.createElement('div');
+    ownerDocument.body.appendChild(containerRef.current);
+    return () => {
+      ownerDocument.body.removeChild(containerRef.current);
+    };
+  }, []);
+
+  useEffect(
+    () => {
+      const showMenu = ({data, pageX, pageY}) => {
+        setState({data, isVisible: true, pageX, pageY});
+      };
+      const hideMenu = () => setState(HIDDEN_STATE);
+      return registerMenu(id, showMenu, hideMenu);
+    },
+    [id],
+  );
+
+  useLayoutEffect(
+    () => {
+      if (!state.isVisible) {
+        return;
+      }
+
+      const menu = menuRef.current;
+
+      const hideUnlessContains = event => {
+        if (!menu.contains(event.target)) {
+          setState(HIDDEN_STATE);
+        }
+      };
+
+      const hide = event => {
+        setState(HIDDEN_STATE);
+      };
+
+      const ownerDocument = containerRef.current.ownerDocument;
+      ownerDocument.addEventListener('mousedown', hideUnlessContains);
+      ownerDocument.addEventListener('touchstart', hideUnlessContains);
+      ownerDocument.addEventListener('keydown', hideUnlessContains);
+
+      const ownerWindow = ownerDocument.defaultView;
+      ownerWindow.addEventListener('resize', hide);
+
+      respositionToFit(menu, state.pageX, state.pageY);
+
+      return () => {
+        ownerDocument.removeEventListener('mousedown', hideUnlessContains);
+        ownerDocument.removeEventListener('touchstart', hideUnlessContains);
+        ownerDocument.removeEventListener('keydown', hideUnlessContains);
+
+        ownerWindow.removeEventListener('resize', hide);
+      };
+    },
+    [state],
+  );
+
+  if (!state.isVisible) {
+    return <div ref={bodyAccessorRef} />;
+  } else {
+    return createPortal(
+      <div ref={menuRef} className={styles.ContextMenu}>
+        {children(state.data)}
+      </div>,
+      containerRef.current,
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css
new file mode 100644
index 0000000000000..1b36ea76c0142
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css
@@ -0,0 +1,22 @@
+.ContextMenuItem {
+  display: flex;
+  align-items: center;
+  color: var(--color-context-text);
+  padding: 0.5rem 0.75rem;
+  cursor: default;
+  border-top: 1px solid var(--color-context-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+}
+.ContextMenuItem:first-of-type {
+  border-top: none;
+}
+.ContextMenuItem:hover,
+.ContextMenuItem:focus {
+  outline: 0;
+  background-color: var(--color-context-background-hover);
+}
+.ContextMenuItem:active {
+  background-color: var(--color-context-background-selected);
+  color: var(--color-context-text-selected);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
new file mode 100644
index 0000000000000..162cd51d95d83
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {RegistryContext} from './Contexts';
+
+import styles from './ContextMenuItem.css';
+
+type Props = {|
+  children: React$Node,
+  onClick: Object => void,
+  title: string,
+|};
+
+export default function ContextMenuItem({children, onClick, title}: Props) {
+  const {hideMenu} = useContext(RegistryContext);
+
+  const handleClick = event => {
+    onClick();
+    hideMenu();
+  };
+
+  return (
+    <div
+      className={styles.ContextMenuItem}
+      onClick={handleClick}
+      onTouchEnd={handleClick}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
new file mode 100644
index 0000000000000..b237a2a71537a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -0,0 +1,53 @@
+import {createContext} from 'react';
+
+export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void;
+export type HideFn = () => void;
+
+const idToShowFnMap = new Map();
+const idToHideFnMap = new Map();
+
+let currentHideFn = null;
+
+function hideMenu() {
+  if (typeof currentHideFn === 'function') {
+    currentHideFn();
+  }
+}
+
+function showMenu({
+  data,
+  id,
+  pageX,
+  pageY,
+}: {|
+  data: Object,
+  id: string,
+  pageX: number,
+  pageY: number,
+|}) {
+  const showFn = idToShowFnMap.get(id);
+  if (typeof showFn === 'function') {
+    currentHideFn = idToHideFnMap.get(id);
+    showFn({data, pageX, pageY});
+  }
+}
+
+function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
+  if (idToShowFnMap.has(id)) {
+    throw Error(`Context menu with id "${id}" already registered.`);
+  }
+
+  idToShowFnMap.set(id, showFn);
+  idToHideFnMap.set(id, hideFn);
+
+  return function unregisterMenu() {
+    idToShowFnMap.delete(id, showFn);
+    idToHideFnMap.delete(id, hideFn);
+  };
+}
+
+export const RegistryContext = createContext({
+  hideMenu,
+  showMenu,
+  registerMenu,
+});
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
new file mode 100644
index 0000000000000..54cdcdb0a2d75
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -0,0 +1,32 @@
+import {useContext, useEffect} from 'react';
+import {RegistryContext} from './Contexts';
+
+export default function useContextMenu({data, id, ref}) {
+  const {showMenu} = useContext(RegistryContext);
+
+  useEffect(
+    () => {
+      if (ref.current !== null) {
+        const handleContextMenu = event => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          const pageX =
+            event.pageX || (event.touches && event.touches[0].pageX);
+          const pageY =
+            event.pageY || (event.touches && event.touches[0].pageY);
+
+          showMenu({data, id, pageX, pageY});
+        };
+
+        const trigger = ref.current;
+        trigger.addEventListener('contextmenu', handleContextMenu);
+
+        return () => {
+          trigger.removeEventListener('contextmenu', handleContextMenu);
+        };
+      }
+    },
+    [data, id, showMenu],
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
index a59a0cad25950..f479d477f4255 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -8,7 +8,7 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useRef, useState} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -18,6 +18,7 @@ import {InspectedElementContext} from './InspectedElementContext';
 import KeyValue from './KeyValue';
 import {serializeHooksForCopy} from '../utils';
 import styles from './HooksTree.css';
+import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 
 import type {InspectPath} from './SelectedElement';
@@ -113,6 +114,22 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
     [],
   );
 
+  const contextMenuTriggerRef = useRef(null);
+
+  useContextMenu({
+    data: {
+      path: ['hooks', ...path],
+      type:
+        hook !== null &&
+        typeof hook === 'object' &&
+        hook.hasOwnProperty(meta.type)
+          ? hook[meta.type]
+          : typeof value,
+    },
+    id: 'SelectedElement',
+    ref: contextMenuTriggerRef,
+  });
+
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
     if (__DEV__) {
@@ -169,6 +186,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
         inspectPath={inspectPath}
         name="subHooks"
         path={path.concat(['subHooks'])}
+        pathRoot="hooks"
         value={subHooks}
       />
     );
@@ -176,7 +194,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
     if (isComplexDisplayValue) {
       return (
         <div className={styles.Hook}>
-          <div className={styles.NameValueRow}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
             <span
               onClick={toggleIsOpen}
@@ -191,6 +209,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
               inspectPath={inspectPath}
               name="DebugValue"
               path={path.concat(['value'])}
+              pathRoot="hooks"
               value={value}
             />
             {subHooksView}
@@ -200,7 +219,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
     } else {
       return (
         <div className={styles.Hook}>
-          <div className={styles.NameValueRow}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
             <span
               onClick={toggleIsOpen}
@@ -253,6 +272,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
             name={name}
             overrideValueFn={overrideValueFn}
             path={path.concat(['value'])}
+            pathRoot="hooks"
             value={value}
           />
         </div>
@@ -260,7 +280,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
     } else {
       return (
         <div className={styles.Hook}>
-          <div className={styles.NameValueRow}>
+          <div ref={contextMenuTriggerRef} className={styles.NameValueRow}>
             <span className={styles.ExpandCollapseToggleSpacer} />
             <span
               className={
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 e2e23e75abd37..91303e0fcaa69 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -13,6 +13,7 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
@@ -33,17 +34,27 @@ import type {
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {Resource, Thenable} from '../../cache';
 
+export type StoreAsGlobal = (id: number, path: Array<string | number>) => void;
+
+export type CopyInspectedElementPath = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+
 export type GetInspectedElementPath = (
   id: number,
   path: Array<string | number>,
 ) => void;
+
 export type GetInspectedElement = (
   id: number,
 ) => InspectedElementFrontend | null;
 
 type Context = {|
+  copyInspectedElementPath: CopyInspectedElementPath,
   getInspectedElementPath: GetInspectedElementPath,
   getInspectedElement: GetInspectedElement,
+  storeAsGlobal: StoreAsGlobal,
 |};
 
 const InspectedElementContext = createContext<Context>(((null: any): Context));
@@ -88,6 +99,35 @@ function InspectedElementContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const storeAsGlobalCount = useRef(1);
+
+  // Ask the backend to store the value at the specified path as a global variable.
+  const storeAsGlobal = useCallback<GetInspectedElementPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('storeAsGlobal', {
+          count: storeAsGlobalCount.current++,
+          id,
+          path,
+          rendererID,
+        });
+      }
+    },
+    [bridge, store],
+  );
+
+  // Ask the backend to copy the specified path to the clipboard.
+  const copyInspectedElementPath = useCallback<GetInspectedElementPath>(
+    (id: number, path: Array<string | number>) => {
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('copyElementPath', {id, path, rendererID});
+      }
+    },
+    [bridge, store],
+  );
+
   // Ask the backend to fill in a "dehydrated" path; this will result in a "inspectedElement".
   const getInspectedElementPath = useCallback<GetInspectedElementPath>(
     (id: number, path: Array<string | number>) => {
@@ -287,9 +327,20 @@ function InspectedElementContextController({children}: Props) {
   );
 
   const value = useMemo(
-    () => ({getInspectedElement, getInspectedElementPath}),
+    () => ({
+      copyInspectedElementPath,
+      getInspectedElement,
+      getInspectedElementPath,
+      storeAsGlobal,
+    }),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
-    [currentlyInspectedElement, getInspectedElement, getInspectedElementPath],
+    [
+      copyInspectedElementPath,
+      currentlyInspectedElement,
+      getInspectedElement,
+      getInspectedElementPath,
+      storeAsGlobal,
+    ],
   );
 
   return (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index 7a5dbae571557..ca6616fdbe3ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -26,6 +26,7 @@ type Props = {|
   inspectPath?: InspectPath,
   label: string,
   overrideValueFn?: ?OverrideValueFn,
+  pathRoot: string,
   showWhenEmpty?: boolean,
   canAddEntries?: boolean,
 |};
@@ -35,6 +36,7 @@ export default function InspectedElementTree({
   inspectPath,
   label,
   overrideValueFn,
+  pathRoot,
   canAddEntries = false,
   showWhenEmpty = false,
 }: Props) {
@@ -88,6 +90,7 @@ export default function InspectedElementTree({
             <KeyValue
               key={name}
               alphaSort={true}
+              pathRoot={pathRoot}
               depth={1}
               inspectPath={inspectPath}
               name={name}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 8e9543f31c9c7..d82d96879046d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -8,13 +8,14 @@
  */
 
 import React, {useEffect, useRef, useState} from 'react';
-import type {Element} from 'react';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
 import {alphaSortEntries, getMetaValueLabel} from '../utils';
 import {meta} from '../../../hydration';
+import useContextMenu from '../../ContextMenu/useContextMenu';
 import styles from './KeyValue.css';
 
+import type {Element} from 'react';
 import type {InspectPath} from './SelectedElement';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
@@ -28,6 +29,7 @@ type KeyValueProps = {|
   name: string,
   overrideValueFn?: ?OverrideValueFn,
   path: Array<any>,
+  pathRoot: string,
   value: any,
 |};
 
@@ -40,10 +42,12 @@ export default function KeyValue({
   name,
   overrideValueFn,
   path,
+  pathRoot,
   value,
 }: KeyValueProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const prevIsOpenRef = useRef(isOpen);
+  const contextMenuTriggerRef = useRef(null);
 
   const isInspectable =
     value !== null &&
@@ -68,6 +72,20 @@ export default function KeyValue({
 
   const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
 
+  useContextMenu({
+    data: {
+      path: [pathRoot, ...path],
+      type:
+        value !== null &&
+        typeof value === 'object' &&
+        value.hasOwnProperty(meta.type)
+          ? value[meta.type]
+          : typeof value,
+    },
+    id: 'SelectedElement',
+    ref: contextMenuTriggerRef,
+  });
+
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -95,7 +113,13 @@ export default function KeyValue({
     const isEditable = typeof overrideValueFn === 'function' && !isReadOnly;
 
     children = (
-      <div key="root" className={styles.Item} hidden={hidden} style={style}>
+      <div
+        key="root"
+        path={path}
+        className={styles.Item}
+        hidden={hidden}
+        ref={contextMenuTriggerRef}
+        style={style}>
         <div className={styles.ExpandCollapseToggleSpacer} />
         <span className={isEditable ? styles.EditableName : styles.Name}>
           {name}
@@ -116,7 +140,12 @@ export default function KeyValue({
     !value.hasOwnProperty(meta.unserializable)
   ) {
     children = (
-      <div key="root" className={styles.Item} hidden={hidden} style={style}>
+      <div
+        ref={contextMenuTriggerRef}
+        key="root"
+        className={styles.Item}
+        hidden={hidden}
+        style={style}>
         {isInspectable ? (
           <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
         ) : (
@@ -150,11 +179,13 @@ export default function KeyValue({
           name={index}
           overrideValueFn={overrideValueFn}
           path={path.concat(index)}
+          pathRoot={pathRoot}
           value={value[index]}
         />
       ));
       children.unshift(
         <div
+          ref={contextMenuTriggerRef}
           key={`${depth}-root`}
           className={styles.Item}
           hidden={hidden}
@@ -200,11 +231,13 @@ export default function KeyValue({
           name={key}
           overrideValueFn={overrideValueFn}
           path={path.concat(key)}
+          pathRoot={pathRoot}
           value={keyValue}
         />
       ));
       children.unshift(
         <div
+          ref={contextMenuTriggerRef}
           key={`${depth}-root`}
           className={styles.Item}
           hidden={hidden}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
index e73880f632012..d1bb28f19706e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
@@ -112,3 +112,7 @@
   margin-left: 0.5rem;
   padding: 0;
 }
+
+.ContextMenuIcon {
+  margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index dcf3529a7140d..055378efca79f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -8,11 +8,14 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {useCallback, useContext} from 'react';
+import React, {Fragment, useCallback, useContext} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext, ContextMenuContext, StoreContext} from '../context';
+import ContextMenu from '../../ContextMenu/ContextMenu';
+import ContextMenuItem from '../../ContextMenu/ContextMenuItem';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
 import HooksTree from './HooksTree';
 import {ModalDialogContext} from '../ModalDialog';
 import HocBadges from './HocBadges';
@@ -33,7 +36,11 @@ import {
 
 import styles from './SelectedElement.css';
 
-import type {GetInspectedElementPath} from './InspectedElementContext';
+import type {
+  CopyInspectedElementPath,
+  GetInspectedElementPath,
+  StoreAsGlobal,
+} from './InspectedElementContext';
 import type {Element, InspectedElement} from './types';
 import type {ElementType} from 'react-devtools-shared/src/types';
 
@@ -49,9 +56,13 @@ export default function SelectedElement(_: Props) {
   const store = useContext(StoreContext);
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
-  const {getInspectedElementPath, getInspectedElement} = useContext(
-    InspectedElementContext,
-  );
+  const {
+    copyInspectedElementPath,
+    getInspectedElementPath,
+    getInspectedElement,
+    storeAsGlobal,
+    viewInspectedElementPath,
+  } = useContext(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
@@ -239,29 +250,38 @@ export default function SelectedElement(_: Props) {
           key={
             inspectedElementID /* Force reset when seleted Element changes */
           }
+          copyInspectedElementPath={copyInspectedElementPath}
           element={element}
           getInspectedElementPath={getInspectedElementPath}
           inspectedElement={inspectedElement}
+          storeAsGlobal={storeAsGlobal}
+          viewInspectedElementPath={viewInspectedElementPath}
         />
       )}
     </div>
   );
 }
 
+export type CopyPath = (path: Array<string | number>) => void;
 export type InspectPath = (path: Array<string | number>) => void;
 
 type InspectedElementViewProps = {|
+  copyInspectedElementPath: CopyInspectedElementPath,
   element: Element,
   getInspectedElementPath: GetInspectedElementPath,
   inspectedElement: InspectedElement,
+  storeAsGlobal: StoreAsGlobal,
 |};
 
 const IS_SUSPENDED = 'Suspended';
 
 function InspectedElementView({
+  copyInspectedElementPath,
   element,
   getInspectedElementPath,
   inspectedElement,
+  storeAsGlobal,
+  viewInspectedElementPath,
 }: InspectedElementViewProps) {
   const {id, type} = element;
   const {
@@ -281,6 +301,11 @@ function InspectedElementView({
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const {
+    isEnabledForInspectedElement,
+    viewAttributeSourceFunction,
+  } = useContext(ContextMenuContext);
+
   const inspectContextPath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['context', ...path]);
@@ -352,64 +377,102 @@ function InspectedElementView({
   }
 
   return (
-    <div className={styles.InspectedElement}>
-      <HocBadges element={element} />
-      <InspectedElementTree
-        label="props"
-        data={props}
-        inspectPath={inspectPropsPath}
-        overrideValueFn={overridePropsFn}
-        showWhenEmpty={true}
-        canAddEntries={typeof overridePropsFn === 'function'}
-      />
-      {type === ElementTypeSuspense ? (
+    <Fragment>
+      <div className={styles.InspectedElement}>
+        <HocBadges element={element} />
         <InspectedElementTree
-          label="suspense"
-          data={{
-            [IS_SUSPENDED]: state !== null,
-          }}
-          overrideValueFn={overrideSuspenseFn}
+          label="props"
+          data={props}
+          inspectPath={inspectPropsPath}
+          overrideValueFn={overridePropsFn}
+          pathRoot="props"
+          showWhenEmpty={true}
+          canAddEntries={typeof overridePropsFn === 'function'}
         />
-      ) : (
+        {type === ElementTypeSuspense ? (
+          <InspectedElementTree
+            label="suspense"
+            data={{
+              [IS_SUSPENDED]: state !== null,
+            }}
+            overrideValueFn={overrideSuspenseFn}
+          />
+        ) : (
+          <InspectedElementTree
+            label="state"
+            data={state}
+            inspectPath={inspectStatePath}
+            overrideValueFn={overrideStateFn}
+            pathRoot="state"
+          />
+        )}
+        <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} />
         <InspectedElementTree
-          label="state"
-          data={state}
-          inspectPath={inspectStatePath}
-          overrideValueFn={overrideStateFn}
+          label={hasLegacyContext ? 'legacy context' : 'context'}
+          data={context}
+          inspectPath={inspectContextPath}
+          overrideValueFn={overrideContextFn}
+          pathRoot="context"
         />
-      )}
-      <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} />
-      <InspectedElementTree
-        label={hasLegacyContext ? 'legacy context' : 'context'}
-        data={context}
-        inspectPath={inspectContextPath}
-        overrideValueFn={overrideContextFn}
-      />
-
-      <NativeStyleEditor />
-
-      {ownerID === null &&
-        owners !== null &&
-        owners.length > 0 && (
-          <div className={styles.Owners}>
-            <div className={styles.OwnersHeader}>rendered by</div>
-            {owners.map(owner => (
-              <OwnerView
-                key={owner.id}
-                displayName={owner.displayName || 'Anonymous'}
-                hocDisplayNames={owner.hocDisplayNames}
-                id={owner.id}
-                isInStore={store.containsElement(owner.id)}
-                type={owner.type}
-              />
-            ))}
-          </div>
+
+        <NativeStyleEditor />
+
+        {ownerID === null &&
+          owners !== null &&
+          owners.length > 0 && (
+            <div className={styles.Owners}>
+              <div className={styles.OwnersHeader}>rendered by</div>
+              {owners.map(owner => (
+                <OwnerView
+                  key={owner.id}
+                  displayName={owner.displayName || 'Anonymous'}
+                  hocDisplayNames={owner.hocDisplayNames}
+                  id={owner.id}
+                  isInStore={store.containsElement(owner.id)}
+                  type={owner.type}
+                />
+              ))}
+            </div>
+          )}
+
+        {source !== null && (
+          <Source fileName={source.fileName} lineNumber={source.lineNumber} />
         )}
+      </div>
 
-      {source !== null && (
-        <Source fileName={source.fileName} lineNumber={source.lineNumber} />
+      {isEnabledForInspectedElement && (
+        <ContextMenu id="SelectedElement">
+          {data => (
+            <Fragment>
+              <ContextMenuItem
+                onClick={() => copyInspectedElementPath(id, data.path)}
+                title="Copy value to clipboard">
+                <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
+                value to clipboard
+              </ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => storeAsGlobal(id, data.path)}
+                title="Store as global variable">
+                <Icon
+                  className={styles.ContextMenuIcon}
+                  type="store-as-global-variable"
+                />{' '}
+                Store as global variable
+              </ContextMenuItem>
+              {viewAttributeSourceFunction !== null &&
+                data.type === 'function' && (
+                  <ContextMenuItem
+                    onClick={() => viewAttributeSourceFunction(id, data.path)}
+                    title="Go to definition">
+                    <Icon className={styles.ContextMenuIcon} type="code" /> Go
+                    to definition
+                  </ContextMenuItem>
+                )}
+            </Fragment>
+          )}
+        </ContextMenu>
       )}
-    </div>
+    </Fragment>
   );
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 229a750adb7b7..f05cdd54e7c19 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -14,7 +14,7 @@ import '@reach/tooltip/styles.css';
 
 import React, {useEffect, useMemo, useState} from 'react';
 import Store from '../store';
-import {BridgeContext, StoreContext} from './context';
+import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
 import TabBar from './TabBar';
@@ -40,6 +40,10 @@ export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
 export type CanViewElementSource = (
   inspectedElement: InspectedElement,
 ) => boolean;
@@ -49,10 +53,12 @@ export type Props = {|
   browserTheme?: BrowserTheme,
   canViewElementSourceFunction?: ?CanViewElementSource,
   defaultTab?: TabID,
+  enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
+  viewAttributeSourceFunction?: ?ViewAttributeSource,
   viewElementSourceFunction?: ?ViewElementSource,
 
   // This property is used only by the web extension target.
@@ -87,14 +93,16 @@ export default function DevTools({
   bridge,
   browserTheme = 'light',
   canViewElementSourceFunction,
-  defaultTab = 'components',
   componentsPortalContainer,
+  defaultTab = 'components',
+  enabledInspectedElementContextMenu = false,
   overrideTab,
   profilerPortalContainer,
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
+  viewAttributeSourceFunction,
   viewElementSourceFunction,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
@@ -110,6 +118,14 @@ export default function DevTools({
     [canViewElementSourceFunction, viewElementSourceFunction],
   );
 
+  const contextMenu = useMemo(
+    () => ({
+      isEnabledForInspectedElement: enabledInspectedElementContextMenu,
+      viewAttributeSourceFunction: viewAttributeSourceFunction || null,
+    }),
+    [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
+  );
+
   useEffect(
     () => {
       return () => {
@@ -126,49 +142,53 @@ export default function DevTools({
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <ModalDialogContextController>
-          <SettingsContextController
-            browserTheme={browserTheme}
-            componentsPortalContainer={componentsPortalContainer}
-            profilerPortalContainer={profilerPortalContainer}>
-            <ViewElementSourceContext.Provider value={viewElementSource}>
-              <TreeContextController>
-                <ProfilerContextController>
-                  <div className={styles.DevTools}>
-                    {showTabBar && (
-                      <div className={styles.TabBar}>
-                        <ReactLogo />
-                        <span className={styles.DevToolsVersion}>
-                          {process.env.DEVTOOLS_VERSION}
-                        </span>
-                        <div className={styles.Spacer} />
-                        <TabBar
-                          currentTab={tab}
-                          id="DevTools"
-                          selectTab={setTab}
-                          tabs={tabs}
-                          type="navigation"
+        <ContextMenuContext.Provider value={contextMenu}>
+          <ModalDialogContextController>
+            <SettingsContextController
+              browserTheme={browserTheme}
+              componentsPortalContainer={componentsPortalContainer}
+              profilerPortalContainer={profilerPortalContainer}>
+              <ViewElementSourceContext.Provider value={viewElementSource}>
+                <TreeContextController>
+                  <ProfilerContextController>
+                    <div className={styles.DevTools}>
+                      {showTabBar && (
+                        <div className={styles.TabBar}>
+                          <ReactLogo />
+                          <span className={styles.DevToolsVersion}>
+                            {process.env.DEVTOOLS_VERSION}
+                          </span>
+                          <div className={styles.Spacer} />
+                          <TabBar
+                            currentTab={tab}
+                            id="DevTools"
+                            selectTab={setTab}
+                            tabs={tabs}
+                            type="navigation"
+                          />
+                        </div>
+                      )}
+                      <div
+                        className={styles.TabContent}
+                        hidden={tab !== 'components'}>
+                        <Components
+                          portalContainer={componentsPortalContainer}
                         />
                       </div>
-                    )}
-                    <div
-                      className={styles.TabContent}
-                      hidden={tab !== 'components'}>
-                      <Components portalContainer={componentsPortalContainer} />
-                    </div>
-                    <div
-                      className={styles.TabContent}
-                      hidden={tab !== 'profiler'}>
-                      <Profiler portalContainer={profilerPortalContainer} />
+                      <div
+                        className={styles.TabContent}
+                        hidden={tab !== 'profiler'}>
+                        <Profiler portalContainer={profilerPortalContainer} />
+                      </div>
                     </div>
-                  </div>
-                </ProfilerContextController>
-              </TreeContextController>
-            </ViewElementSourceContext.Provider>
-          </SettingsContextController>
-          {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
-          {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
-        </ModalDialogContextController>
+                  </ProfilerContextController>
+                </TreeContextController>
+              </ViewElementSourceContext.Provider>
+            </SettingsContextController>
+            {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+            {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
+          </ModalDialogContextController>
+        </ContextMenuContext.Provider>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index e29f22e07f5a6..ca1f24075a209 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -12,13 +12,16 @@ import styles from './Icon.css';
 
 export type IconType =
   | 'arrow'
+  | 'code'
   | 'components'
+  | 'copy'
   | 'flame-chart'
   | 'interactions'
   | 'profiler'
   | 'ranked-chart'
   | 'search'
-  | 'settings';
+  | 'settings'
+  | 'store-as-global-variable';
 
 type Props = {|
   className?: string,
@@ -31,9 +34,15 @@ export default function Icon({className = '', type}: Props) {
     case 'arrow':
       pathData = PATH_ARROW;
       break;
+    case 'code':
+      pathData = PATH_CODE;
+      break;
     case 'components':
       pathData = PATH_COMPONENTS;
       break;
+    case 'copy':
+      pathData = PATH_COPY;
+      break;
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
@@ -52,6 +61,9 @@ export default function Icon({className = '', type}: Props) {
     case 'settings':
       pathData = PATH_SETTINGS;
       break;
+    case 'store-as-global-variable':
+      pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
+      break;
     default:
       console.warn(`Unsupported type "${type}" specified for Icon`);
       break;
@@ -72,9 +84,18 @@ export default function Icon({className = '', type}: Props) {
 
 const PATH_ARROW = 'M8 5v14l11-7z';
 
+const PATH_CODE = `
+  M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
+  `;
+
 const PATH_COMPONENTS =
   'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';
 
+const PATH_COPY = `
+  M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
+  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_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,
@@ -115,3 +136,10 @@ const PATH_SETTINGS = `
   1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
   3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
 `;
+
+const PATH_STORE_AS_GLOBAL_VARIABLE = `
+  M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41
+  3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04
+  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
+`;
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 a9c3c3c2b26c5..20938e20175ef 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -313,6 +313,16 @@ function updateThemeVariables(
     'color-component-badge-count-inverted',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-context-background', documentElements);
+  updateStyleHelper(theme, 'color-context-background-hover', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-context-background-selected',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-context-border', documentElements);
+  updateStyleHelper(theme, 'color-context-text', documentElements);
+  updateStyleHelper(theme, 'color-context-text-selected', documentElements);
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index aa8fd3acf7234..fcc59935d4551 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -10,6 +10,7 @@
 import {createContext} from 'react';
 import Store from '../store';
 
+import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views/DevTools';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 export const BridgeContext = createContext<FrontendBridge>(
@@ -19,3 +20,14 @@ BridgeContext.displayName = 'BridgeContext';
 
 export const StoreContext = createContext<Store>(((null: any): Store));
 StoreContext.displayName = 'StoreContext';
+
+export type ContextMenuContextType = {|
+  isEnabledForInspectedElement: boolean,
+  viewAttributeSourceFunction?: ?ViewAttributeSource,
+|};
+
+export const ContextMenuContext = createContext<ContextMenuContextType>({
+  isEnabledForInspectedElement: false,
+  viewAttributeSourceFunction: null,
+});
+ContextMenuContext.displayName = 'ContextMenuContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index eb5812ca6c2aa..a55d4300d54ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -43,6 +43,12 @@
   --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-context-background: rgba(0,0,0,.9);
+  --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
+  --light-color-context-background-selected: #178fb9;
+  --light-color-context-border: #3d424a;
+  --light-color-context-text: #ffffff;
+  --light-color-context-text-selected: #ffffff;
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
@@ -109,6 +115,12 @@
   --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-context-background: rgba(255,255,255,.9);
+  --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
+  --dark-color-context-background-selected: #0088fa;
+  --dark-color-context-border: #eeeeee;
+  --dark-color-context-text: #000000;
+  --dark-color-context-text-selected: #ffffff;
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
new file mode 100644
index 0000000000000..f2320c490a160
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
@@ -0,0 +1,27 @@
+/**
+ * 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 React from 'react';
+
+const arrayOne = [];
+const arrayTwo = [];
+arrayTwo.push(arrayOne);
+arrayOne.push(arrayTwo);
+
+const objectOne = {};
+const objectTwo = {objectOne};
+objectOne.objectTwo = objectTwo;
+
+export default function CircularReferences() {
+  return <ChildComponent arrayOne={arrayOne} objectOne={objectOne} />;
+}
+
+function ChildComponent(props: any) {
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
index 58cc8386f0452..a371e3bbaeccd 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
@@ -9,6 +9,7 @@
 
 import React, {Fragment} from 'react';
 import UnserializableProps from './UnserializableProps';
+import CircularReferences from './CircularReferences';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';
@@ -27,6 +28,7 @@ export default function InspectableElements() {
       <Contexts />
       <CustomHooks />
       <CustomObject />
+      <CircularReferences />
     </Fragment>
   );
 }
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
index 8b731b2e82b0c..c84f74f845285 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
@@ -9,6 +9,8 @@
 
 import React from 'react';
 
+function noop() {}
+
 export default function SimpleValues() {
   return (
     <ChildComponent
@@ -21,6 +23,7 @@ export default function SimpleValues() {
       infinity={Infinity}
       true={true}
       false={false}
+      function={noop}
     />
   );
 }
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
index b2336c44606d7..4879e719c880a 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -55,6 +55,7 @@ inject('dist/app.js', () => {
       root.render(
         createElement(DevTools, {
           browserTheme: 'light',
+          enabledInspectedElementContextMenu: true,
           showTabBar: true,
           warnIfLegacyBackendDetected: true,
           warnIfUnsupportedVersionDetected: true,