CanJS Inspector

[retro]

VOTE HERE
I'd like to make something like Ember Inspector but for CanJS

I was thinking about the following features:

• Inspecting the component scope
• Inspecting the controls bound to an element
• Inspecting the current model requests
• Inspecting the app state object (whatever is bound to can.route map)

Can you think of any other features we could need?

[cherifGsoul]

This will be great, I can add:

• Inspecting performance benchmarking
• Inspecting dependencies

[justinbmeyer]

@cherifGsoul what do you mean by dependencies? Also, for benchmarking, what do you mean?

@retro I think we should also add showing a compute's dependent values. For instance a fullName compute would show map "first" and map "last".

[cherifGsoul]

@justinbmeyer dependencies I mean if the module depends on onther module from CanJS for example can.Component depends on can.Map and can.Map depends on can.map.define .
For benchmarkin I mean performance mesure, memory, time loaddin etc

[w3dot0]

@justinbmeyer fully agree - debugging computes can be quite tricky and being able to see their dependency chain would be very useful.

Let's say I'm creating a view with a list of checkboxes that use can-value. Each item should be checked if its value is contained in a can.Map's selectedIds array field (and unchecked if it's not present).

I could write a compute that "gets" each checkbox's value from the array using selectedIds.indexOf(value) > -1 and "sets" the value in the array using selectedIds.push(value) and selectedIds.splice(...). Looks pretty harmless at first sight, but it's not going to scale well: Since all the computes listen for changes to the same "selectedIds" field, each time a checkbox is selected ALL computes will reevaluate (and each checkbox will update). Not a good idea...

How could the inspector help you realize that this is a performance bottleneck? Maybe the "compute dependencies" view could show how many times a compute instance updated itself in total (so you could see that they all recompute themselves at the same rate) or a log view could shows which computes have updated most recently. Clicking on one of the log entries could then show the dependent values and ideally link to the compute's source code itself.

[alexisabril]

Closing as we now have an alpha inspector with its own repository: https://github.com/canjs/can-devtools