Proposal: can-coach - devtools for CanJS

[phillipskevin]

This proposal is to create first-party devtools for CanJS.

This was discussed on a recent live stream (15:47).

I'm calling this can-coach, the CanJS Observable And Change Helper.
(although, admittedly, I came up with this after already deciding on can-coach)

Here are some features of can-coach's initial release:

Initial Features

1. ViewModels

This would allow you to select a component, see the properties on its viewModel, and modify the enumerable ones (you wouldn't be able to modify properties defined by getters, etc):

2. Bindings

This would allow you to trace through the dependencies of the observables in your application. It would be built on top of the awesome work in can-debug/draw-graph. It would also allow you to click through from the nodes in the graph to the functions in your code where those nodes are defined. If the node is an element, hovering over the node would highlight the element.

3. Queues

This would allow you to inspect the stack in can-queues to see how your changes propagate through your application. This would allow you to see what "changes" caused something to happen while passed in the debugger:

Wait, is this devtools?

The demos above are using a prototype that's just built as a web-app and displayed as a kind of pop-over. I think there are some major benefits to this:

• works in any browser
• you don't have to install anything (therefore could be used in JSBin)
• you don't have to know how to use devtools

There are also major downsides:

• we would have to rebuild features that devtools already has, like being able to select and element and being able to resize things
• people probably expect devtools to be in the devtools
• you can't easily link to peoples' code
• if "in the page" it won't work when paused at a breakpoint

The last downside (and probably the one before it) kind of makes this a non-starter, so we would have to build this as real devtools, probably only in Chrome at first.

It's possible we could also make parts of it available "in the page" for use in JSBin and just leave out those features, although we would prioritize getting the devtools version fully-functional.

Other Ideas

• We could provide more information on errors and warnings - this would give us a place to give more detailed information, provide links, or suggest code changes
• Allow users to quickly submit issues from devtools
• More insight into queues. One idea is to provide something like a "break on flush" that would allow you to step through and see exactly how tasks are processing through the queues. Here is a (totally fake) demo of how this might work:

[justinbmeyer]

Eventually, we should improve the bindings graph in two ways:

1. Remove internal observables. Show only what the user created.
2. Organize by component hierarchy within the DOM. Something like:

[phillipskevin]

Another idea, @andrejewski came up with is to add an item to the right-click context menu to "Inspect nearest ViewModel". It looks like this should be possible: https://superuser.com/a/184806.

[phillipskevin]

https://chrome.google.com/webstore/detail/canjs-devtools/hhdfadlgplkpapjfehnjhcebebgmibcb is available. Going to close this. Issues for that are in https://github.com/canjs/devtools/issues.