Show debug render tree node

app/components/object-inspector.hbs

@@ -26,6 +26,18 @@
       >
         {{svg-jar "send-with-text" width="20px" height="10px"}}
       </button>
+
+      {{#if this.canShowRenderNode}}
+        <button
+          data-test-object-inspector-show-render-node
+          class="toolbar-icon-button show-render-node"
+          title="Send Render Node to Console"
+          type="button"
+          {{on "click" this.showRenderNode}}
+        >
+          {{svg-jar "eye" width="20px" height="20px"}}
+        </button>
+      {{/if}}
       {{#if this.isClass}}
         <button
           data-test-goto-class-source-btn

app/components/object-inspector.js

@@ -21,6 +21,14 @@ export default class ObjectInspector extends Component {
   get current() {
     return this.args.model[this.args.model.length - 1];
   }
+
+  get renderNodeId() {
+    return this.current?.renderNodeId || null;
+  }
+
+  get canShowRenderNode() {
+    return Boolean(this.renderNodeId);
+  }
   get trail() {
     let nested = this.args.model.slice(1);
     if (nested.length === 0) {
@@ -80,4 +88,14 @@ export default class ObjectInspector extends Component {
       objectId,
     });
   }
+
+  @action showRenderNode() {
+    if (!this.renderNodeId) {
+      return;
+    }
+
+    this.port.send('objectInspector:showRenderTreeNode', {
+      id: this.renderNodeId,
+    });
+  }
 }

app/controllers/application.js

@@ -51,13 +51,14 @@ export default class ApplicationController extends Controller {
    * from within the ObjectInspector
    */
   @action
-  pushMixinDetails(name, property, objectId, details, errors) {
+  pushMixinDetails(name, property, objectId, details, errors, renderNodeId) {
     details = {
       name,
       property,
       objectId,
       mixins: details,
       errors,
+      renderNodeId,
     };
 
     this.mixinStack.push(details);
@@ -122,15 +123,22 @@ export default class ApplicationController extends Controller {
    * Called when inspecting an object from outside of the ObjectInspector
    */
   @action
-  activateMixinDetails(name, objectId, details, errors) {
+  activateMixinDetails(name, objectId, details, errors, renderNodeId) {
     this.mixinStack.forEach((item) => {
       this.port.send('objectInspector:releaseObject', {
         objectId: item.objectId,
       });
     });
 
     this.mixinStack = new TrackedArray([]);
-    this.pushMixinDetails(name, undefined, objectId, details, errors);
+    this.pushMixinDetails(
+      name,
+      undefined,
+      objectId,
+      details,
+      errors,
+      renderNodeId,
+    );
   }
 
   @action

app/routes/application.js

@@ -22,6 +22,7 @@ export default class ApplicationRoute extends Route {
     port.on('deprecation:count', this, this.setDeprecationCount);
     port.on('view:inspectComponent', this, this.inspectComponent);
     port.on('view:previewComponent', this, this.previewComponent);
+    port.on('view:renderTree', this, this.updateComponentTree);
   }
 
   deactivate() {
@@ -33,6 +34,7 @@ export default class ApplicationRoute extends Route {
     port.off('deprecation:count', this, this.setDeprecationCount);
     port.off('view:inspectComponent', this, this.inspectComponent);
     port.off('view:previewComponent', this, this.previewComponent);
+    port.off('view:renderTree', this, this.updateComponentTree);
   }
 
   inspectComponent({ id }) {
@@ -51,18 +53,36 @@ export default class ApplicationRoute extends Route {
     });
   }
 
+  updateComponentTree({ tree }) {
+    this.controller.componentTreeController.renderTree = tree;
+  }
+
   updateObject(options) {
     let { details, errors, name, objectId, property } = options;
 
     NativeArray.apply(details);
     details.forEach(arrayize);
 
     let controller = this.controller;
+    let renderNodeId = resolveRenderNodeId(controller, options);
 
     if (options.parentObject) {
-      controller.pushMixinDetails(name, property, objectId, details, errors);
+      controller.pushMixinDetails(
+        name,
+        property,
+        objectId,
+        details,
+        errors,
+        renderNodeId,
+      );
     } else {
-      controller.activateMixinDetails(name, objectId, details, errors);
+      controller.activateMixinDetails(
+        name,
+        objectId,
+        details,
+        errors,
+        renderNodeId,
+      );
     }
 
     this.layout.showInspector();
@@ -109,3 +129,22 @@ export default class ApplicationRoute extends Route {
 function arrayize(mixin) {
   NativeArray.apply(mixin.properties);
 }
+
+function resolveRenderNodeId(controller, options) {
+  if (options.parentObject) {
+    let parent = controller.mixinStack?.find(
+      (item) => item.objectId === options.parentObject,
+    );
+    if (parent?.renderNodeId) {
+      return parent.renderNodeId;
+    }
+  }
+
+  let currentItem = controller.componentTreeController?.currentItem;
+
+  if (currentItem?.instance && currentItem.instance === options.objectId) {
+    return currentItem.id;
+  }
+
+  return null;
+}

ember_debug/libs/render-tree.js

@@ -367,6 +367,16 @@ export default class RenderTree {
     }
   }
 
+  /**
+   * Return the raw render node by id (unserialized).
+   *
+   * @param {string} id A render node id.
+   * @return {Option<Object>} A render node with the given id, if any.
+   */
+  getNode(id) {
+    return this.nodes[id] || null;
+  }
+
   /**
    * Find the deepest enclosing render node for a given DOM node.
    *

ember_debug/object-inspector.js

@@ -398,6 +398,13 @@ export default class extends DebugPort {
         const container = this.namespace?.owner;
         this.sendValueToConsole(container);
       },
+      showRenderTreeNode(message) {
+        let node = this.namespace?.viewDebug?.renderTree?.getNode(message.id);
+
+        if (node) {
+          this.sendValueToConsole(node);
+        }
+      },
       /**
        * Lookup the router instance, and find the route with the given name
        * @param message The message sent

tests/ember_debug/view-debug-test.js

@@ -96,7 +96,7 @@ async function inspectById(objectId) {
 
 async function getRenderTree() {
   let message = await captureMessage('view:renderTree', async () => {
-    EmberDebug.port.trigger('view:getTree', {});
+    EmberDebug.port.trigger('view:getTree', { immediate: true });
   });
 
   if (message) {