Inspector Idea:clearly show available template vars

Design
1

I have often wondered exactly what variables and helpers are available in various templates. I know you can do {{log this}} but you are left digging through a very deep complex object.

2

Have you tried using the template debugger?

If you have your Web Inspector open, your app will stop at the debugger statement and let you type things into your console to in the context of your template.

Suppose you were debugging the model:

{{#each model as |person|}}
  {{debugger}}
  {{person.firstName}}
{{/each}}

…then, when you run this part of your app and it pauses at the debugger, you could type in:

get('person.firstName');

…to see what would be rendered.

3

First, thanks for the reply

So, using {{debugger}} and then get() in the console might be useful for developing this idea, but the goal here is to help someone like a designer figure out what properties are even available to pass into get()

4

Ah interesting — yea, I think I misunderstood what you were asking…my apologies! :stuck_out_tongue:

I think it’s an interesting idea…are you thinking something in the ember-inspector along the lines of this? intellij-emberjs/features.md at master · Turbo87/intellij-emberjs · GitHub

^ It’s not clear to me wether that works with properties on components/controllers — but, the ideas and implementation there might be a good starting point.

1 Like
5

The problem is not possible to enumerate all the properties that might be available.

Because of unknownProperty and proxying, there could be literally infinite properties available to a template.