Amphtml: FR: Live amp-bind debugger

[radiovisual]

One workflow that really slows me down when developing with AMP is how I need to manually type AMP.printState() (when it works, of course) every time I want to see what my app's state is. Many interactive AMP-powered pages rely on <amp-state> to power the interactions and UI updates, so sometimes seeing a snapshot of the current state is the only way to debug certain problems. It could really improve the workflow if you made it easier for us to see how the app's state changes over time, and an up-to-date snapshot of the current state.

So my request is that we can have state updates pretty-printed to the console when an update to state has happened.

This could be similar to something like redux-logger which prints the "before and after" state change):

Or it could be something more robust, like redux-devtools-extension which is a powerful, fully-featured chrome extension that gives you in-depth look into the state changes over time (and a whole lot of extra goodies thrown in).

[kevinkassimo]

Hi @radiovisual , thanks for the suggestion!
For the logger part, I do believe a dev version of amp-bind does come with a state change logger, something like this:

You can re-enable it by typing the following in the console:

AMP.setLogLevel(3);

Notice this might also turn on loggers for other components.
/to @choumx to see if we should document this

[choumx]

@radiovisual Thanks for the feature request. This is actually something I've been thinking about for awhile -- a Chrome extension is ideal but it's hard to find time to build one. Any interest in contributing? 😉

In the meantime, I added some more debug commands which may help (#16830). I'll add this to documentation soon.

@kevinkassimo Thanks for being proactive and responding to these issues!

[choumx]

Deduping with #18053.