Log All Events to console

[kotarf]

Goal

Log all events to console.

Strategies

These have been thought of before by other people
1- createInceptor functions on Ext.mixin.Observable
2- Override Ext.mixin.Observable
3- Override events on a component level

Example

The application starts. The log functionality is enabled. A view gets rendered. The console prints which view and that it was rendered.

Another view gets rendered. The console prints which view and that it was rendered. And so on.

Version

Sencha Touch 2.1

Problem
I can’t seem to log all events!
Note that this topic has been discussed before- frequently.

Help

1- Explain to me how to do it correctly in a way that is tested and reproducible in ST2.
2- Or help me find errors in my code.
3- let me know if it’s not possible

Notes

I want to log both DOM events and “synthetic” events.
I want to be able to log all events after the applications is running and stop logging them at any time.

This is not a bug report!

References

In Ext.Js and Sencha Touch 1.1, these conceivably worked (strat 1)
https://gist.github.com/1337918
http://www.sencha.com/forum/showthread.php?65147

In Sencha Touch 2.0, this may have worked (strat 2)
http://www.sencha.com/forum/showthread.php?182344

In Ext.Js, this must have worked (strat 1)
http://www.sencha.com/blog/advanced-plugin-development-with-ext-js/

In Ext.Js, a different way using capture worked/works
http://extjs-tutorials.blogspot.com/2012/01/how-to-observe-all-events-on-view.html

In Ext.Js someone ran into the same problem as me for a brief period of time:
http://www.sencha.com/forum/showthre...ous-limitation

Summary

I’m having trouble logging all events to console, even though it has been debunked before.
Attempting to create interceptors on the observables prototype has no effect, and overriding the class also has no effect.

My code testing both methods is attached at the bottom in a zip (must change the paths to your sencha source and css in index.html).

Adding interceptors to the observable class definition- or anything close to it is much preferred. I’d like to avoid overriding because I’d like to be able to log all events and stop logging all events, and I’m not sure if you can detach an override. I don’t want to override things on the component level because it’s more code. I want it to be generic.

Any and all advice appreciated.

-Frank

[fdp]

I use this code:

Ext.Component.prototype.fireEvent =Ext.Function.createInterceptor(Ext.Component.prototype.fireEvent, function() {
  console.log(this.$className, arguments, this);
  return true;
});

// No mouse version
Ext.Component.prototype.fireEvent =
Ext.Function.createInterceptor(Ext.Component.prototype.fireEvent, function() {
  if (arguments && arguments[0].indexOf("mouse") === -1 && arguments[0] != "uievent") {
    console.log(this.$className, arguments, this);
  }
  return true;
});

[kotarf]

Thank you!! This is powerful stuff that definitely solves my problem.

I would consider this answered unless you or anyone else would like to explain why this works, and why intercepting or overriding the Observable mixin should be avoided. This would be the on the thought side of things as I do not have a firm grasp of mixins.

EDIT: forgot to mention by changing "fireEvent" in the above code to "doFireEvent", non-custom events like tap and release will be revealed.

Thanks again

[fdp]

You are welcome, It can seem strange but I spent several hours getting these simple lines of code working.

But it is really very useful if you are looking for the right listener to use!