Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: can-coach - devtools for CanJS #3861

phillipskevin opened this Issue Jan 25, 2018 · 3 comments


None yet
3 participants
Copy link

phillipskevin commented Jan 25, 2018

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:



This comment has been minimized.

Copy link

justinbmeyer commented Jan 25, 2018

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: untitled

This comment has been minimized.

Copy link
Collaborator Author

phillipskevin commented Feb 14, 2018

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:


This comment has been minimized.

Copy link
Collaborator Author

phillipskevin commented Jun 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.