ember-inspector 4.11.0-alpha.2024.3.9 → 4.11.0-alpha.2024.4.1

package/dist/websocket/ember_debug.js

@@ -150,15 +150,16 @@ define("ember-debug/adapters/basic", ["exports", "ember-debug/utils/on-ready", "
     }
 
     /**
-      Inspect a specific DOM node. This usually
+      Inspect a js value or specific DOM node. This usually
       means using the current environment's tools
       to inspect the node in the DOM.
        For example, in chrome, `inspect(node)`
       will open the Elements tab in dev tools
       and highlight the DOM node.
-       @param {Node} node
+      For functions, it will open the sources tab and goto the definition
+      @param {Node|Function} node
     */
-    inspectNode( /* node */) {}
+    inspectValue( /* value */) {}
     _messageReceived(message) {
       this._messageCallbacks.forEach(callback => {
         callback(message);
@@ -344,15 +345,19 @@ define("ember-debug/adapters/web-extension", ["exports", "ember-debug/adapters/b
       // "clone" them through postMessage unless they are converted to a
       // native array.
       options = deepClone(options);
-      this._chromePort.postMessage(options);
+      try {
+        this._chromePort.postMessage(options);
+      } catch (e) {
+        console.log('failed to send message', e);
+      }
     }
 
     /**
      * Open the devtools "Elements" and select an DOM node.
      *
-     * @param  {Node} node The DOM node to select
+     * @param  {Node|Function} value The DOM node to select
      */
-    inspectNode(node) {
+    inspectValue(value) {
       // NOTE:
       //
       // Basically, we are just trying to call `inspect(node)` here.
@@ -373,8 +378,8 @@ define("ember-debug/adapters/web-extension", ["exports", "ember-debug/adapters/b
       // so that the extension can find it.
 
       let name = `__EMBER_INSPECTOR_${(Math.random() * 100000000).toFixed(0)}`;
-      window[name] = node;
-      this.namespace.port.send('view:inspectDOMNode', {
+      window[name] = value;
+      this.namespace.port.send('view:inspectJSValue', {
         name
       });
     }
@@ -5294,7 +5299,7 @@ define("ember-debug/general-debug", ["exports", "ember-debug/debug-port", "ember
        */
       getLibraries() {
         this.sendMessage('libraries', {
-          libraries: _ember.default.libraries._registry
+          libraries: _ember.default.libraries?._registry
         });
       },
       getEmberCliConfig() {
@@ -5323,7 +5328,7 @@ define("ember-debug/general-debug", ["exports", "ember-debug/debug-port", "ember
     return null;
   }
 });
-define("ember-debug/libs/capture-render-tree", ["exports", "ember-debug/utils/version", "ember-debug/utils/ember"], function (_exports, _version, _ember) {
+define("ember-debug/libs/capture-render-tree", ["exports", "ember-debug/utils/ember"], function (_exports, _ember) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -5331,401 +5336,18 @@ define("ember-debug/libs/capture-render-tree", ["exports", "ember-debug/utils/ve
   });
   _exports.default = void 0;
   /* eslint-disable no-console, no-inner-declarations */
-
-  let captureRenderTree;
-
+  let capture = _ember.captureRenderTree;
   // Ember 3.14+ comes with debug render tree, but the version in 3.14.0/3.14.1 is buggy
-  if (_ember.default._captureRenderTree && (0, _version.compareVersion)(_ember.default.VERSION, '3.14.1') > 0) {
-    if (_ember.default.ENV._DEBUG_RENDER_TREE) {
-      captureRenderTree = _ember.default._captureRenderTree;
+  if (_ember.captureRenderTree) {
+    if ((0, _ember.getEnv)()._DEBUG_RENDER_TREE) {
+      capture = _ember.captureRenderTree;
     } else {
-      captureRenderTree = function captureRenderTree() {
+      capture = function captureRenderTree() {
         return [];
       };
     }
-  } else {
-    /**
-     * Best-effort polyfill for `Ember._captureRenderTree`.
-     *
-     * Just like the Ember API, it takes an owner (`ApplicationInstance`, specifically)
-     * and return an array of render nodes:
-     *
-     * interface CapturedRenderNode {
-     *   id: string;
-     *   type: 'outlet' | 'engine' | 'route-template' | 'component';
-     *   name: string;
-     *   args: {
-     *     named: Dict<unknown>;
-     *     positional: unknown[];
-     *   };
-     *   instance: unknown;
-     *   template: Option<string>;
-     *   bounds: Option<{
-     *     parentElement: Simple.Element;
-     *     firstNode: Simple.Node;
-     *     lastNode: Simple.Node;
-     *   }>;
-     *   children: CapturedRenderNode[];
-     * }
-     *
-     * While the API is identical, there are some differences and limitations:
-     *
-     * 1. `args` property is not available (it always report empty args).
-     * 2. `bounds` property is only available on component nodes (`null` everywhere else).
-     * 3. `{{mount}}` does not insert an `engine` node.
-     * 4. `Ember.Component` (classic components) are the only type of component in the tree
-     *    (other components are skipped over).
-     * 5. Ordering of `children` may be different (but this is also not guarenteed in the
-     *    Ember API).
-     */
-
-    const {
-      Controller,
-      ViewUtils,
-      get,
-      getOwner,
-      guidFor
-    } = _ember.default;
-    const {
-      getRootViews,
-      getChildViews,
-      getViewBounds
-    } = ViewUtils;
-
-    /**
-     * We are building the final tree by doing the following steps:
-     *
-     * 1. Get the "outlet state" tree from the router.
-     * 2. Collect the "top level" components. That is, components rendered directly from within
-     *    a route template.
-     * 3. Do an "interleaved walk" down the outlet and (classic) component tree and map things
-     *    into render nodes.
-     * 4. Return the array of render nodes we captured.
-     *
-     * Usually, this function returns an array of exactly one render node, which is the "root"
-     * outlet. However, sometimes there may be other top-level components in the app (e.g.
-     * rendered using the `Ember.Component#appendTo` API).
-     */
-    captureRenderTree = function captureRenderTree(owner) {
-      let tree = [];
-      let outletState = getOutletState(owner);
-      let components = getTopLevelComponents(owner);
-      if (outletState && components) {
-        tree.push(captureOutlet('root', owner, components, outletState));
-      }
-      return tree;
-    };
-
-    /**
-     * Get the "outlet state" tree from the router. It corresponds to the "settled",
-     * app state after resolving all the hooks, redirects, etc. The rendering layer
-     * takes this tree from the router and render it on screen.
-     *
-     * It has the following format:
-     *
-     * interface OutletState {
-     *   render: {
-     *     // The current owner, could be the app or an engine
-     *     owner: Owner;
-     *
-     *     // The name of the route
-     *     name: string;
-     *
-     *     // The controller for the route
-     *     controller: Controller;
-     *
-     *     // The template (or template factory?) for the route (can this really be undefined?)
-     *     template: OwnedTemplate | undefined;
-     *
-     *     // The name of the outlet this was rendered into (in the parent route template)
-     *     outlet: string;
-     *
-     *     // The name of the parent route (we don't use this)
-     *     into: string | undefined;
-     *   },
-     *
-     *   // The children outlets of this route, keyed by the outlet names (e.g. "main", "sidebar", ...)
-     *   outlets: Dict<OutletState | undefined>;
-     * }
-     *
-     * This function returns the "root" outlet state.
-     */
-    function getOutletState(owner) {
-      try {
-        // eslint-disable-next-line ember/no-private-routing-service
-        return owner.lookup('router:main')._toplevelView.state.ref.value();
-      } catch (error) {
-        console.log('[Ember Inspector] failed to capture render tree');
-        console.log(error);
-        return undefined;
-      }
-    }
-
-    /**
-     * Collect the "top level" components. That is, components rendered directly
-     * from within a route template.
-     *
-     * We do this by walking the classic component tree and identify components
-     * that has its "target" (~= the parent template's `{{this}}` object) set to
-     * a controller (or undefined, for root components rendered outside of the
-     * application route).
-     *
-     * This function returns a `Map` keyed by controllers (`undefiend` is also a
-     * possible key) to arrays of top-level components for that route/controller.
-     */
-    function getTopLevelComponents(owner) {
-      try {
-        let map = new Map();
-        collectComponentsByController(map, null, getRootViews(owner));
-        return map;
-      } catch (error) {
-        console.log('[Ember Inspector] failed to capture render tree');
-        console.log(error);
-        return undefined;
-      }
-    }
-
-    /**
-     * Returns the "target" of a (classic) component.
-     */
-    function targetForComponent(component) {
-      return get(component, '_target') || get(component, '_targetObject');
-    }
-
-    /**
-     * Recursively walk an array of components and add any "top level" components
-     * to the map keyed by their controller.
-     */
-    function collectComponentsByController(map, controller, components) {
-      components.forEach(component => {
-        let target = targetForComponent(component);
-        if (target === undefined || target instanceof Controller) {
-          /**
-           * If our parent is already added, don't add ourself again.
-           *
-           * This is to prevent something like this:
-           *
-           *    {{!-- app/templates/application.hbs}}
-           *    <Parent>
-           *      <Child />
-           *    </Parent>
-           *
-           * Without this check, both the parent and the yielded child will be
-           * considered "top level" since they both have the controller as their
-           * target.
-           */
-          if (target !== controller) {
-            if (!map.has(target)) {
-              map.set(target, []);
-            }
-            map.get(target).push(component);
-          }
-          collectComponentsByController(map, target, getChildViews(component));
-        } else {
-          collectComponentsByController(map, controller, getChildViews(component));
-        }
-      });
-    }
-    const EMPTY_ARGS = {
-      named: Object.create(null),
-      positional: []
-    };
-
-    /**
-     * Return the module name (e.g. `my-app/templates/application.hbs`) for a
-     * template or template factory, if available. This may not be present for,
-     * e.g. templates compiled using the "inline" `hbs` tagged string method.
-     */
-    function nameForTemplate(template) {
-      if (template.meta) {
-        // Factory
-        return template.meta.moduleName || null;
-      } else if (template.referrer) {
-        // Instance
-        return template.referrer.moduleName || null;
-      } else {
-        return null;
-      }
-    }
-
-    /**
-     * Walk an outlet tree (the last parameter) and map its content into render nodes.
-     *
-     * For each level of the outlet tree, we also have to walk the (classic) component
-     * tree to attach any components for the current level (and their children) to the
-     * resulting render nodes tree.
-     *
-     * We also check if the owner has changed between the current level and the previous
-     * level, and if so, we infer that we must have just crossed an engine boundary and
-     * insert an engine render node to account for that.
-     *
-     * Because we don't have a good way to generate a stable ID for the outlet nodes, we
-     * also pass down a "path" of the routes/outlets we have encountered so far which we
-     * use to generate the ID.
-     */
-    function captureOutlet(path, owner, components, {
-      outlets,
-      render
-    }) {
-      let outlet = {
-        id: `render-node:${path}@${render.outlet}`,
-        type: 'outlet',
-        name: render.outlet,
-        args: EMPTY_ARGS,
-        instance: undefined,
-        template: null,
-        bounds: null,
-        children: []
-      };
-      let parent = outlet;
-      if (owner !== render.owner) {
-        let engine = {
-          id: `render-node:${guidFor(render.owner)}`,
-          type: 'engine',
-          name: render.owner.mountPoint,
-          args: EMPTY_ARGS,
-          instance: render.owner,
-          template: null,
-          bounds: null,
-          children: []
-        };
-        parent.children.push(engine);
-        parent = engine;
-      }
-      let subpath = `${path}@${render.outlet}/${render.name}`;
-      let route = {
-        id: `render-node:${subpath}`,
-        type: 'route-template',
-        name: render.name,
-        args: EMPTY_ARGS,
-        instance: render.controller,
-        template: nameForTemplate(render.template),
-        bounds: null,
-        children: []
-      };
-      parent.children.push(route);
-      parent = route;
-      let childOutlets = Object.keys(outlets).map(name => captureOutlet(subpath, render.owner, components, outlets[name]));
-      let childComponents = captureComponents(components.get(render.controller) || [], render.controller);
-      parent.children.push(...mergeOutletChildren(render.controller, childOutlets, childComponents));
-      return outlet;
-    }
-
-    /**
-     * Its is possible to nest an outlet inside a component, one pretty common example
-     * is a "layout" component:
-     *
-     * <SidebarWrapper>
-     *   {{outlet "sidebar"}}
-     * </SidebarWrapper>
-     *
-     * On the other hand, it's not possible to put a component inside an outlet anymore
-     * when we get to this point. Try to find a suitable parent for each child outlet
-     * taking the above into account.
-     */
-    function mergeOutletChildren(controller, outlets, components) {
-      let merged = [];
-      for (let outlet of outlets) {
-        if (controller) {
-          let parentComponent = findOutletComponentParent(outlet.children);
-          if (controllerForComponent(parentComponent) === controller) {
-            let parentNode = findOutletComponentNode(components, parentComponent);
-            if (parentNode) {
-              parentNode.children.unshift(outlet);
-              continue;
-            }
-          }
-        }
-        merged.push(outlet);
-      }
-      merged.push(...components);
-      return merged;
-    }
-    function findOutletComponentParent(nodes) {
-      let result;
-      for (let node of nodes) {
-        if (node.type === 'component') {
-          result = node.instance.parentView;
-        } else if (node.type === 'engine' || node.type === 'route-template') {
-          result = findOutletComponentParent(node.children);
-        }
-        if (result !== undefined) {
-          return result;
-        }
-      }
-    }
-    function findOutletComponentNode(nodes, instance) {
-      let result;
-      for (let node of nodes) {
-        if (node.type === 'component') {
-          if (node.instance === instance) {
-            result = node;
-          } else {
-            result = findOutletComponentNode(node.children, instance);
-          }
-        }
-        if (result !== undefined) {
-          return result;
-        }
-      }
-    }
-
-    /**
-     * Returns the name of a (classic) component.
-     */
-    function nameForComponent(component) {
-      // remove "component:" prefix
-      return component._debugContainerKey.slice(10);
-    }
-
-    /**
-     * Returns the nearest controller of a (classic) component. This is so that we know
-     * whether a given component belongs to the current level (the route that we are
-     * processing right now) or not.
-     */
-    function controllerForComponent(component) {
-      let target = component;
-      while (target && !(target instanceof Controller)) {
-        target = targetForComponent(target);
-      }
-      return target;
-    }
-
-    /**
-     * Returns the template (or template factory?) for a (classic) component.
-     */
-    function templateForComponent(component) {
-      let layout = get(component, 'layout');
-      if (layout) {
-        return nameForTemplate(layout);
-      }
-      let layoutName = get(component, 'layoutName');
-      if (layoutName) {
-        let owner = getOwner(component);
-        let template = owner.lookup(`template:${layoutName}`);
-        return nameForTemplate(template);
-      }
-      return null;
-    }
-
-    /**
-     * Return the render node for a given (classic) component, and its children up
-     * until the next route boundary.
-     */
-    function captureComponents(components, controller) {
-      return components.filter(component => controllerForComponent(component) === controller).map(component => ({
-        id: `render-node:${guidFor(component)}`,
-        type: 'component',
-        name: nameForComponent(component),
-        args: EMPTY_ARGS,
-        instance: component,
-        template: templateForComponent(component),
-        bounds: getViewBounds(component),
-        children: captureComponents(getChildViews(component), controller)
-      }));
-    }
   }
-  var _default = captureRenderTree;
+  var _default = capture;
   _exports.default = _default;
 });
 define("ember-debug/libs/promise-assembler", ["exports", "ember-debug/models/promise", "ember-debug/utils/rsvp", "ember-debug/utils/base-object", "ember-debug/utils/evented"], function (_exports, _promise, _rsvp, _baseObject, _evented) {
@@ -5893,7 +5515,7 @@ define("ember-debug/libs/promise-assembler", ["exports", "ember-debug/models/pro
     });
   }
 });
-define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-render-tree", "ember-debug/utils/ember/object/internals", "ember-debug/utils/ember/loader"], function (_exports, _captureRenderTree, _internals, _loader) {
+define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-render-tree", "ember-debug/utils/ember/object/internals", "ember-debug/utils/ember/loader", "ember-debug/utils/type-check", "ember-debug/utils/version", "ember-debug/utils/ember"], function (_exports, _captureRenderTree, _internals, _loader, _typeCheck, _version, _ember) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -5911,6 +5533,8 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       } catch (e) {
         // nope
       }
+      this.DESTROY = (0, _loader.emberSafeRequire)('@glimmer/util')?.DESTROY;
+      this.registerDestructor = (0, _loader.emberSafeRequire)('@glimmer/destroyable')?.registerDestructor || (0, _loader.emberSafeRequire)('@ember/destroyable')?.registerDestructor || (0, _loader.emberSafeRequire)('@ember/runtime')?.registerDestructor;
       this.debugRenderTree = owner.lookup('renderer:-dom')?.debugRenderTree || owner.lookup('service:-glimmer-environment')._debugRenderTree;
       this.NewElementBuilder = this.runtime.NewElementBuilder;
       this.patch();
@@ -5922,8 +5546,8 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
     patch() {
       const self = this;
       const NewElementBuilder = this.NewElementBuilder;
-      const remoteStack = [];
       const componentStack = [];
+      const enableModifierSupport = (0, _version.isInVersionSpecifier)('>3.28.0', _ember.VERSION);
       function createRef(value) {
         if (self.reference.createUnboundRef) {
           return self.reference.createUnboundRef(value);
@@ -5931,6 +5555,15 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
           return value;
         }
       }
+      function createArgs(args) {
+        if (self.reference.createUnboundRef) {
+          return args;
+        } else {
+          return {
+            value: () => args
+          };
+        }
+      }
       const appendChild = this.debugRenderTree.appendChild;
       this.debugRenderTree.appendChild = function (node, state) {
         if (node.type === 'component') {
@@ -5944,7 +5577,7 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
         if (node?.type === 'component') {
           componentStack.pop();
         }
-        exit.call(this, state);
+        return exit.call(this, state);
       };
       const didAppendNode = NewElementBuilder.prototype.didAppendNode;
       NewElementBuilder.prototype.didAppendNode = function (...args) {
@@ -5956,11 +5589,79 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
         pushElement.call(this, ...args);
         args[0].__emberInspectorParentNode = componentStack.at(-1);
       };
+      const pushModifiers = NewElementBuilder.prototype.pushModifiers;
+      if (enableModifierSupport) {
+        NewElementBuilder.prototype.pushModifiers = function (modifiers) {
+          const debugRenderTree = self.debugRenderTree;
+          if (debugRenderTree) {
+            modifiers = modifiers || [];
+            const modifier = modifiers[0];
+            let element = null;
+            if (modifiers.length) {
+              element = modifier[1]?.element || modifier.state.element;
+            }
+            for (const modifier of modifiers) {
+              const state = {};
+              const modifierState = modifier.state?.instance || modifier.state || modifier[1];
+              const instance = modifierState?.instance || modifierState?.delegate;
+              let name = modifier.definition?.resolvedName || modifierState?.debugName || instance?.name;
+              if (!name) {
+                try {
+                  name = modifier.manager?.getDebugName?.();
+                } catch (e) {
+                  // failed
+                }
+                name = name || 'unknown-modifier';
+              }
+              const args = {
+                positional: [],
+                named: {}
+              };
+              const positional = modifierState?.args?.positional?.references || modifierState?.args?.positional || [];
+              for (const value of positional) {
+                if (value && value[self.reference.REFERENCE]) {
+                  args.positional.push(value);
+                } else {
+                  args.positional.push(createRef(value));
+                }
+              }
+              let named = modifierState?.args?.named;
+              if (!self.reference.createUnboundRef) {
+                try {
+                  named = modifierState?.args?.named?.constructor;
+                } catch (e) {
+                  //
+                }
+                try {
+                  named = named || modifierState?.args?.named?.map;
+                } catch (e) {
+                  //
+                }
+              }
+              for (const [key, value] of Object.entries(named || {})) {
+                args.named[key] = createRef(value);
+              }
+              debugRenderTree?.create(state, {
+                type: 'modifier',
+                name,
+                args: createArgs(args),
+                instance: instance
+              });
+              debugRenderTree?.didRender(state, {
+                parentElement: () => element.parentElement,
+                firstNode: () => element,
+                lastNode: () => element
+              });
+              self.registerDestructor(modifier.state, () => {
+                debugRenderTree?.willDestroy(state);
+              });
+            }
+          }
+          return pushModifiers.call(this, modifiers);
+        };
+      }
       const pushRemoteElement = NewElementBuilder.prototype.pushRemoteElement;
       NewElementBuilder.prototype.pushRemoteElement = function (element, guid, insertBefore) {
-        remoteStack.push({
-          element
-        });
         const ref = createRef(element);
         const capturedArgs = {
           positional: [ref],
@@ -5969,16 +5670,24 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
         if (insertBefore) {
           capturedArgs.named.insertBefore = insertBefore;
         }
-        const inElementArgs = self.reference.createUnboundRef ? capturedArgs : {
-          value() {
-            return capturedArgs;
-          }
-        };
         const debugRenderTree = self.debugRenderTree;
-        debugRenderTree?.create(remoteStack.at(-1), {
+        const r = pushRemoteElement.call(this, element, guid, insertBefore);
+        const block = this.blockStack.current;
+        if (this.DESTROY) {
+          const destructor = block[this.DESTROY];
+          block[this.DESTROY] = function () {
+            self.debugRenderTree?.willDestroy(block);
+            destructor.call(this);
+          };
+        } else {
+          self.registerDestructor?.(block, () => {
+            self.debugRenderTree?.willDestroy(block);
+          });
+        }
+        debugRenderTree?.create(block, {
           type: 'keyword',
           name: 'in-element',
-          args: inElementArgs,
+          args: createArgs(capturedArgs),
           instance: {
             args: {
               named: {
@@ -5991,20 +5700,19 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
             }
           }
         });
-        return pushRemoteElement.call(this, element, guid, insertBefore);
+        return r;
       };
       const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
       NewElementBuilder.prototype.popRemoteElement = function (...args) {
-        const element = this.element;
+        const block = this.blockStack.current;
         popRemoteElement.call(this, ...args);
         const parentElement = this.element;
         const debugRenderTree = self.debugRenderTree;
-        debugRenderTree?.didRender(remoteStack.at(-1), {
+        debugRenderTree?.didRender(block, {
           parentElement: () => parentElement,
-          firstNode: () => element,
-          lastNode: () => element
+          firstNode: () => block.firstNode(),
+          lastNode: () => block.lastNode()
         });
-        remoteStack.pop();
       };
       this.debugRenderTreeFunctions = {
         appendChild,
@@ -6014,7 +5722,8 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
         pushElement,
         pushRemoteElement,
         popRemoteElement,
-        didAppendNode
+        didAppendNode,
+        pushModifiers
       };
     }
     teardown() {
@@ -6023,6 +5732,7 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       }
       Object.assign(this.debugRenderTree, this.debugRenderTreeFunctions);
       Object.assign(this.NewElementBuilder.prototype, this.NewElementBuilderFunctions);
+      this.NewElementBuilderFunctions = null;
     }
     require(req) {
       return requireModule.has(req) ? requireModule(req) : _loader.EmberLoader.require(req);
@@ -6051,7 +5761,8 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       try {
         this.inElementSupport = new InElementSupportProvider(owner);
       } catch (e) {
-        console.error('failed to setup in element support', e);
+        console.error('failed to setup in element support');
+        console.error(e);
         // not supported
       }
 
@@ -6257,17 +5968,45 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       this.previouslyRetainedObjects = this.retainedObjects || new Map();
       this.retainedObjects = new Map();
     }
-    _createTemplateOnlyComponent(args) {
+    _createSimpleInstance(name, args) {
       const obj = Object.create(null);
       obj.args = args;
       obj.constructor = {
-        name: 'TemplateOnlyComponent',
+        name: name,
         comment: 'fake constructor'
       };
       return obj;
     }
+    _insertHtmlElementNode(node, parentNode) {
+      const element = node.bounds.firstNode;
+      const htmlNode = {
+        id: node.id + 'html-element',
+        type: 'html-element',
+        name: element.tagName.toLowerCase(),
+        instance: element,
+        template: null,
+        bounds: {
+          firstNode: element,
+          lastNode: element,
+          parentElement: element.parentElement
+        },
+        args: {
+          named: {},
+          positional: []
+        },
+        children: []
+      };
+      const idx = parentNode.children.indexOf(node);
+      parentNode.children.splice(idx, 0, htmlNode);
+      return this._serializeRenderNode(htmlNode, parentNode);
+    }
     _serializeRenderNodes(nodes, parentNode = null) {
-      return nodes.map(node => this._serializeRenderNode(node, parentNode));
+      const mapped = [];
+      // nodes can be mutated during serialize, which is why we use indexing instead of .map
+      for (let i = 0; i < nodes.length; i++) {
+        mapped.push(this._serializeRenderNode(nodes[i], parentNode));
+      }
+      return mapped;
     }
     _serializeRenderNode(node, parentNode = null) {
       if (!node.id.startsWith(this.renderNodeIdPrefix)) {
@@ -6300,10 +6039,38 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
         if (parentNode) {
           this.parentNodes[node.id] = parentNode;
         }
+        if (node.type === 'html-element') {
+          // show set attributes in inspector
+          Array.from(node.instance.attributes).forEach(attr => {
+            node.args.named[attr.nodeName] = attr.nodeValue;
+          });
+          // move modifiers and components into the element children
+          parentNode.children.forEach(child => {
+            if (child.bounds.parentElement === node.instance || child.type === 'modifier' && child.bounds.firstNode === node.instance) {
+              node.children.push(child);
+            }
+          });
+          node.children.forEach(child => {
+            const idx = parentNode.children.indexOf(child);
+            if (idx >= 0) {
+              parentNode.children.splice(idx, 1);
+            }
+          });
+        }
+        if (node.type === 'component' && !node.instance) {
+          node.instance = this._createSimpleInstance('TemplateOnlyComponent', node.args.named);
+        }
+        if (node.type === 'modifier') {
+          node.instance = node.instance || this._createSimpleInstance(node.name, node.args);
+          node.instance.toString = () => node.name;
+          if (parentNode.instance !== node.bounds.firstNode) {
+            return this._insertHtmlElementNode(node, parentNode);
+          }
+        }
         this.serialized[node.id] = serialized = {
           ...node,
           args: this._serializeArgs(node.args),
-          instance: this._serializeItem(node.instance || (node.type === 'component' ? this._createTemplateOnlyComponent(node.args.named) : undefined)),
+          instance: this._serializeItem(node.instance),
           bounds: this._serializeBounds(node.bounds),
           children: this._serializeRenderNodes(node.children, node)
         };
@@ -6360,7 +6127,9 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       }
       this.retainedObjects.set(object, id);
       return {
-        id
+        id,
+        type: typeof object,
+        inspect: (0, _typeCheck.inspect)(object)
       };
     }
     _releaseStaleObjects() {
@@ -6403,7 +6172,12 @@ define("ember-debug/libs/render-tree", ["exports", "ember-debug/libs/capture-ren
       while (candidates.length > 0) {
         let candidate = candidates.shift();
         let range = this.getRange(candidate.id);
-        if (range && range.isPointInRange(dom, 0)) {
+        const isAllowed = candidate.type !== 'modifier' && candidate.type !== 'html-element';
+        if (!isAllowed) {
+          candidates.push(...candidate.children);
+          continue;
+        }
+        if (isAllowed && range && range.isPointInRange(dom, 0)) {
           // We may be able to find a more exact match in one of the children.
           return this._matchRenderNodes(candidate.children, dom, false) || candidate;
         } else if (!range || deep) {
@@ -6711,6 +6485,22 @@ define("ember-debug/libs/view-inspection", ["exports", "ember-debug/utils/classi
       color: rgb(168, 148, 166);
     }
 
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
     #${prefix}-tooltip-${id} .${prefix}-tooltip-token-name {
       /* https://github.com/ChromeDevTools/devtools-frontend/blob/103326238685ac582d3bf2a02f1627a80e3fce5f/front_end/ui/inspectorSyntaxHighlight.css#L60 */
       color: rgb(136, 18, 128);
@@ -7075,6 +6865,12 @@ define("ember-debug/libs/view-inspection", ["exports", "ember-debug/utils/classi
         } else {
           this._renderTooltipDetail(tbody, 'Instance', this._tokenizeItem(node.instance));
         }
+        const detail = tbody.querySelector('.ember-inspector-tooltip-detail-instance > .ember-inspector-tooltip-token-tag') || tbody.querySelector('.ember-inspector-tooltip-detail-controller > .ember-inspector-tooltip-token-tag');
+        if (detail) {
+          detail.onclick = () => {
+            this.objectInspector.sendToConsole(node.instance.id);
+          };
+        }
       }
     }
     _renderTooltipDetail(tbody, key, value) {
@@ -7770,7 +7566,7 @@ define("ember-debug/models/promise", ["exports", "ember-debug/utils/type-check",
   })), _class2));
   _exports.default = _class;
 });
-define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "ember-debug/utils/bound-method", "ember-debug/utils/type-check", "ember-debug/utils/version", "ember-debug/utils/ember/debug", "ember-debug/utils/ember", "ember-debug/utils/ember/object/internals", "ember-debug/utils/ember/runloop", "ember-debug/utils/ember-object-names", "ember-debug/utils/get-object-name", "ember-debug/utils/ember/loader"], function (_exports, _debugPort, _boundMethod, _typeCheck, _version, _debug, _ember, _internals, _runloop, _emberObjectNames, _getObjectName, _loader) {
+define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "ember-debug/utils/bound-method", "ember-debug/utils/type-check", "ember-debug/utils/version", "ember-debug/utils/ember", "ember-debug/utils/ember/object/internals", "ember-debug/utils/ember/runloop", "ember-debug/utils/ember-object-names", "ember-debug/utils/get-object-name", "ember-debug/utils/ember/loader"], function (_exports, _debugPort, _boundMethod, _typeCheck, _version, _ember, _internals, _runloop, _emberObjectNames, _getObjectName, _loader) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -7780,12 +7576,6 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
   function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
   function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable ember/no-private-routing-service */
-  const {
-    meta: emberMeta,
-    VERSION,
-    CoreObject,
-    ObjectProxy
-  } = _ember.default;
   const GlimmerComponent = (() => {
     try {
       return _loader.EmberLoader.require('@glimmer/component').default;
@@ -7844,7 +7634,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     // ignore
   }
   const HAS_GLIMMER_TRACKING = tagValue && tagValidate && track && tagForProperty;
-  const keys = Object.keys || _ember.default.keys;
+  const keys = Object.keys;
 
   /**
    * Determine the type and get the value of the passed property
@@ -7865,9 +7655,15 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
 
     // TODO: this is not very clean. We should refactor calculateCP, etc, rather than passing computedValue
     if (computedValue !== undefined) {
+      if (value instanceof HTMLElement) {
+        return {
+          type: 'type-object',
+          inspect: `<${value.tagName.toLowerCase()}>`
+        };
+      }
       return {
         type: `type-${(0, _typeCheck.typeOf)(value)}`,
-        inspect: inspect(value)
+        inspect: (0, _typeCheck.inspect)(value)
       };
     }
     if (value instanceof _ember.EmberObject) {
@@ -7881,88 +7677,24 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
         type: 'type-descriptor',
         inspect: string
       };
-    } else if ((0, _typeCheck.isDescriptor)(value)) {
+    } else if (value?.isDescriptor) {
       return {
         type: 'type-descriptor',
         inspect: value.toString()
       };
+    } else if (value instanceof HTMLElement) {
+      return {
+        type: 'type-object',
+        inspect: value.tagName.toLowerCase()
+      };
     } else {
       return {
         type: `type-${(0, _typeCheck.typeOf)(value)}`,
-        inspect: inspect(value)
+        inspect: (0, _typeCheck.inspect)(value)
       };
     }
   }
-  function inspect(value) {
-    if (typeof value === 'function') {
-      return 'function() { ... }';
-    } else if (value instanceof _ember.EmberObject) {
-      return value.toString();
-    } else if ((0, _typeCheck.typeOf)(value) === 'array') {
-      if (value.length === 0) {
-        return '[]';
-      } else if (value.length === 1) {
-        return `[ ${inspect(value[0])} ]`;
-      } else {
-        return `[ ${inspect(value[0])}, ... ]`;
-      }
-    } else if (value instanceof Error) {
-      return `Error: ${value.message}`;
-    } else if (value === null) {
-      return 'null';
-    } else if ((0, _typeCheck.typeOf)(value) === 'date') {
-      return value.toString();
-    } else if (typeof value === 'object') {
-      // `Ember.inspect` is able to handle this use case,
-      // but it is very slow as it loops over all props,
-      // so summarize to just first 2 props
-      // if it defines a toString, we use that instead
-      if (typeof value.toString === 'function' && value.toString !== Object.prototype.toString && value.toString !== Function.prototype.toString) {
-        try {
-          return `<Object:${value.toString()}>`;
-        } catch (e) {
-          //
-        }
-      }
-      let ret = [];
-      let v;
-      let count = 0;
-      let broken = false;
-      for (let key in value) {
-        if (!('hasOwnProperty' in value) || value.hasOwnProperty(key)) {
-          if (count++ > 1) {
-            broken = true;
-            break;
-          }
-          v = value[key];
-          if (v === 'toString') {
-            continue;
-          } // ignore useless items
-          if ((0, _typeCheck.typeOf)(v).includes('function')) {
-            v = 'function() { ... }';
-          }
-          if ((0, _typeCheck.typeOf)(v) === 'array') {
-            v = `[Array : ${v.length}]`;
-          }
-          if ((0, _typeCheck.typeOf)(v) === 'object') {
-            v = '[Object]';
-          }
-          ret.push(`${key}: ${v}`);
-        }
-      }
-      let suffix = ' }';
-      if (broken) {
-        suffix = ' ...}';
-      }
-      return `{ ${ret.join(', ')}${suffix}`;
-    } else {
-      return (0, _debug.inspect)(value);
-    }
-  }
   function isMandatorySetter(descriptor) {
-    if (descriptor.set && descriptor.set === _ember.default.MANDATORY_SETTER_FUNCTION) {
-      return true;
-    }
     if (descriptor.set && Function.prototype.toString.call(descriptor.set).includes('You attempted to update')) {
       return true;
     }
@@ -7992,7 +7724,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     const tag = tagInfo.tag;
     const proto = Object.getPrototypeOf(object);
     if (!proto) return [];
-    const cpDesc = emberMeta(object).peekDescriptors(property);
+    const cpDesc = (0, _ember.meta)(object).peekDescriptors(property);
     const dependentKeys = [];
     if (cpDesc) {
       dependentKeys.push(...(cpDesc._dependentKeys || []));
@@ -8041,7 +7773,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       _defineProperty(this, "objectPropertyValues", {});
       _defineProperty(this, "trackedTags", {});
       _defineProperty(this, "_errorsFor", {});
-      _defineProperty(this, "inspect", inspect);
+      _defineProperty(this, "inspect", _typeCheck.inspect);
       _defineProperty(this, "inspectValue", inspectValue);
     }
     get adapter() {
@@ -8052,7 +7784,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     }
     updateCurrentObject() {
       Object.values(this.sentObjects).forEach(obj => {
-        if (obj instanceof CoreObject && obj.isDestroyed) {
+        if (obj instanceof _ember.CoreObject && obj.isDestroyed) {
           this.dropObject((0, _internals.guidFor)(obj));
         }
       });
@@ -8145,6 +7877,26 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
         }
       });
     }
+    gotoSource(objectId, prop) {
+      let object = this.sentObjects[objectId];
+      let value;
+      if (prop === null || prop === undefined) {
+        value = this.sentObjects[objectId];
+      } else {
+        value = calculateCP(object, {
+          name: prop
+        }, {});
+      }
+      // for functions and classes we want to show the source
+      if (typeof value === 'function') {
+        this.adapter.inspectValue(value);
+      }
+      // use typeOf to distinguish basic objects/classes and Date, Error etc.
+      // objects like {...} have the constructor set to Object
+      if ((0, _typeCheck.typeOf)(value) === 'object' && value.constructor !== Object) {
+        this.adapter.inspectValue(value.constructor);
+      }
+    }
     sendToConsole(objectId, prop) {
       let object = this.sentObjects[objectId];
       let value;
@@ -8164,7 +7916,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       }
       let args = [value];
       if (value instanceof _ember.EmberObject) {
-        args.unshift(inspect(value));
+        args.unshift((0, _typeCheck.inspect)(value));
       }
       this.adapter.log('Ember Inspector ($E): ', ...args);
     }
@@ -8200,7 +7952,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       });
     }
     retainObject(object) {
-      let meta = emberMeta(object);
+      let meta = (0, _ember.meta)(object);
       let guid = (0, _internals.guidFor)(object);
       meta._debugReferences = meta._debugReferences || 0;
       meta._debugReferences++;
@@ -8212,7 +7964,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       if (!object) {
         return;
       }
-      let meta = emberMeta(object);
+      let meta = (0, _ember.meta)(object);
       let guid = (0, _internals.guidFor)(object);
       meta._debugReferences--;
       if (meta._debugReferences === 0) {
@@ -8287,7 +8039,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
 
       // insert ember mixins
       for (let mixin of own) {
-        let name = (mixin[_ember.default.NAME_KEY] || mixin.ownerConstructor || _emberObjectNames.default.get(mixin) || '').toString();
+        let name = (mixin.ownerConstructor || _emberObjectNames.default.get(mixin) || '').toString();
         if (!name && typeof mixin.toString === 'function') {
           try {
             name = mixin.toString();
@@ -8313,10 +8065,10 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       return mixins;
     }
     mixinsForObject(object) {
-      if (object instanceof ObjectProxy && object.content && !object._showProxyDetails) {
+      if (object instanceof _ember.ObjectProxy && object.content && !object._showProxyDetails) {
         object = object.content;
       }
-      if (object instanceof _ember.default.ArrayProxy && object.content && !object._showProxyDetails) {
+      if (object instanceof _ember.ArrayProxy && object.content && !object._showProxyDetails) {
         object = object.slice(0, 101);
       }
       let mixinDetails = this.mixinDetailsForObject(object);
@@ -8407,6 +8159,9 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
       sendToConsole(message) {
         this.sendToConsole(message.objectId, message.property);
       },
+      gotoSource(message) {
+        this.gotoSource(message.objectId, message.property);
+      },
       sendControllerToConsole(message) {
         const container = this.namespace?.owner;
         this.sendValueToConsole(container.lookup(`controller:${message.name}`));
@@ -8431,7 +8186,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
         // 3.9.0 removed intimate APIs from router
         // https://github.com/emberjs/ember.js/pull/17843
         // https://deprecations.emberjs.com/v3.x/#toc_remove-handler-infos
-        if ((0, _version.compareVersion)(VERSION, '3.9.0') !== -1) {
+        if ((0, _version.compareVersion)(_ember.VERSION, '3.9.0') !== -1) {
           // Ember >= 3.9.0
           this.sendObject(routerLib.getRoute(message.name));
         } else {
@@ -8469,7 +8224,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
   })();
   function ownMixins(object) {
     // TODO: We need to expose an API for getting _just_ the own mixins directly
-    let meta = emberMeta(object);
+    let meta = (0, _ember.meta)(object);
     let parentMeta = meta.parent;
     let mixins = new Set();
 
@@ -8487,7 +8242,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     return mixins;
   }
   function ownProperties(object, ownMixins) {
-    let meta = emberMeta(object);
+    let meta = (0, _ember.meta)(object);
     if (Array.isArray(object)) {
       // slice to max 101, for performance and so that the object inspector will show a `more items` indicator above 100
       object = object.slice(0, 101);
@@ -8576,7 +8331,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
           }
         }
         if (!options.isService) {
-          options.isService = desc.value instanceof _ember.default.Service;
+          options.isService = desc.value instanceof _ember.Service;
         }
       }
       if (options.isService) {
@@ -8846,7 +8601,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     let debugInfo = null;
     let objectDebugInfo = object._debugInfo;
     if (objectDebugInfo && typeof objectDebugInfo === 'function') {
-      if (object instanceof _ember.default.ObjectProxy && object.content) {
+      if (object instanceof _ember.ObjectProxy && object.content) {
         object = object.content;
       }
       debugInfo = objectDebugInfo.call(object);
@@ -8857,7 +8612,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     skipProperties.push('isDestroyed', 'isDestroying', 'container');
     // 'currentState' and 'state' are un-observable private properties.
     // The rest are skipped to reduce noise in the inspector.
-    if (_ember.default.Component && object instanceof _ember.default.Component) {
+    if (_ember.Component && object instanceof _ember.Component) {
       skipProperties.push('currentState', 'state', 'buffer', 'outletSource', 'lengthBeforeRender', 'lengthAfterRender', 'template', 'layout', 'templateData', 'domManager', 'states', 'element', 'targetObject');
     } else if (GlimmerComponent && object instanceof GlimmerComponent) {
       // These properties don't really exist on Glimmer Components, but
@@ -8876,7 +8631,7 @@ define("ember-debug/object-inspector", ["exports", "ember-debug/debug-port", "em
     const property = item.name;
     delete errorsForObject[property];
     try {
-      if (object instanceof _ember.default.ArrayProxy && property == parseInt(property)) {
+      if (object instanceof _ember.ArrayProxy && property == parseInt(property)) {
         return object.objectAt(property);
       }
       return item.isGetter || property.includes?.('.') ? object[property] : object.get?.(property) || object[property]; // need to use `get` to be able to detect tracked props
@@ -9281,7 +9036,7 @@ define("ember-debug/render-debug", ["exports", "ember-debug/debug-port", "ember-
     });
   }
 });
-define("ember-debug/route-debug", ["exports", "ember-debug/debug-port", "ember-debug/utils/version", "ember-debug/utils/classify", "ember-debug/utils/dasherize", "ember-debug/utils/ember", "ember-debug/utils/ember/runloop", "ember-debug/utils/bound-method"], function (_exports, _debugPort, _version, _classify, _dasherize, _ember, _runloop, _boundMethod) {
+define("ember-debug/route-debug", ["exports", "ember-debug/debug-port", "ember-debug/utils/version", "ember-debug/utils/ember", "ember-debug/utils/classify", "ember-debug/utils/dasherize", "ember-debug/utils/ember/runloop", "ember-debug/utils/bound-method"], function (_exports, _debugPort, _version, _ember, _classify, _dasherize, _runloop, _boundMethod) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -9481,7 +9236,7 @@ define("ember-debug/route-debug", ["exports", "ember-debug/debug-port", "ember-d
         // 3.9.0 removed intimate APIs from router
         // https://github.com/emberjs/ember.js/pull/17843
         // https://deprecations.emberjs.com/v3.x/#toc_remove-handler-infos
-        if ((0, _version.compareVersion)(_ember.default.VERSION, '3.9.0') !== -1) {
+        if ((0, _version.compareVersion)(_ember.VERSION, '3.9.0') !== -1) {
           // Ember >= 3.9.0
           routeHandler = routerLib.getRoute(handler);
         } else {
@@ -9799,7 +9554,7 @@ define("ember-debug/utils/ember", ["exports", "ember-debug/utils/ember/loader"],
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
-  _exports.set = _exports.meta = _exports.get = _exports.default = _exports.computed = _exports.VERSION = _exports.PromiseProxyMixin = _exports.Observable = _exports.NativeArray = _exports.Namespace = _exports.MutableEnumerable = _exports.MutableArray = _exports.Evented = _exports.EmberObject = _exports.CoreObject = _exports.ControllerMixin = _exports.ComputedProperty = _exports.Component = _exports.Application = _exports.ActionHandler = void 0;
+  _exports.set = _exports.meta = _exports.getEnv = _exports.get = _exports.default = _exports.computed = _exports.captureRenderTree = _exports.VERSION = _exports.Service = _exports.PromiseProxyMixin = _exports.Observable = _exports.ObjectProxy = _exports.NativeArray = _exports.Namespace = _exports.MutableEnumerable = _exports.MutableArray = _exports.Evented = _exports.EmberObject = _exports.CoreObject = _exports.ControllerMixin = _exports.ComputedProperty = _exports.Component = _exports.ArrayProxy = _exports.Application = _exports.ActionHandler = void 0;
   let Ember;
   try {
     Ember = requireModule('ember').default;
@@ -9807,6 +9562,7 @@ define("ember-debug/utils/ember", ["exports", "ember-debug/utils/ember/loader"],
     Ember = window.Ember;
   }
   let {
+    ArrayProxy,
     Namespace,
     ActionHandler,
     ControllerMixin,
@@ -9819,21 +9575,27 @@ define("ember-debug/utils/ember", ["exports", "ember-debug/utils/ember/loader"],
     Observable,
     Evented,
     PromiseProxyMixin,
+    Service,
     Object: EmberObject,
+    ObjectProxy,
     VERSION,
     ComputedProperty,
     meta,
     get,
     set,
-    computed
+    computed,
+    _captureRenderTree: captureRenderTree
   } = Ember || {};
+  _exports.captureRenderTree = captureRenderTree;
   _exports.computed = computed;
   _exports.set = set;
   _exports.get = get;
   _exports.meta = meta;
   _exports.ComputedProperty = ComputedProperty;
   _exports.VERSION = VERSION;
+  _exports.ObjectProxy = ObjectProxy;
   _exports.EmberObject = EmberObject;
+  _exports.Service = Service;
   _exports.PromiseProxyMixin = PromiseProxyMixin;
   _exports.Evented = Evented;
   _exports.Observable = Observable;
@@ -9846,7 +9608,14 @@ define("ember-debug/utils/ember", ["exports", "ember-debug/utils/ember/loader"],
   _exports.ControllerMixin = ControllerMixin;
   _exports.ActionHandler = ActionHandler;
   _exports.Namespace = Namespace;
+  _exports.ArrayProxy = ArrayProxy;
+  let getEnv = () => Ember.ENV;
+  _exports.getEnv = getEnv;
   if (!Ember) {
+    _exports.captureRenderTree = captureRenderTree = (0, _loader.emberSafeRequire)('@ember/debug')?.captureRenderTree;
+    _exports.getEnv = getEnv = (0, _loader.emberSafeRequire)('@ember/-internals/environment')?.getENV;
+    _exports.ArrayProxy = ArrayProxy = (0, _loader.emberSafeRequire)('@ember/array/proxy')?.default;
+    _exports.ObjectProxy = ObjectProxy = (0, _loader.emberSafeRequire)('@ember/object/proxy')?.default;
     _exports.MutableArray = MutableArray = (0, _loader.emberSafeRequire)('@ember/array/mutable')?.default;
     _exports.Namespace = Namespace = (0, _loader.emberSafeRequire)('@ember/application/namespace')?.default;
     _exports.MutableEnumerable = MutableEnumerable = (0, _loader.emberSafeRequire)('@ember/enumerable/mutable')?.default;
@@ -9858,6 +9627,7 @@ define("ember-debug/utils/ember", ["exports", "ember-debug/utils/ember/loader"],
     _exports.Observable = Observable = (0, _loader.emberSafeRequire)('@ember/object/observable')?.default;
     _exports.Evented = Evented = (0, _loader.emberSafeRequire)('@ember/object/evented')?.default;
     _exports.PromiseProxyMixin = PromiseProxyMixin = (0, _loader.emberSafeRequire)('@ember/object/promise-proxy-mixin')?.default;
+    _exports.Service = Service = (0, _loader.emberSafeRequire)('@ember/service')?.default;
     _exports.EmberObject = EmberObject = (0, _loader.emberSafeRequire)('@ember/object')?.default;
     _exports.VERSION = VERSION = (0, _loader.emberSafeRequire)('ember/version')?.default;
     _exports.ComputedProperty = ComputedProperty = (0, _loader.emberSafeRequire)('@ember/-internals/metal')?.ComputedProperty;
@@ -10182,6 +9952,9 @@ define("ember-debug/utils/get-object-name", ["exports", "ember-debug/utils/ember
   function getObjectName(object) {
     let name = '';
     let className = object.constructor && (_emberObjectNames.default.get(object.constructor) || object.constructor.name) || '';
+    if (object instanceof Function) {
+      return 'Function ' + object.name;
+    }
 
     // check if object is a primitive value
     if (object !== Object(object)) {
@@ -10246,7 +10019,7 @@ define("ember-debug/utils/name-functions", ["exports"], function (_exports) {
       name = model.toString();
     }
     if (name.length > 50) {
-      name = `${name.substr(0, 50)}...`;
+      name = `${name.slice(0, 50)}...`;
     }
     return name;
   }
@@ -10394,8 +10167,8 @@ define("ember-debug/utils/type-check", ["exports", "ember-debug/utils/ember/debu
     value: true
   });
   _exports.getDescriptorFor = getDescriptorFor;
+  _exports.inspect = inspect;
   _exports.isComputed = isComputed;
-  _exports.isDescriptor = isDescriptor;
   _exports.typeOf = typeOf;
   /**
    * Check if given key on the passed object is a computed property
@@ -10414,13 +10187,6 @@ define("ember-debug/utils/type-check", ["exports", "ember-debug/utils/ember/debu
     if (getDescriptorFor(object, key) instanceof _ember.ComputedProperty) {
       return true;
     }
-
-    // Ember < 3.10
-    return object[key] instanceof _ember.ComputedProperty;
-  }
-  function isDescriptor(value) {
-    // Ember >= 1.11
-    return value && typeof value === 'object' && value.isDescriptor;
   }
 
   /**
@@ -10430,11 +10196,11 @@ define("ember-debug/utils/type-check", ["exports", "ember-debug/utils/ember/debu
    * @param {String} key The key for the property on the object
    */
   function getDescriptorFor(object, key) {
-    if (isDescriptor(object[key])) {
+    if (object[key]?.isDescriptor) {
       return object[key];
     }
 
-    // exists longeer than ember 3.10
+    // exists longer than ember 3.10
     if (_debug.default.isComputed) {
       const {
         descriptorForDecorator,
@@ -10447,6 +10213,74 @@ define("ember-debug/utils/type-check", ["exports", "ember-debug/utils/ember/debu
   function typeOf(obj) {
     return Object.prototype.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
   }
+  function inspect(value) {
+    if (typeof value === 'function') {
+      return `${value.name || 'function'}() { ... }`;
+    } else if (value instanceof _ember.EmberObject) {
+      return value.toString();
+    } else if (value instanceof HTMLElement) {
+      return `<${value.tagName.toLowerCase()}>`;
+    } else if (typeOf(value) === 'array') {
+      if (value.length === 0) {
+        return '[]';
+      } else if (value.length === 1) {
+        return `[ ${inspect(value[0])} ]`;
+      } else {
+        return `[ ${inspect(value[0])}, ... ]`;
+      }
+    } else if (value instanceof Error) {
+      return `Error: ${value.message}`;
+    } else if (value === null) {
+      return 'null';
+    } else if (typeOf(value) === 'date') {
+      return value.toString();
+    } else if (typeof value === 'object') {
+      // `Ember.inspect` is able to handle this use case,
+      // but it is very slow as it loops over all props,
+      // so summarize to just first 2 props
+      // if it defines a toString, we use that instead
+      if (typeof value.toString === 'function' && value.toString !== Object.prototype.toString && value.toString !== Function.prototype.toString) {
+        try {
+          return `<Object:${value.toString()}>`;
+        } catch (e) {
+          //
+        }
+      }
+      let ret = [];
+      let v;
+      let count = 0;
+      let broken = false;
+      for (let key in value) {
+        if (!('hasOwnProperty' in value) || value.hasOwnProperty(key)) {
+          if (count++ > 1) {
+            broken = true;
+            break;
+          }
+          v = value[key];
+          if (v === 'toString') {
+            continue;
+          } // ignore useless items
+          if (typeOf(v).includes('function')) {
+            v = `function ${v.name}() { ... }`;
+          }
+          if (typeOf(v) === 'array') {
+            v = `[Array : ${v.length}]`;
+          }
+          if (typeOf(v) === 'object') {
+            v = '[Object]';
+          }
+          ret.push(`${key}: ${v}`);
+        }
+      }
+      let suffix = ' }';
+      if (broken) {
+        suffix = ' ...}';
+      }
+      return `{ ${ret.join(', ')}${suffix}`;
+    } else {
+      return (0, _debug.inspect)(value);
+    }
+  }
 });
 define("ember-debug/utils/version", ["exports"], function (_exports) {
   "use strict";
@@ -10455,6 +10289,7 @@ define("ember-debug/utils/version", ["exports"], function (_exports) {
     value: true
   });
   _exports.compareVersion = compareVersion;
+  _exports.isInVersionSpecifier = isInVersionSpecifier;
   /**
    * Compares two Ember versions.
    *
@@ -10480,6 +10315,41 @@ define("ember-debug/utils/version", ["exports"], function (_exports) {
     return 0;
   }
 
+  /**
+   *
+   * @param specifier e.g. ^5.12.0
+   * @param version 5.13
+   * @return {boolean}
+   */
+  function isInVersionSpecifier(specifier, version) {
+    let compared, i, version2;
+    let operator = specifier[0];
+    if (Number.isNaN(+operator)) {
+      specifier = specifier.slice(1);
+    }
+    specifier = cleanupVersion(specifier).split('.');
+    version2 = cleanupVersion(version).split('.');
+    if (operator === '~' && specifier[1] !== version2[1]) {
+      return false;
+    }
+    if (operator === '^' && specifier[0] !== version2[0]) {
+      return false;
+    }
+    if (operator === '>' && specifier[0] > version2[0]) {
+      return false;
+    }
+    for (i = 0; i < 3; i++) {
+      compared = compare(+specifier[i], +version2[i]);
+      if (compared < 0) {
+        return true;
+      }
+      if (compared > 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   /**
    * Remove -alpha, -beta, etc from versions
    *
@@ -10587,7 +10457,7 @@ define("ember-debug/view-debug", ["exports", "ember-debug/debug-port", "ember-de
      * @param  {Node} node The DOM node to inspect
      */
     inspectNode(node) {
-      this.adapter.inspectNode(node);
+      this.adapter.inspectValue(node);
     }
     sendTree(immediate = false) {
       if (immediate) {