Amphtml: Improve amp-bind debuggability

[choumx]

• [x] Report syntax/expression errors through error.js#reportError.
• [x] Add fine-level logging for state and component updates, etc.
• [x] Output warning for undefined variables, improve error message specificity

Related to #6199.

/cc @kul3r4

[cramforce]

Is this currently integrated with "element level" exceptions that highlight elements that have a problem. E.g. if an expression associated with them has an exception?

[choumx]

Hmm, not sure which exceptions you're referring to.

Currently, on page load:

• user().error on expression parse failure or invalid binding
• If dev mode, user().error when initial state != expression result

TODO:

• If #log=4, dev().fine on data flow steps to aid in bug reporting

[cramforce]

I meant this code pass: https://github.com/ampproject/amphtml/blob/master/src/error.js#L104

[choumx]

Ah, no it doesn't; added to list above. Thanks for the reference.

[kul3r4]

@choumx What is the solution for developer when debugging amp-bind variables?

[cramforce]

Would be great to have a way to dump the global state in the console. We could then later wrap it in a Chrome DevTools Extension.

[choumx]

@kul3r4 You can create elements with [text] bindings to the expression you want to debug, e.g.

<p [text]="myState.foo + 123">Debug here</p>

I think that may be more convenient than repeatedly running "print expression" commands in dev console. Let me know if that doesn't work for you.

@cramforce Good idea, will track this in the next sprint.

[kul3r4]

I understand I can use [text] bindings but this requires to redeploy a new version of the page just for debugging. Interested in a way of dumping the global state in the console and use it in a Chrome DevTools Extension