diff --git a/.eslintrc.js b/.eslintrc.js
index 8373e0d402e..c59d5867014 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -64,6 +64,7 @@ module.exports = {
       rules: {
         // the TypeScript compiler already takes care of this and
         // leaving it enabled results in false positives for interface imports
+        'no-dupe-class-members': 'off',
         'no-unused-vars': 'off',
         'no-undef': 'off',
 
diff --git a/.travis.yml b/.travis.yml
index affaacafb3a..240a3d11ac3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -82,6 +82,12 @@ jobs:
         - yarn ember build -prod
         - yarn test
 
+    - name: Production (All Tests + Canary Features + Debug Render Tree)
+      env: DEBUG_RENDER_TREE=true
+      script:
+        - yarn ember build -prod
+        - yarn test
+
     - name: Old Jquery and Extend Prototypes
       env: TEST_SUITE=old-jquery-and-extend-prototypes
       script:
diff --git a/bin/run-tests.js b/bin/run-tests.js
index c8ba2eed654..39bed475f07 100755
--- a/bin/run-tests.js
+++ b/bin/run-tests.js
@@ -35,6 +35,10 @@ function getBrowserRunner() {
 }
 
 function run(queryString) {
+  if (process.env.DEBUG_RENDER_TREE) {
+    queryString = `${queryString}&debugrendertree`;
+  }
+
   let url = 'http://localhost:' + PORT + '/tests/?' + queryString;
   return runInBrowser(url, 3);
 }
diff --git a/packages/@ember/-internals/environment/lib/env.ts b/packages/@ember/-internals/environment/lib/env.ts
index 65463301d69..903e07ae309 100644
--- a/packages/@ember/-internals/environment/lib/env.ts
+++ b/packages/@ember/-internals/environment/lib/env.ts
@@ -1,4 +1,5 @@
 import { FUNCTION_PROTOTYPE_EXTENSIONS } from '@ember/deprecated-features';
+import { DEBUG } from '@glimmer/env';
 import global from './global';
 
 /**
@@ -98,6 +99,39 @@ export const ENV = {
   */
   _TEMPLATE_ONLY_GLIMMER_COMPONENTS: false,
 
+  /**
+    Whether to perform extra bookkeeping needed to make the `captureRenderTree`
+    API work.
+
+    This has to be set before the ember JavaScript code is evaluated. This is
+    usually done by setting `window.EmberENV = { _DEBUG_RENDER_TREE: true };`
+    or `window.ENV = { _DEBUG_RENDER_TREE: true };` before the "vendor"
+    `<script>` tag in `index.html`.
+
+    Setting the flag after Ember is already loaded will not work correctly. It
+    may appear to work somewhat, but fundamentally broken.
+
+    This is not intended to be set directly. Ember Inspector will enable the
+    flag on behalf of the user as needed.
+
+    This flag is always on in development mode.
+
+    The flag is off by default in production mode, due to the cost associated
+    with the the bookkeeping work.
+
+    The expected flow is that Ember Inspector will ask the user to refresh the
+    page after enabling the feature. It could also offer a feature where the
+    user add some domains to the "always on" list. In either case, Ember
+    Inspector will inject the code on the page to set the flag if needed.
+
+    @property _DEBUG_RENDER_TREE
+    @for EmberENV
+    @type Boolean
+    @default false
+    @private
+  */
+  _DEBUG_RENDER_TREE: DEBUG,
+
   /**
     Whether the app is using jQuery. See RFC #294.
 
@@ -203,6 +237,10 @@ export const ENV = {
       ENV.FEATURES[feature] = FEATURES[feature] === true;
     }
   }
+
+  if (DEBUG) {
+    ENV._DEBUG_RENDER_TREE = true;
+  }
 })(global.EmberENV || global.ENV);
 
 export function getENV() {
diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index b6f4d79a6dd..3af6cac534b 100644
--- a/packages/@ember/-internals/glimmer/index.ts
+++ b/packages/@ember/-internals/glimmer/index.ts
@@ -388,7 +388,7 @@ export { default as AbstractComponentManager } from './lib/component-managers/ab
 // it supports for example
 export { UpdatableReference, INVOKE } from './lib/utils/references';
 export { default as iterableFor } from './lib/utils/iterable';
-export { default as DebugStack } from './lib/utils/debug-stack';
+export { default as getDebugStack, DebugStack } from './lib/utils/debug-stack';
 export { default as OutletView } from './lib/views/outlet';
 export { capabilities } from './lib/component-managers/custom';
 export { setComponentManager, getComponentManager } from './lib/utils/custom-component-manager';
@@ -396,3 +396,4 @@ export { setModifierManager, getModifierManager } from './lib/utils/custom-modif
 export { capabilities as modifierCapabilities } from './lib/modifiers/custom';
 export { isSerializationFirstNode } from './lib/utils/serialization-first-node-helpers';
 export { setComponentTemplate, getComponentTemplate } from './lib/utils/component-template';
+export { CapturedRenderNode } from './lib/utils/debug-render-tree';
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts b/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
index e53881d85b9..cf5d7012ac0 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
@@ -1,4 +1,3 @@
-import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities, Simple } from '@glimmer/interfaces';
 import { Tag, VersionedPathReference } from '@glimmer/reference';
 import {
@@ -11,20 +10,14 @@ import {
   PreparedArguments,
 } from '@glimmer/runtime';
 import { Destroyable, Opaque, Option } from '@glimmer/util';
-import DebugStack from '../utils/debug-stack';
+import { DebugStack } from '../utils/debug-stack';
 
 // implements the ComponentManager interface as defined in glimmer:
 // tslint:disable-next-line:max-line-length
 // https://github.com/glimmerjs/glimmer-vm/blob/v0.24.0-beta.4/packages/%40glimmer/runtime/lib/component/interfaces.ts#L21
 
 export default abstract class AbstractManager<T, U> implements ComponentManager<T, U> {
-  public debugStack: typeof DebugStack;
-  public _pushToDebugStack!: (name: string, environment: any) => void;
-  public _pushEngineToDebugStack!: (name: string, environment: any) => void;
-
-  constructor() {
-    this.debugStack = undefined;
-  }
+  public debugStack: DebugStack | undefined = undefined;
 
   prepareArgs(_state: U, _args: Arguments): Option<PreparedArguments> {
     return null;
@@ -83,15 +76,3 @@ export default abstract class AbstractManager<T, U> implements ComponentManager<
 
   abstract getDestructor(bucket: T): Option<Destroyable>;
 }
-
-if (DEBUG) {
-  AbstractManager.prototype._pushToDebugStack = function(name: string, environment) {
-    this.debugStack = environment.debugStack;
-    this.debugStack.push(name);
-  };
-
-  AbstractManager.prototype._pushEngineToDebugStack = function(name: string, environment) {
-    this.debugStack = environment.debugStack;
-    this.debugStack.pushEngine(name);
-  };
-}
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
index 376f8e5ce51..881b3cc7309 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -1,4 +1,5 @@
 import { privatize as P } from '@ember/-internals/container';
+import { ENV } from '@ember/-internals/environment';
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
 import {
@@ -239,7 +240,7 @@ export default class CurlyComponentManager
     hasBlock: boolean
   ): ComponentStateBucket {
     if (DEBUG) {
-      this._pushToDebugStack(`component:${state.name}`, environment);
+      environment.debugStack.push(`component:${state.name}`);
     }
 
     // Get the nearest concrete component instance from the scope. "Virtual"
@@ -275,6 +276,12 @@ export default class CurlyComponentManager
       props.layout = state.template;
     }
 
+    // caller:
+    // <FaIcon @name="bug" />
+    //
+    // callee:
+    // <i class="fa-{{@name}}"></i>
+
     // Now that we've built up all of the properties to set on the component instance,
     // actually create it.
     let component = factory.create(props);
@@ -330,6 +337,15 @@ export default class CurlyComponentManager
       component.trigger('willRender');
     }
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: state.name,
+        args: args.capture(),
+        instance: component,
+      });
+    }
+
     return bucket;
   }
 
@@ -388,8 +404,12 @@ export default class CurlyComponentManager
     bucket.component[BOUNDS] = bounds;
     bucket.finalize();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
     }
   }
 
@@ -408,8 +428,12 @@ export default class CurlyComponentManager
   update(bucket: ComponentStateBucket): void {
     let { component, args, argsRevision, environment } = bucket;
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.update(bucket);
+    }
+
     if (DEBUG) {
-      this._pushToDebugStack(component._debugContainerKey, environment);
+      environment.debugStack.push(component._debugContainerKey);
     }
 
     bucket.finalizer = _instrumentStart('render.component', rerenderInstrumentDetails, component);
@@ -433,11 +457,15 @@ export default class CurlyComponentManager
     }
   }
 
-  didUpdateLayout(bucket: ComponentStateBucket): void {
+  didUpdateLayout(bucket: ComponentStateBucket, bounds: Bounds): void {
     bucket.finalize();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
     }
   }
 
@@ -448,8 +476,17 @@ export default class CurlyComponentManager
     }
   }
 
-  getDestructor(stateBucket: ComponentStateBucket): Option<Destroyable> {
-    return stateBucket;
+  getDestructor(bucket: ComponentStateBucket): Option<Destroyable> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          bucket.environment.debugRenderTree.willDestroy(bucket);
+          bucket.destroy();
+        },
+      };
+    } else {
+      return bucket;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
index a9d86e88338..8db08de87c2 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
@@ -15,6 +15,7 @@ import {
 import { createTag, isConst, PathReference, Tag } from '@glimmer/reference';
 import {
   Arguments,
+  Bounds,
   CapturedArguments,
   ComponentDefinition,
   Invocation,
@@ -22,6 +23,7 @@ import {
 } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
 
+import { ENV } from '@ember/-internals/environment';
 import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
@@ -184,7 +186,7 @@ export default class CustomComponentManager<ComponentInstance>
       RuntimeResolver
     > {
   create(
-    _env: Environment,
+    env: Environment,
     definition: CustomComponentDefinitionState<ComponentInstance>,
     args: Arguments
   ): CustomComponentState<ComponentInstance> {
@@ -267,10 +269,27 @@ export default class CustomComponentManager<ComponentInstance>
 
     const component = delegate.createComponent(definition.ComponentClass.class, value);
 
-    return new CustomComponentState(delegate, component, capturedArgs, namedArgsProxy);
+    let bucket = new CustomComponentState(delegate, component, capturedArgs, env, namedArgsProxy);
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      env.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: definition.name,
+        args: args.capture(),
+        instance: component,
+      });
+    }
+
+    return bucket;
   }
 
-  update({ delegate, component, args, namedArgsProxy }: CustomComponentState<ComponentInstance>) {
+  update(bucket: CustomComponentState<ComponentInstance>) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.update(bucket);
+    }
+
+    let { delegate, component, args, namedArgsProxy } = bucket;
+
     let value;
 
     if (EMBER_CUSTOM_COMPONENT_ARG_PROXY) {
@@ -308,18 +327,34 @@ export default class CustomComponentManager<ComponentInstance>
   }
 
   getDestructor(state: CustomComponentState<ComponentInstance>): Option<Destroyable> {
+    let destructor: Option<Destroyable> = null;
+
     if (hasDestructors(state.delegate)) {
-      return state;
-    } else {
-      return null;
+      destructor = state;
     }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      let inner = destructor;
+
+      destructor = {
+        destroy() {
+          state.env.debugRenderTree.willDestroy(state);
+
+          if (inner) {
+            inner.destroy();
+          }
+        },
+      };
+    }
+
+    return destructor;
   }
 
   getCapabilities({
     delegate,
   }: CustomComponentDefinitionState<ComponentInstance>): ComponentCapabilities {
     return Object.assign({}, CAPABILITIES, {
-      updateHook: delegate.capabilities.updateHook,
+      updateHook: ENV._DEBUG_RENDER_TREE || delegate.capabilities.updateHook,
     });
   }
 
@@ -332,7 +367,17 @@ export default class CustomComponentManager<ComponentInstance>
     }
   }
 
-  didRenderLayout() {}
+  didRenderLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
+
+  didUpdateLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
 
   getLayout(state: DefinitionState<ComponentInstance>): Invocation {
     return {
@@ -351,6 +396,7 @@ export class CustomComponentState<ComponentInstance> {
     public delegate: ManagerDelegate<ComponentInstance>,
     public component: ComponentInstance,
     public args: CapturedArguments,
+    public env: Environment,
     public namedArgsProxy?: {}
   ) {}
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/input.ts b/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
index 22f3cf46811..fa0de7ad7f7 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
@@ -1,10 +1,12 @@
+import { ENV } from '@ember/-internals/environment';
 import { set } from '@ember/-internals/metal';
 import { Owner } from '@ember/-internals/owner';
 import { assert, debugFreeze } from '@ember/debug';
 import { ComponentCapabilities, Dict } from '@glimmer/interfaces';
-import { CONSTANT_TAG, isConst, VersionedPathReference } from '@glimmer/reference';
-import { Arguments, DynamicScope, Environment, PreparedArguments } from '@glimmer/runtime';
+import { CONSTANT_TAG, createTag, isConst, VersionedPathReference } from '@glimmer/reference';
+import { Arguments, Bounds, DynamicScope, PreparedArguments } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
+import Environment from '../environment';
 import { RootReference } from '../utils/references';
 import InternalComponentManager, { InternalDefinitionState } from './internal';
 
@@ -22,6 +24,7 @@ const CAPABILITIES: ComponentCapabilities = {
 };
 
 export interface InputComponentState {
+  env: Environment;
   type: VersionedPathReference;
   instance: Destroyable;
 }
@@ -53,7 +56,7 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
   }
 
   create(
-    _env: Environment,
+    env: Environment,
     { ComponentClass }: InternalDefinitionState,
     args: Arguments,
     _dynamicScope: DynamicScope,
@@ -68,7 +71,18 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
       type: type.value(),
     });
 
-    return { type, instance };
+    let state = { env, type, instance };
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      env.debugRenderTree.create(state, {
+        type: 'component',
+        name: 'input',
+        args: args.capture(),
+        instance,
+      });
+    }
+
+    return state;
   }
 
   getSelf({ instance }: InputComponentState): VersionedPathReference {
@@ -76,15 +90,46 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
   }
 
   getTag() {
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
+  }
+
+  didRenderLayout(state: InputComponentState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.didRender(state, bounds);
+    }
+  }
+
+  update(state: InputComponentState): void {
+    set(state.instance, 'type', state.type.value());
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.update(state);
+    }
   }
 
-  update({ type, instance }: InputComponentState): void {
-    set(instance, 'type', type.value());
+  didUpdateLayout(state: InputComponentState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.didRender(state, bounds);
+    }
   }
 
-  getDestructor({ instance }: InputComponentState): Destroyable {
-    return instance;
+  getDestructor(state: InputComponentState): Destroyable {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          state.env.debugRenderTree.willDestroy(state);
+          state.instance.destroy();
+        },
+      };
+    } else {
+      return state.instance;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
index cd294e3148e..0f9c7ae1a0d 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
@@ -1,31 +1,38 @@
 import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities } from '@glimmer/interfaces';
-import { CONSTANT_TAG, Tag, VersionedPathReference } from '@glimmer/reference';
-import { Arguments, ComponentDefinition, Invocation, WithDynamicLayout } from '@glimmer/runtime';
+import {
+  CONSTANT_TAG,
+  createTag,
+  isConstTag,
+  Tag,
+  VersionedPathReference,
+} from '@glimmer/reference';
+import {
+  Arguments,
+  Bounds,
+  ComponentDefinition,
+  Invocation,
+  WithDynamicLayout,
+} from '@glimmer/runtime';
 import { Destroyable, Opaque, Option } from '@glimmer/util';
 
-import { Owner } from '@ember/-internals/owner';
 import { generateControllerFactory } from '@ember/-internals/routing';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
 import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
-import { assert } from '@ember/debug';
 
+import { ENV } from '@ember/-internals/environment';
+import EngineInstance from '@ember/engine/instance';
 import { TemplateFactory } from '../..';
 import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { RootReference } from '../utils/references';
 import AbstractManager from './abstract';
 
-// TODO: remove these stubbed interfaces when better typing is in place
-interface EngineInstance extends Owner {
-  boot(): void;
-  destroy(): void;
-}
-
 interface EngineState {
   engine: EngineInstance;
   controller: any;
   self: RootReference<any>;
+  environment: Environment;
   modelRef?: VersionedPathReference<Opaque>;
 }
 
@@ -70,7 +77,7 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
 
   create(environment: Environment, { name }: EngineDefinitionState, args: Arguments) {
     if (DEBUG) {
-      this._pushEngineToDebugStack(`engine:${name}`, environment);
+      environment.debugStack.pushEngine(`engine:${name}`);
     }
 
     // TODO
@@ -78,7 +85,7 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
     // we should resolve the engine app template in the helper
     // it also should use the owner that looked up the mount helper.
 
-    let engine = environment.owner.buildChildEngineInstance<EngineInstance>(name);
+    let engine = environment.owner.buildChildEngineInstance(name);
 
     engine.boot();
 
@@ -96,12 +103,28 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
     if (modelRef === undefined) {
       controller = controllerFactory.create();
       self = new RootReference(controller);
-      bucket = { engine, controller, self };
+      bucket = { engine, controller, self, environment };
     } else {
       let model = modelRef.value();
       controller = controllerFactory.create({ model });
       self = new RootReference(controller);
-      bucket = { engine, controller, self, modelRef };
+      bucket = { engine, controller, self, modelRef, environment };
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'engine',
+        name,
+        args: args.capture(),
+        instance: engine,
+      });
+
+      environment.debugRenderTree.create(controller, {
+        type: 'route-template',
+        name: 'application',
+        args: args.capture(),
+        instance: controller,
+      });
     }
 
     return bucket;
@@ -112,26 +135,64 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
   }
 
   getTag(state: EngineState): Tag {
+    let tag: Tag = CONSTANT_TAG;
+
     if (state.modelRef) {
-      return state.modelRef.tag;
-    } else {
-      return CONSTANT_TAG;
+      tag = state.modelRef.tag;
+    }
+
+    if (ENV._DEBUG_RENDER_TREE && isConstTag(tag)) {
+      tag = createTag();
     }
+
+    return tag;
   }
 
-  getDestructor({ engine }: EngineState): Option<Destroyable> {
-    return engine;
+  getDestructor(bucket: EngineState): Option<Destroyable> {
+    let { engine, environment, controller } = bucket;
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          environment.debugRenderTree.willDestroy(controller);
+          environment.debugRenderTree.willDestroy(bucket);
+          engine.destroy();
+        },
+      };
+    } else {
+      return engine;
+    }
   }
 
-  didRenderLayout(): void {
+  didRenderLayout(bucket: EngineState, bounds: Bounds): void {
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket.controller, bounds);
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
+
+  update(bucket: EngineState): void {
+    let { controller, environment, modelRef } = bucket;
+
+    if (modelRef !== undefined) {
+      controller.set('model', modelRef!.value());
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.update(bucket);
+      environment.debugRenderTree.update(bucket.controller);
     }
   }
 
-  update({ controller, modelRef }: EngineState): void {
-    assert('[BUG] `update` should only be called when modelRef is present', modelRef !== undefined);
-    controller.set('model', modelRef!.value());
+  didUpdateLayout(bucket: EngineState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket.controller, bounds);
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index b9ed4d57ef6..097733c7cde 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -1,21 +1,25 @@
 import { ENV } from '@ember/-internals/environment';
 import { guidFor } from '@ember/-internals/utils';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { assert } from '@ember/debug';
+import EngineInstance from '@ember/engine/instance';
 import { _instrumentStart } from '@ember/instrumentation';
 import { assign } from '@ember/polyfills';
 import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities, Option, Simple } from '@glimmer/interfaces';
-import { CONSTANT_TAG, Tag, VersionedPathReference } from '@glimmer/reference';
+import { CONSTANT_TAG, createTag, Tag, VersionedPathReference } from '@glimmer/reference';
 import {
   Arguments,
+  Bounds,
   ComponentDefinition,
   ElementOperations,
-  Environment,
+  EMPTY_ARGS,
   Invocation,
   WithDynamicTagName,
   WithStaticLayout,
 } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
+import Environment from '../environment';
 import { DynamicScope } from '../renderer';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
@@ -30,6 +34,9 @@ function instrumentationPayload(def: OutletDefinitionState) {
 
 interface OutletInstanceState {
   self: VersionedPathReference<any | undefined>;
+  environment: Environment;
+  outlet?: { name: string };
+  engine?: { mountPoint: string };
   finalize: () => void;
 }
 
@@ -46,12 +53,12 @@ const CAPABILITIES: ComponentCapabilities = {
   dynamicLayout: false,
   dynamicTag: false,
   prepareArgs: false,
-  createArgs: false,
+  createArgs: ENV._DEBUG_RENDER_TREE,
   attributeHook: false,
   elementHook: false,
-  createCaller: true,
+  createCaller: false,
   dynamicScope: true,
-  updateHook: false,
+  updateHook: ENV._DEBUG_RENDER_TREE,
   createInstance: true,
 };
 
@@ -66,18 +73,65 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
   create(
     environment: Environment,
     definition: OutletDefinitionState,
-    _args: Arguments,
+    args: Arguments,
     dynamicScope: DynamicScope
-  ) {
+  ): OutletInstanceState {
     if (DEBUG) {
-      this._pushToDebugStack(`template:${definition.template.referrer.moduleName}`, environment);
+      environment.debugStack.push(`template:${definition.template.referrer.moduleName}`);
     }
-    dynamicScope.outletState = definition.ref;
 
-    return {
+    let parentStateRef = dynamicScope.outletState;
+    let currentStateRef = definition.ref;
+
+    dynamicScope.outletState = currentStateRef;
+
+    let state: OutletInstanceState = {
       self: RootReference.create(definition.controller),
+      environment,
       finalize: _instrumentStart('render.outlet', instrumentationPayload, definition),
     };
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.outlet = { name: definition.outlet };
+
+      environment.debugRenderTree.create(state.outlet, {
+        type: 'outlet',
+        name: state.outlet.name,
+        args: EMPTY_ARGS,
+        instance: undefined,
+      });
+
+      let parentState = parentStateRef.value();
+      let parentOwner = parentState && parentState.render && parentState.render.owner;
+      let currentOwner = currentStateRef.value()!.render!.owner;
+
+      if (parentOwner && parentOwner !== currentOwner) {
+        let engine = currentOwner as EngineInstance;
+
+        assert('invalid engine: missing mountPoint', typeof currentOwner.mountPoint === 'string');
+        assert('invalid engine: missing routable', currentOwner.routable === true);
+
+        let mountPoint = engine.mountPoint!;
+
+        state.engine = { mountPoint };
+
+        environment.debugRenderTree.create(state.engine, {
+          type: 'engine',
+          name: mountPoint,
+          args: EMPTY_ARGS,
+          instance: engine,
+        });
+      }
+
+      environment.debugRenderTree.create(state, {
+        type: 'route-template',
+        name: definition.name,
+        args: args.capture(),
+        instance: definition.controller,
+      });
+    }
+
+    return state;
   }
 
   getLayout({ template }: OutletDefinitionState, _resolver: RuntimeResolver): Invocation {
@@ -98,20 +152,73 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
   }
 
   getTag(): Tag {
-    // an outlet has no hooks
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
   }
 
-  didRenderLayout(state: OutletInstanceState) {
+  didRenderLayout(state: OutletInstanceState, bounds: Bounds): void {
     state.finalize();
 
     if (DEBUG) {
-      this.debugStack.pop();
+      state.environment.debugStack.pop();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.didRender(state, bounds);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.didRender(state.engine, bounds);
+      }
+
+      state.environment.debugRenderTree.didRender(state.outlet!, bounds);
+    }
+  }
+
+  update(state: OutletInstanceState): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.update(state.outlet!);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.update(state.engine);
+      }
+
+      state.environment.debugRenderTree.update(state);
     }
   }
 
-  getDestructor(): Option<Destroyable> {
-    return null;
+  didUpdateLayout(state: OutletInstanceState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.didRender(state, bounds);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.didRender(state.engine, bounds);
+      }
+
+      state.environment.debugRenderTree.didRender(state.outlet!, bounds);
+    }
+  }
+
+  getDestructor(state: OutletInstanceState): Option<Destroyable> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          state.environment.debugRenderTree.willDestroy(state);
+
+          if (state.engine) {
+            state.environment.debugRenderTree.willDestroy(state.engine);
+          }
+
+          state.environment.debugRenderTree.willDestroy(state.outlet!);
+        },
+      };
+    } else {
+      return null;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/root.ts b/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
index 813578f7802..d21ce11bbd3 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
@@ -1,9 +1,10 @@
 import { FACTORY_FOR } from '@ember/-internals/container';
+import { ENV } from '@ember/-internals/environment';
 import { Factory } from '@ember/-internals/owner';
 import { _instrumentStart } from '@ember/instrumentation';
 import { DEBUG } from '@glimmer/env';
-import { ComponentCapabilities } from '@glimmer/interfaces';
-import { Arguments, ComponentDefinition } from '@glimmer/runtime';
+import { ComponentCapabilities, Option } from '@glimmer/interfaces';
+import { Arguments, ComponentDefinition, EMPTY_ARGS } from '@glimmer/runtime';
 import { DIRTY_TAG } from '../component';
 import Environment from '../environment';
 import { DynamicScope } from '../renderer';
@@ -33,14 +34,14 @@ class RootComponentManager extends CurlyComponentManager {
 
   create(
     environment: Environment,
-    _state: DefinitionState,
-    _args: Arguments | null,
+    state: DefinitionState,
+    _args: Option<Arguments>,
     dynamicScope: DynamicScope
   ) {
     let component = this.component;
 
     if (DEBUG) {
-      this._pushToDebugStack((component as any)._debugContainerKey, environment);
+      environment.debugStack.push((component as any)._debugContainerKey);
     }
 
     let finalizer = _instrumentStart('render.component', initialRenderInstrumentDetails, component);
@@ -66,7 +67,24 @@ class RootComponentManager extends CurlyComponentManager {
       processComponentInitializationAssertions(component, {});
     }
 
-    return new ComponentStateBucket(environment, component, null, finalizer, hasWrappedElement);
+    let bucket = new ComponentStateBucket(
+      environment,
+      component,
+      null,
+      finalizer,
+      hasWrappedElement
+    );
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: state.name,
+        args: EMPTY_ARGS,
+        instance: component,
+      });
+    }
+
+    return bucket;
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts b/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
index 2c6b3606f06..acc159c07df 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
@@ -1,12 +1,16 @@
+import { ENV } from '@ember/-internals/environment';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
-import { ComponentCapabilities } from '@glimmer/interfaces';
-import { CONSTANT_TAG } from '@glimmer/reference';
+import { ComponentCapabilities, Option } from '@glimmer/interfaces';
+import { CONSTANT_TAG, createTag } from '@glimmer/reference';
 import {
+  Arguments,
+  Bounds,
   ComponentDefinition,
   Invocation,
   NULL_REFERENCE,
   WithStaticLayout,
 } from '@glimmer/runtime';
+import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
 import AbstractManager from './abstract';
@@ -15,18 +19,29 @@ const CAPABILITIES: ComponentCapabilities = {
   dynamicLayout: false,
   dynamicTag: false,
   prepareArgs: false,
-  createArgs: false,
+  createArgs: ENV._DEBUG_RENDER_TREE,
   attributeHook: false,
   elementHook: false,
   createCaller: false,
   dynamicScope: false,
-  updateHook: false,
+  updateHook: ENV._DEBUG_RENDER_TREE,
   createInstance: true,
 };
 
-export default class TemplateOnlyComponentManager extends AbstractManager<null, OwnedTemplate>
-  implements WithStaticLayout<null, OwnedTemplate, OwnedTemplateMeta, RuntimeResolver> {
-  getLayout(template: OwnedTemplate): Invocation {
+export interface DebugStateBucket {
+  environment: Environment;
+}
+
+export default class TemplateOnlyComponentManager
+  extends AbstractManager<Option<DebugStateBucket>, TemplateOnlyComponentDefinitionState>
+  implements
+    WithStaticLayout<
+      Option<DebugStateBucket>,
+      TemplateOnlyComponentDefinitionState,
+      OwnedTemplateMeta,
+      RuntimeResolver
+    > {
+  getLayout({ template }: TemplateOnlyComponentDefinitionState): Invocation {
     const layout = template.asLayout();
     return {
       handle: layout.compile(),
@@ -38,8 +53,23 @@ export default class TemplateOnlyComponentManager extends AbstractManager<null,
     return CAPABILITIES;
   }
 
-  create(): null {
-    return null;
+  create(
+    environment: Environment,
+    { name }: TemplateOnlyComponentDefinitionState,
+    args: Arguments
+  ): Option<DebugStateBucket> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      let bucket = { environment };
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: name,
+        args: args.capture(),
+        instance: null,
+      });
+      return bucket;
+    } else {
+      return null;
+    }
   }
 
   getSelf() {
@@ -47,18 +77,61 @@ export default class TemplateOnlyComponentManager extends AbstractManager<null,
   }
 
   getTag() {
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
+  }
+
+  getDestructor(bucket: Option<DebugStateBucket>) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          bucket!.environment.debugRenderTree.willDestroy(bucket!);
+        },
+      };
+    } else {
+      return null;
+    }
+  }
+
+  didRenderLayout(bucket: Option<DebugStateBucket>, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.didRender(bucket!, bounds);
+    }
   }
 
-  getDestructor() {
-    return null;
+  update(bucket: Option<DebugStateBucket>): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.update(bucket!);
+    }
+  }
+
+  didUpdateLayout(bucket: Option<DebugStateBucket>, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.didRender(bucket!, bounds);
+    }
   }
 }
 
 const MANAGER = new TemplateOnlyComponentManager();
 
+export interface TemplateOnlyComponentDefinitionState {
+  name: string;
+  template: OwnedTemplate;
+}
+
 export class TemplateOnlyComponentDefinition
-  implements ComponentDefinition<OwnedTemplate, TemplateOnlyComponentManager> {
+  implements
+    TemplateOnlyComponentDefinitionState,
+    ComponentDefinition<TemplateOnlyComponentDefinitionState, TemplateOnlyComponentManager> {
   manager = MANAGER;
-  constructor(public state: OwnedTemplate) {}
+  constructor(public name: string, public template: OwnedTemplate) {}
+
+  get state(): TemplateOnlyComponentDefinitionState {
+    return this;
+  }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/environment.ts b/packages/@ember/-internals/glimmer/lib/environment.ts
index 65b9e3213fb..09ad3910b05 100644
--- a/packages/@ember/-internals/glimmer/lib/environment.ts
+++ b/packages/@ember/-internals/glimmer/lib/environment.ts
@@ -10,14 +10,16 @@ import {
   SimpleDynamicAttribute,
 } from '@glimmer/runtime';
 import { Destroyable, Opaque } from '@glimmer/util';
-import DebugStack from './utils/debug-stack';
+import getDebugStack, { DebugStack } from './utils/debug-stack';
 import createIterable from './utils/iterable';
 import { ConditionalReference, UpdatableReference } from './utils/references';
 import { isHTMLSafe } from './utils/string';
 
 import installPlatformSpecificProtocolForURL from './protocol-for-url';
 
+import { ENV } from '@ember/-internals/environment';
 import { OwnedTemplate } from './template';
+import DebugRenderTree from './utils/debug-render-tree';
 
 export interface CompilerFactory {
   id: string;
@@ -33,13 +35,17 @@ export default class Environment extends GlimmerEnvironment {
   public isInteractive: boolean;
   public destroyedComponents: Destroyable[];
 
-  public debugStack: typeof DebugStack;
+  private _debugStack: DebugStack | undefined;
+  private _debugRenderTree: DebugRenderTree | undefined;
   public inTransaction = false;
 
   constructor(injections: any) {
     super(injections);
-    this.owner = injections[OWNER];
-    this.isInteractive = this.owner.lookup<any>('-environment:main').isInteractive;
+
+    let owner: Owner = injections[OWNER];
+
+    this.owner = owner;
+    this.isInteractive = owner.lookup<any>('-environment:main').isInteractive;
 
     // can be removed once https://github.com/tildeio/glimmer/pull/305 lands
     this.destroyedComponents = [];
@@ -47,7 +53,29 @@ export default class Environment extends GlimmerEnvironment {
     installPlatformSpecificProtocolForURL(this);
 
     if (DEBUG) {
-      this.debugStack = new DebugStack();
+      this._debugStack = getDebugStack();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      this._debugRenderTree = new DebugRenderTree();
+    }
+  }
+
+  get debugStack(): DebugStack {
+    if (DEBUG) {
+      return this._debugStack!;
+    } else {
+      throw new Error("Can't access debug stack outside of debug mode");
+    }
+  }
+
+  get debugRenderTree(): DebugRenderTree {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return this._debugRenderTree!;
+    } else {
+      throw new Error(
+        "Can't access debug render tree outside of the inspector (_DEBUG_RENDER_TREE flag is disabled)"
+      );
     }
   }
 
@@ -82,6 +110,10 @@ export default class Environment extends GlimmerEnvironment {
   }
 
   begin(): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      this.debugRenderTree.begin();
+    }
+
     this.inTransaction = true;
 
     super.begin();
@@ -102,6 +134,10 @@ export default class Environment extends GlimmerEnvironment {
     } finally {
       this.inTransaction = false;
     }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      this.debugRenderTree.commit();
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index 19d342c68ed..89603e35e98 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -436,13 +436,13 @@ export default class RuntimeResolver implements IRuntimeResolver<OwnedTemplateMe
 
     if (pair.component === null) {
       if (ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
-        definition = new TemplateOnlyComponentDefinition(layout!);
+        definition = new TemplateOnlyComponentDefinition(name, layout!);
       }
     } else if (
       EMBER_GLIMMER_SET_COMPONENT_TEMPLATE &&
       isTemplateOnlyComponent(pair.component.class)
     ) {
-      definition = new TemplateOnlyComponentDefinition(layout!);
+      definition = new TemplateOnlyComponentDefinition(name, layout!);
     }
 
     if (pair.component !== null) {
diff --git a/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
new file mode 100644
index 00000000000..984f7876f1c
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
@@ -0,0 +1,184 @@
+import { assert } from '@ember/debug';
+import { Simple } from '@glimmer/interfaces';
+import { Bounds, CapturedArguments } from '@glimmer/runtime';
+import { expect, Option, Stack } from '@glimmer/util';
+
+export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
+
+export interface RenderNode {
+  type: RenderNodeType;
+  name: string;
+  args: CapturedArguments;
+  instance: unknown;
+}
+
+interface InternalRenderNode<T extends object> extends RenderNode {
+  bounds: Option<Bounds>;
+  refs: Set<Ref<T>>;
+}
+
+export interface CapturedRenderNode {
+  type: RenderNodeType;
+  name: string;
+  args: ReturnType<CapturedArguments['value']>;
+  instance: unknown;
+  bounds: Option<{
+    parentElement: Simple.Element;
+    firstNode: Simple.Node;
+    lastNode: Simple.Node;
+  }>;
+  children: CapturedRenderNode[];
+}
+
+let GUID = 0;
+
+export class Ref<T extends object> {
+  private id: number = GUID++;
+  private value: Option<T>;
+
+  constructor(value: T) {
+    this.value = value;
+  }
+
+  get(): Option<T> {
+    return this.value;
+  }
+
+  release(): void {
+    assert('BUG: double release?', this.value !== null);
+    this.value = null;
+  }
+
+  toString(): String {
+    let label = `Ref ${this.id}`;
+
+    if (this.value === null) {
+      return `${label} (released)`;
+    } else {
+      try {
+        return `${label}: ${this.value}`;
+      } catch {
+        return label;
+      }
+    }
+  }
+}
+
+export default class DebugRenderTree<Bucket extends object = object> {
+  private stack = new Stack<Bucket>();
+
+  private refs = new WeakMap<Bucket, Ref<Bucket>>();
+  private roots = new Set<Ref<Bucket>>();
+  private nodes = new WeakMap<Bucket, InternalRenderNode<Bucket>>();
+
+  begin(): void {
+    this.reset();
+  }
+
+  create(state: Bucket, node: RenderNode): void {
+    this.nodes.set(state, {
+      ...node,
+      bounds: null,
+      refs: new Set(),
+    });
+    this.appendChild(state);
+    this.enter(state);
+  }
+
+  update(state: Bucket): void {
+    this.enter(state);
+  }
+
+  didRender(state: Bucket, bounds: Bounds): void {
+    assert(`BUG: expecting ${this.stack.current}, got ${state}`, this.stack.current === state);
+    this.nodeFor(state).bounds = bounds;
+    this.exit();
+  }
+
+  willDestroy(state: Bucket): void {
+    expect(this.refs.get(state), 'BUG: missing ref').release();
+  }
+
+  commit(): void {
+    this.reset();
+  }
+
+  capture(): CapturedRenderNode[] {
+    return this.captureRefs(this.roots);
+  }
+
+  private reset(): void {
+    if (this.stack.size !== 0) {
+      // We probably encountered an error during the rendering loop. This will
+      // likely trigger undefined behavior and memory leaks as the error left
+      // things in an inconsistent state. It is recommended that the user
+      // refresh the page.
+
+      // TODO: We could warn here? But this happens all the time in our tests?
+
+      while (!this.stack.isEmpty()) {
+        this.stack.pop();
+      }
+    }
+  }
+
+  private enter(state: Bucket): void {
+    this.stack.push(state);
+  }
+
+  private exit(): void {
+    assert('BUG: unbalanced pop', this.stack.size !== 0);
+    this.stack.pop();
+  }
+
+  private nodeFor(state: Bucket): InternalRenderNode<Bucket> {
+    return expect(this.nodes.get(state), 'BUG: missing node');
+  }
+
+  private appendChild(state: Bucket): void {
+    assert('BUG: child already appended', !this.refs.has(state));
+
+    let parent = this.stack.current;
+    let ref = new Ref(state);
+
+    this.refs.set(state, ref);
+
+    if (parent) {
+      this.nodeFor(parent).refs.add(ref);
+    } else {
+      this.roots.add(ref);
+    }
+  }
+
+  private captureRefs(refs: Set<Ref<Bucket>>): CapturedRenderNode[] {
+    let captured: CapturedRenderNode[] = [];
+
+    refs.forEach(ref => {
+      let state = ref.get();
+
+      if (state) {
+        captured.push(this.captureNode(state));
+      } else {
+        refs.delete(ref);
+      }
+    });
+
+    return captured;
+  }
+
+  private captureNode(state: Bucket): CapturedRenderNode {
+    let node = this.nodeFor(state);
+    let { type, name, args, instance, refs } = node;
+    let bounds = this.captureBounds(node);
+    let children = this.captureRefs(refs);
+    return { type, name, args: args.value(), instance, bounds, children };
+  }
+
+  private captureBounds(node: InternalRenderNode<Bucket>): CapturedRenderNode['bounds'] {
+    let bounds = expect(node.bounds, 'BUG: missing bounds');
+    let parentElement = bounds.parentElement();
+    let firstNode = bounds.firstNode();
+    let lastNode = bounds.lastNode();
+    return { parentElement, firstNode, lastNode };
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts b/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
index 72df23ac3a9..535e72dbcae 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
@@ -2,7 +2,16 @@
 
 import { DEBUG } from '@glimmer/env';
 
-let DebugStack: any;
+export interface DebugStack {
+  push(name: string): void;
+  pushEngine(name: string): void;
+  pop(): string | void;
+  peek(): string | void;
+}
+
+let getDebugStack: () => DebugStack = () => {
+  throw new Error("Can't access the DebugStack class outside of debug mode");
+};
 
 if (DEBUG) {
   class Element {
@@ -12,8 +21,7 @@ if (DEBUG) {
   class TemplateElement extends Element {}
   class EngineElement extends Element {}
 
-  // tslint:disable-next-line:no-shadowed-variable
-  DebugStack = class DebugStack {
+  let DebugStackImpl = class DebugStackImpl implements DebugStack {
     private _stack: TemplateElement[] = [];
 
     push(name: string) {
@@ -60,6 +68,8 @@ if (DEBUG) {
       }
     }
   };
+
+  getDebugStack = () => new DebugStackImpl();
 }
 
-export default DebugStack;
+export default getDebugStack;
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
new file mode 100644
index 00000000000..a527c6de7e6
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
@@ -0,0 +1,1620 @@
+import { ApplicationTestCase, moduleFor, strip } from 'internal-test-helpers';
+
+import { ENV } from '@ember/-internals/environment';
+import {
+  capabilities,
+  CapturedRenderNode,
+  Component,
+  setComponentManager,
+  setComponentTemplate,
+} from '@ember/-internals/glimmer';
+import { EngineInstanceOptions, Owner } from '@ember/-internals/owner';
+import { Route } from '@ember/-internals/routing';
+import templateOnly from '@ember/component/template-only';
+import Controller from '@ember/controller';
+import { captureRenderTree } from '@ember/debug';
+import Engine from '@ember/engine';
+import EngineInstance from '@ember/engine/instance';
+import { Simple } from '@glimmer/interfaces';
+import { expect } from '@glimmer/util';
+import { compile } from 'ember-template-compiler';
+import { runTask } from 'internal-test-helpers/lib/run';
+
+interface CapturedBounds {
+  parentElement: Simple.Element;
+  firstNode: Simple.Node;
+  lastNode: Simple.Node;
+}
+
+type Expected<T> = T | ((actual: T) => boolean);
+
+function isExpectedFunc<T>(expected: Expected<T>): expected is (actual: T) => boolean {
+  return typeof expected === 'function';
+}
+
+interface ExpectedRenderNode {
+  type: CapturedRenderNode['type'];
+  name: CapturedRenderNode['name'];
+  args: Expected<CapturedRenderNode['args']>;
+  instance: Expected<CapturedRenderNode['instance']>;
+  bounds: Expected<CapturedRenderNode['bounds']>;
+  children: Expected<CapturedRenderNode['children']> | ExpectedRenderNode[];
+}
+
+if (ENV._DEBUG_RENDER_TREE) {
+  moduleFor(
+    'Application test: debug render tree',
+    class extends ApplicationTestCase {
+      constructor() {
+        super(...arguments);
+        this._TEMPLATE_ONLY_GLIMMER_COMPONENTS = ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS;
+        ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = true;
+      }
+
+      teardown() {
+        super.teardown();
+        ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = this._TEMPLATE_ONLY_GLIMMER_COMPONENTS;
+      }
+
+      async '@test routes'() {
+        this.addTemplate('index', 'Index');
+        this.addTemplate('foo', 'Foo {{outlet}}');
+        this.addTemplate('foo.index', 'index');
+        this.addTemplate('foo.inner', '{{@model}}');
+        this.addTemplate('bar', 'Bar {{outlet}}');
+        this.addTemplate('bar.index', 'index');
+        this.addTemplate('bar.inner', '{{@model}}');
+
+        this.router.map(function(this: any) {
+          this.route('foo', function(this: any) {
+            this.route('inner', { path: '/:model' });
+          });
+          this.route('foo', function(this: any) {
+            this.route('inner', { path: '/:model' });
+          });
+        });
+
+        class PassThroughRoute extends Route {
+          model({ model }: { model: string }) {
+            return model;
+          }
+        }
+
+        this.add('route:foo.inner', PassThroughRoute);
+        this.add('route:bar.inner', PassThroughRoute);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/foo');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.index',
+                args: { positional: [], named: { model: undefined } },
+                instance: this.controllerFor('foo.index'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+
+        await this.visit('/foo/wow');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.inner',
+                args: { positional: [], named: { model: 'wow' } },
+                instance: this.controllerFor('foo.inner'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+
+        await this.visit('/foo/zomg');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.inner',
+                args: { positional: [], named: { model: 'zomg' } },
+                instance: this.controllerFor('foo.inner'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+      }
+
+      async '@test named outlets'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <div id="header">{{outlet "header"}}</div>
+            {{outlet}}
+          `
+        );
+        this.addTemplate('header', 'header');
+        this.addTemplate('index', 'index');
+
+        this.add(
+          'controller:index',
+          class extends Controller {
+            queryParams = ['showHeader'];
+            showHeader = false;
+          }
+        );
+
+        interface Model {
+          showHeader: boolean;
+        }
+
+        this.add(
+          'route:index',
+          class extends Route {
+            queryParams = {
+              showHeader: {
+                refreshModel: true,
+              },
+            };
+
+            model({ showHeader }: Model): Model {
+              return { showHeader };
+            }
+
+            setupController(controller: Controller, { showHeader }: Model): void {
+              controller.setProperties({ showHeader });
+            }
+
+            renderTemplate(_: Controller, { showHeader }: Model): void {
+              this.render();
+
+              if (showHeader) {
+                this.render('header', { outlet: 'header' });
+              } else {
+                this.disconnectOutlet('header');
+              }
+            }
+          }
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: false } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/?showHeader');
+
+        this.assertRenderTree([
+          this.outlet('header', {
+            type: 'route-template',
+            name: 'header',
+            args: { positional: [], named: { model: { showHeader: true } } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element.firstChild),
+            children: [],
+          }),
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: true } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: false } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+      }
+
+      async '@test {{mount}}'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <div id="static">{{mount "foo"}}</div>
+            <div id="dynamic">{{mount this.engineName}}</div>
+            {{#if this.showMore}}
+              <div id="static-with-model">{{mount "foo" model=this.engineModel}}</div>
+              <div id="dynamic-with-model">{{mount this.engineName model=this.engineModel}}</div>
+            {{/if}}
+          `
+        );
+
+        this.add(
+          'engine:foo',
+          class extends Engine {
+            isFooEngine = true;
+
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if @model}}
+                    <InspectModel @model={{@model}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Foo'));
+              this.register('template:components/inspect-model', compile('{{@model}}'));
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              let instance = super.buildInstance(options);
+              instance['isFooEngineInstance'] = true;
+              return instance;
+            }
+          }
+        );
+
+        this.add(
+          'engine:bar',
+          class extends Engine {
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if @model}}
+                    <InspectModel @model={{@model}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Bar'));
+              this.register('template:components/inspect-model', compile('{{@model}}'));
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              let instance = super.buildInstance(options);
+              instance['isBarEngineInstance'] = true;
+              return instance;
+            }
+          }
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', 'bar');
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', undefined);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        let model = {
+          toStrin() {
+            return 'some model';
+          },
+        };
+
+        runTask(() => {
+          this.controllerFor('application').setProperties({
+            showMore: true,
+            engineModel: model,
+          });
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', 'bar');
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#dynamic-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').setProperties({
+            showMore: false,
+            engineName: undefined,
+          });
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+      }
+
+      async '@test routable engine'() {
+        this.addTemplate('index', 'Index');
+
+        let instance: EngineInstance;
+
+        this.add(
+          'engine:foo',
+          class extends Engine {
+            isFooEngine = true;
+
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if this.message}}
+                    <Hello @message={{this.message}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Foo'));
+              this.register(
+                'template:components/hello',
+                compile('<span>Hello {{@message}}</span>')
+              );
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              return (instance = super.buildInstance(options));
+            }
+          }
+        );
+
+        this.router.map(function(this: any) {
+          this.mount('foo');
+        });
+
+        this.add('route-map:foo', function() {});
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/foo');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        runTask(() => {
+          let controller = instance!.lookup<Controller>('controller:application')!;
+          controller.set('message', 'World');
+        });
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'hello',
+                    args: { positional: [], named: { message: 'World' } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.element.lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        runTask(() => {
+          let controller = instance!.lookup<Controller>('controller:application')!;
+          controller.set('message', undefined);
+        });
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+      }
+
+      async '@test template-only components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: null,
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@feature(EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) templateOnlyComponent()'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: templateOnly(),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@feature(EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) templateOnlyComponent() + setComponentTemplate()'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: setComponentTemplate(compile('Hello World'), templateOnly()),
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test classic components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: Component.extend(),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: (instance: object) => instance['name'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test custom components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: setComponentManager(_owner => {
+            return {
+              capabilities: capabilities('3.13', {}),
+
+              createComponent(_, { named: { name } }) {
+                return { name };
+              },
+
+              getContext(instances) {
+                return instances;
+              },
+            };
+          }, {}),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: (instance: object) => instance['name'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test <Input> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <Input @type="text" @value="first" />
+
+            {{#if this.showSecond}}
+              <Input @type="checkbox" @checked={{false}} />
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        let target = this.controllerFor('application');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => target.set('showSecond', true));
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'checkbox' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'checkbox',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [
+              {
+                type: 'component',
+                name: '-checkbox',
+                args: { positional: [], named: { target, type: 'checkbox', checked: false } },
+                instance: (instance: object) => instance['checked'] === false,
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => target.set('showSecond', false));
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+      }
+
+      async '@test <Textarea> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <Textarea @value="first" />
+
+            {{#if this.showSecond}}
+              <Textarea @value="second" />
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'second' } },
+            instance: (instance: object) => instance['value'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test <LinkTo> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <LinkTo @id="first" @route="index">Hello World</LinkTo>
+
+            {{#if this.showSecond}}
+              <LinkTo @id="second" @route="index">Hello World</LinkTo>
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'second', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      get owner(): Owner {
+        return this.applicationInstance;
+      }
+
+      outlet(
+        name: string,
+        node: ExpectedRenderNode & { type: 'engine' | 'route-template' }
+      ): ExpectedRenderNode;
+      outlet(node: ExpectedRenderNode & { type: 'engine' | 'route-template' }): ExpectedRenderNode;
+      outlet(
+        nodeOrName: string | ExpectedRenderNode & { type: 'engine' | 'route-template' },
+        node?: ExpectedRenderNode & { type: 'engine' | 'route-template' }
+      ): ExpectedRenderNode {
+        let name: string;
+
+        if (typeof nodeOrName === 'string') {
+          name = nodeOrName;
+          node = node!;
+        } else {
+          name = 'main';
+          node = nodeOrName;
+        }
+
+        return {
+          type: 'outlet',
+          name,
+          instance: undefined,
+          args: { positional: [], named: {} },
+          bounds: node.bounds,
+          children: [node],
+        };
+      }
+
+      nodeBounds(node: Node): CapturedBounds {
+        return {
+          parentElement: (expect(
+            node.parentNode,
+            'BUG: detached node'
+          ) as Simple.Node) as Simple.Element,
+          firstNode: node as Simple.Node,
+          lastNode: node as Simple.Node,
+        };
+      }
+
+      elementBounds(element: Element): CapturedBounds {
+        return {
+          parentElement: element as Simple.Element,
+          firstNode: element.firstChild! as Simple.Node,
+          lastNode: element.lastChild! as Simple.Node,
+        };
+      }
+
+      assertRenderTree(expected: ExpectedRenderNode[]): void {
+        let actual = captureRenderTree(this.owner);
+        let wrapped: ExpectedRenderNode[] = [
+          this.outlet({
+            type: 'route-template',
+            name: '-top-level',
+            args: { positional: [], named: {} },
+            instance: undefined,
+            bounds: this.nodeBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: this.controllerFor('application'),
+                bounds: this.elementBounds(this.element),
+                children: expected,
+              }),
+            ],
+          }),
+        ];
+
+        this.assertRenderNodes(actual, wrapped, 'root');
+      }
+
+      assertRenderNodes(
+        actual: CapturedRenderNode[],
+        expected: ExpectedRenderNode[],
+        path: string
+      ): void {
+        this.assert.strictEqual(
+          actual.length,
+          expected.length,
+          `Expecting ${expected.length} render nodes at ${path}, got ${actual.length}.\n`
+        );
+
+        if (actual.length === expected.length) {
+          let byTypeAndName = <T, U, V extends { type: T; name: U }>(a: V, b: V): number => {
+            if (a.type > b.type) {
+              return 1;
+            } else if (a.type < b.type) {
+              return -1;
+            } else if (a.name > b.name) {
+              return 1;
+            } else if (a.name < b.name) {
+              return -1;
+            } else {
+              return 0;
+            }
+          };
+
+          actual = actual.sort(byTypeAndName);
+          expected = expected.sort(byTypeAndName);
+
+          for (let i = 0; i < actual.length; i++) {
+            this.assertRenderNode(actual[i], expected[i], `${actual[i].type}:${actual[i].name}`);
+          }
+        } else {
+          this.assert.deepEqual(actual, [], path);
+        }
+      }
+
+      assertRenderNode(
+        actual: CapturedRenderNode,
+        expected: ExpectedRenderNode,
+        path: string
+      ): void {
+        this.assertProperty(actual.type, expected.type, false, `${path} (type)`);
+        this.assertProperty(actual.name, expected.name, false, `${path} (name)`);
+        this.assertProperty(actual.args, expected.args, true, `${path} (args)`);
+        this.assertProperty(actual.instance, expected.instance, false, `${path} (instance)`);
+        this.assertProperty(actual.bounds, expected.bounds, true, `${path} (bounds)`);
+
+        if (Array.isArray(expected.children)) {
+          this.assertRenderNodes(actual.children, expected.children, path);
+        } else {
+          this.assertProperty(actual.children, expected.children, false, `${path} (children)`);
+        }
+      }
+
+      assertProperty<T>(actual: T, expected: Expected<T>, deep: boolean, path: string): void {
+        if (isExpectedFunc(expected)) {
+          this.assert.ok(expected(actual), `Matching ${path}, got ${actual}`);
+        } else if (deep) {
+          this.assert.deepEqual(actual, expected, `Matching ${path}`);
+        } else {
+          this.assert.strictEqual(actual, expected, `Matching ${path}`);
+        }
+      }
+    }
+  );
+}
diff --git a/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js b/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
index 1607db84171..3284d926690 100644
--- a/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
+++ b/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
@@ -1,6 +1,6 @@
 import { moduleFor, AbstractTestCase } from 'internal-test-helpers';
 
-import { DebugStack } from '@ember/-internals/glimmer';
+import { getDebugStack } from '@ember/-internals/glimmer';
 import { DEBUG } from '@glimmer/env';
 
 moduleFor(
@@ -8,7 +8,7 @@ moduleFor(
   class extends AbstractTestCase {
     ['@test pushing and popping'](assert) {
       if (DEBUG) {
-        let stack = new DebugStack();
+        let stack = getDebugStack(this.owner);
 
         assert.equal(stack.peek(), undefined);
 
diff --git a/packages/@ember/-internals/owner/index.ts b/packages/@ember/-internals/owner/index.ts
index 0c1f78d3168..618b3bf9650 100644
--- a/packages/@ember/-internals/owner/index.ts
+++ b/packages/@ember/-internals/owner/index.ts
@@ -25,11 +25,12 @@ export interface EngineInstanceOptions {
   routable: boolean;
 }
 
+import EngineInstance from '@ember/engine/instance';
 export interface Owner {
   lookup<T>(fullName: string, options?: LookupOptions): T | undefined;
   factoryFor<T, C>(fullName: string, options?: LookupOptions): Factory<T, C> | undefined;
   factoryFor(fullName: string, options?: LookupOptions): Factory<any, any> | undefined;
-  buildChildEngineInstance<T>(name: string, options?: EngineInstanceOptions): T;
+  buildChildEngineInstance(name: string, options?: EngineInstanceOptions): EngineInstance;
   register<T, C>(fullName: string, factory: Factory<T, C>, options?: object): void;
   hasRegistration(name: string, options?: LookupOptions): boolean;
   mountPoint?: string;
diff --git a/packages/@ember/application/index.d.ts b/packages/@ember/application/index.d.ts
index 275e8259e0c..30eeea101a9 100644
--- a/packages/@ember/application/index.d.ts
+++ b/packages/@ember/application/index.d.ts
@@ -1,2 +1 @@
 export { getOwner, setOwner } from '@ember/-internals/owner';
-export type EngineInstance = any;
diff --git a/packages/@ember/component/template-only.ts b/packages/@ember/component/template-only.ts
index a74f1b5e195..6b123603b8c 100644
--- a/packages/@ember/component/template-only.ts
+++ b/packages/@ember/component/template-only.ts
@@ -36,7 +36,7 @@ export class TemplateOnlyComponent {
   @param {String} moduleName the module name that the template only component represents, this will be used for debugging purposes
   @category EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
 */
-export default function templateOnlyComponent(moduleName: string): TemplateOnlyComponent {
+export default function templateOnlyComponent(moduleName?: string): TemplateOnlyComponent {
   return new TemplateOnlyComponent(moduleName);
 }
 
diff --git a/packages/@ember/controller/index.d.ts b/packages/@ember/controller/index.d.ts
index 14b75c41298..07dd76a9df4 100644
--- a/packages/@ember/controller/index.d.ts
+++ b/packages/@ember/controller/index.d.ts
@@ -1,8 +1,11 @@
-export default interface Controller {
+export default class Controller {
   isController: true;
   target?: unknown;
   store?: unknown;
   model?: unknown;
+  get<T>(key: string): T;
+  set<T>(key: string, value: T): void;
+  setProperties(props: { [key: string]: any }): void;
 }
 
-export function inject(name?: string): Controller;
+export function inject(name?: string): any;
diff --git a/packages/@ember/debug/index.ts b/packages/@ember/debug/index.ts
index ff669750047..5c3b01ec292 100644
--- a/packages/@ember/debug/index.ts
+++ b/packages/@ember/debug/index.ts
@@ -8,6 +8,7 @@ import _warn, { WarnFunc } from './lib/warn';
 export { registerHandler as registerWarnHandler } from './lib/warn';
 export { registerHandler as registerDeprecationHandler } from './lib/deprecate';
 export { isTesting, setTesting } from './lib/testing';
+export { default as captureRenderTree } from './lib/capture-render-tree';
 
 export type DebugFunctionType =
   | 'assert'
diff --git a/packages/@ember/debug/lib/capture-render-tree.ts b/packages/@ember/debug/lib/capture-render-tree.ts
new file mode 100644
index 00000000000..e423e3a1199
--- /dev/null
+++ b/packages/@ember/debug/lib/capture-render-tree.ts
@@ -0,0 +1,28 @@
+import { CapturedRenderNode, Environment } from '@ember/-internals/glimmer';
+import { Owner } from '@ember/-internals/owner';
+import { expect } from '@glimmer/util';
+
+/**
+  @module @ember/debug
+*/
+/**
+  Ember Inspector calls this function to capture the current render tree.
+
+  In production mode, this requires turning on `ENV._DEBUG_RENDER_TREE`
+  before loading Ember.
+
+  @private
+  @static
+  @method captureRenderTree
+  @for @ember/debug
+  @param app {ApplicationInstance} An `ApplicationInstance`.
+  @since 3.14.0
+*/
+export default function captureRenderTree(app: Owner): CapturedRenderNode[] {
+  let env = expect(
+    app.lookup<Environment>('service:-glimmer-environment'),
+    'BUG: owner is missing service:-glimmer-environment'
+  );
+
+  return env.debugRenderTree.capture();
+}
diff --git a/packages/@ember/engine/index.d.ts b/packages/@ember/engine/index.d.ts
new file mode 100644
index 00000000000..3df5eac5b39
--- /dev/null
+++ b/packages/@ember/engine/index.d.ts
@@ -0,0 +1,9 @@
+import { Owner, LookupOptions, Factory, EngineInstanceOptions } from '@ember/-internals/owner';
+import EngineInstance from './instance';
+
+export default class Engine {
+  constructor(...args: any[]);
+  init(...args: any[]): void;
+  register<T, C>(fullName: string, factory: Factory<T, C>, options?: object): void;
+  buildInstance(options?: EngineInstanceOptions): EngineInstance;
+}
diff --git a/packages/@ember/engine/instance.d.ts b/packages/@ember/engine/instance.d.ts
new file mode 100644
index 00000000000..033f3d787b4
--- /dev/null
+++ b/packages/@ember/engine/instance.d.ts
@@ -0,0 +1,8 @@
+import { Owner } from '@ember/-internals/owner';
+
+export default interface EngineInstance extends Owner {
+  mountPoint?: string;
+  routable?: boolean;
+  boot(): void;
+  destroy(): void;
+}
diff --git a/packages/ember-template-compiler/lib/system/compile-options.ts b/packages/ember-template-compiler/lib/system/compile-options.ts
index 589e4e6f825..47c961949ed 100644
--- a/packages/ember-template-compiler/lib/system/compile-options.ts
+++ b/packages/ember-template-compiler/lib/system/compile-options.ts
@@ -19,7 +19,7 @@ export interface CompileOptions {
   plugins?: Plugins | undefined;
 }
 
-export default function compileOptions(_options: Partial<CompileOptions>): PrecompileOptions {
+export default function compileOptions(_options: Partial<CompileOptions> = {}): PrecompileOptions {
   let options = assign({ meta: {} }, _options, {
     customizeComponentName(tagname: string): string {
       return COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get(tagname);
diff --git a/packages/ember-template-compiler/lib/system/compile.ts b/packages/ember-template-compiler/lib/system/compile.ts
index c12501a62c6..41e400d385f 100644
--- a/packages/ember-template-compiler/lib/system/compile.ts
+++ b/packages/ember-template-compiler/lib/system/compile.ts
@@ -5,7 +5,11 @@ import require, { has } from 'require';
 import { CompileOptions } from './compile-options';
 import precompile from './precompile';
 
-let template: (templateJS: () => string) => string;
+// FIXME
+type StaticTemplate = unknown;
+type Factory = any;
+
+let template: (templateJS: StaticTemplate) => Factory;
 
 /**
   Uses HTMLBars `compile` function to process a string into a compiled template.
@@ -17,7 +21,7 @@ let template: (templateJS: () => string) => string;
   @param {String} templateString This is the string to be compiled by HTMLBars.
   @param {Object} options This is an options hash to augment the compiler options.
 */
-export default function compile(templateString: string, options: CompileOptions) {
+export default function compile(templateString: string, options: CompileOptions = {}): Factory {
   if (!template && has('@ember/-internals/glimmer')) {
     // tslint:disable-next-line:no-require-imports
     template = require('@ember/-internals/glimmer').template;
@@ -29,7 +33,9 @@ export default function compile(templateString: string, options: CompileOptions)
     );
   }
 
-  let precompiledTemplateString = precompile(templateString, options);
-  let templateJS = new Function(`return ${precompiledTemplateString}`)();
-  return template(templateJS);
+  return template(evaluate(precompile(templateString, options)));
+}
+
+function evaluate(precompiled: string): StaticTemplate {
+  return new Function(`return ${precompiled}`)();
 }
diff --git a/packages/ember-template-compiler/lib/system/precompile.ts b/packages/ember-template-compiler/lib/system/precompile.ts
index 02ddc9b2804..d74fa690b06 100644
--- a/packages/ember-template-compiler/lib/system/precompile.ts
+++ b/packages/ember-template-compiler/lib/system/precompile.ts
@@ -15,6 +15,6 @@ import compileOptions, { CompileOptions } from './compile-options';
   @method precompile
   @param {String} templateString This is the string to be compiled by HTMLBars.
 */
-export default function precompile(templateString: string, options: CompileOptions): string {
+export default function precompile(templateString: string, options: CompileOptions = {}): string {
   return glimmerPrecompile(templateString, compileOptions(options));
 }
diff --git a/packages/ember/index.js b/packages/ember/index.js
index ea571f5c3c5..492cbefca88 100644
--- a/packages/ember/index.js
+++ b/packages/ember/index.js
@@ -9,7 +9,7 @@ import { deleteMeta, meta } from '@ember/-internals/meta';
 import * as metal from '@ember/-internals/metal';
 import { FEATURES, isEnabled, EMBER_GLIMMER_SET_COMPONENT_TEMPLATE } from '@ember/canary-features';
 import * as EmberDebug from '@ember/debug';
-import { assert, deprecate } from '@ember/debug';
+import { assert, captureRenderTree, deprecate } from '@ember/debug';
 import Backburner from 'backburner';
 import Logger from '@ember/-internals/console';
 import Controller, { inject as injectController } from '@ember/controller';
@@ -534,6 +534,7 @@ if (EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) {
   Ember._setComponentTemplate = setComponentTemplate;
   Ember._templateOnlyComponent = templateOnlyComponent;
 }
+Ember._captureRenderTree = captureRenderTree;
 Ember.Handlebars = {
   template,
   Utils: {
diff --git a/packages/ember/tests/reexports_test.js b/packages/ember/tests/reexports_test.js
index 0e3ee3999f5..aa7f0a7aa69 100644
--- a/packages/ember/tests/reexports_test.js
+++ b/packages/ember/tests/reexports_test.js
@@ -234,6 +234,7 @@ let allExports = [
   EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
     ? ['_templateOnlyComponent', '@ember/component/template-only', 'default']
     : null,
+  ['_captureRenderTree', '@ember/debug', 'captureRenderTree'],
 
   // @ember/-internals/runtime
   ['A', '@ember/-internals/runtime'],
diff --git a/tests/docs/expected.js b/tests/docs/expected.js
index 3ed1967bb02..f1b2952a109 100644
--- a/tests/docs/expected.js
+++ b/tests/docs/expected.js
@@ -9,6 +9,7 @@ module.exports = {
     'LOG_VERSION',
     '[]',
     '_APPLICATION_TEMPLATE_WRAPPER',
+    '_DEBUG_RENDER_TREE',
     '_JQUERY_INTEGRATION',
     '_DEFAULT_ASYNC_OBSERVERS',
     '_RERENDER_LOOP_LIMIT',
@@ -114,6 +115,7 @@ module.exports = {
     'cancel',
     'cancelRouterSetup',
     'capitalize',
+    'captureRenderTree',
     'catalogEntriesByType',
     'catch',
     'changeProperties',
diff --git a/tests/index.html b/tests/index.html
index 29609eb2f7f..d41e30c98f6 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -58,6 +58,10 @@
         }
 
         ENV['RAISE_ON_DEPRECATION'] = true;
+
+        if (QUnit.urlParams.debugrendertree) {
+          ENV['_DEBUG_RENDER_TREE'] = true;
+        }
       })();
     </script>