Merge pull request #21407 from olenderhub/bugfix-template-only-debugger-message

[BUGFIX] Improve debugger message for template-only components

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/lib/suites/debugger.ts

@@ -87,6 +87,61 @@ export class DebuggerSuite extends RenderTest {
     this.assertStableNodes();
   }
 
+  @test({ kind: 'templateOnly' })
+  'debugger in template-only component logs template-only message'() {
+    let originalInfo = console.info;
+    let messages: string[] = [];
+
+    console.info = (...args: unknown[]) => {
+      messages.push(args.join(' '));
+    };
+
+    try {
+      resetDebuggerCallback();
+
+      this.registerComponent('TemplateOnly', 'DebugTest', '{{debugger}}');
+
+      this.render('<DebugTest @foo="bar" />', {});
+
+      this.assert.deepEqual(messages, [
+        "Use `get(<path>)` to debug this template. For named arguments, use `get('@argName')`.",
+      ]);
+    } finally {
+      console.info = originalInfo;
+      resetDebuggerCallback();
+    }
+  }
+
+  @test
+  'debugger in class-backed component logs context message with named argument hint'() {
+    let originalInfo = console.info;
+    let messages: string[] = [];
+
+    console.info = (...args: unknown[]) => {
+      messages.push(args.join(' '));
+    };
+
+    try {
+      resetDebuggerCallback();
+
+      this.registerComponent(
+        'Glimmer',
+        'DebugTest',
+        '{{debugger}}',
+        class extends GlimmerishComponent {}
+      );
+
+      this.render('<DebugTest @foo="bar" />', {});
+
+      this.assert.deepEqual(messages, [
+        "Use `context`, and `get(<path>)` to debug this template. For named arguments, use `get('@argName')`.",
+      ]);
+    } finally {
+      console.info = originalInfo;
+      resetDebuggerCallback();
+    }
+  }
+
   @test
   'can get locals'() {
     let expectedContext = {

packages/@glimmer/runtime/lib/compiled/opcodes/debugger.ts

@@ -14,11 +14,20 @@ export type DebugGet = (path: string) => unknown;
 export type DebugCallback = (context: unknown, get: DebugGet) => void;
 
 function debugCallback(context: unknown, get: DebugGet): void {
-  // eslint-disable-next-line no-console
-  console.info('Use `context`, and `get(<path>)` to debug this template.');
-
-  // for example...
-  context === get('this');
+  if (context !== null && context !== undefined) {
+    // eslint-disable-next-line no-console
+    console.info(
+      "Use `context`, and `get(<path>)` to debug this template. For named arguments, use `get('@argName')`."
+    );
+
+    // for example...
+    context === get('this');
+  } else {
+    // eslint-disable-next-line no-console
+    console.info(
+      "Use `get(<path>)` to debug this template. For named arguments, use `get('@argName')`."
+    );
+  }
 
   // eslint-disable-next-line no-debugger
   debugger;