--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -795,16 +795,27 @@ a.learn-more-link.webconsole-learn-more-
   margin-inline-end: 5px;
 }
 
 .message.startGroup .icon,
 .message.startGroupCollapsed .icon {
   display: none;
 }
 
+/*
+ * Open DOMNode in inspector button. Style need to be reset in the new
+ * console since its style is already defined in reps.css .
+ */
+.webconsole-output-wrapper .open-inspector {
+  background: unset;
+  padding-left: unset;
+  margin-left: unset;
+  cursor: unset;
+}
+
 /* console.table() */
 .new-consoletable {
   width: 100%;
   border-collapse: collapse;
   --consoletable-border: 1px solid var(--table-splitter-color);
 }
 
 .new-consoletable thead,

--- a/devtools/client/webconsole/new-console-output/components/grip-message-body.js
+++ b/devtools/client/webconsole/new-console-output/components/grip-message-body.js
@@ -56,19 +56,21 @@ function GripMessageBody(props) {
 
   let styleObject;
   if (userProvidedStyle && userProvidedStyle !== "") {
     styleObject = cleanupStyle(userProvidedStyle, serviceContainer.createElement);
   }
 
   let onDOMNodeMouseOver;
   let onDOMNodeMouseOut;
+  let onInspectIconClick;
   if (serviceContainer) {
     onDOMNodeMouseOver = (object) => serviceContainer.highlightDomElement(object);
     onDOMNodeMouseOut = serviceContainer.unHighlightDomElement;
+    onInspectIconClick = (object) => serviceContainer.openNodeInInspector(object);
   }
 
   return (
     // @TODO once there is a longString rep, also turn off quotes for those.
     typeof grip === "string"
       ? StringRep({
         object: grip,
         useQuotes: useQuotes,
@@ -76,16 +78,17 @@ function GripMessageBody(props) {
         mode: props.mode,
         style: styleObject
       })
       : Rep({
         object: grip,
         objectLink: VariablesViewLink,
         onDOMNodeMouseOver,
         onDOMNodeMouseOut,
+        onInspectIconClick,
         defaultRep: Grip,
         mode: props.mode,
       })
   );
 }
 
 function cleanupStyle(userProvidedStyle, createElement) {
   // Regular expression that matches the allowed CSS property names.

--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -96,18 +96,36 @@ NewConsoleOutputWrapper.prototype = {
             ? this.toolbox.highlighterUtils.highlightDomValueGrip(grip, options)
             : null;
         },
         unHighlightDomElement: (forceHide = false) => {
           return this.toolbox && this.toolbox.highlighterUtils
             ? this.toolbox.highlighterUtils.unhighlight(forceHide)
             : null;
         },
+        openNodeInInspector: async (grip) => {
+          if (!this.toolbox) {
+            return Promise.reject("no toolbox");
+          }
+
+          let onSelectInspector = this.toolbox.selectTool("inspector");
+          let onGripNodeToFront = this.toolbox.highlighterUtils.gripToNodeFront(grip);
+          let [
+            front,
+            inspector
+          ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
+
+          let onInspectorUpdated = inspector.once("inspector-updated");
+          let onNodeFrontSet = this.toolbox.selection.setNodeFront(front, "console");
+
+          return Promise.all([onNodeFrontSet, onInspectorUpdated]);
+        }
       }
     });
+
     let filterBar = FilterBar({
       serviceContainer: {
         attachRefToHud
       }
     });
 
     let provider = React.createElement(
       Provider,