Feathers Debugger Chrome Extension

[radenkovic]

Hello there, not really an issue, but just wanted to share debugging tool I built, it's basically React app hosted as Chrome extension (though can work as service).

It traces your events in app.hooks and displays them nicely (check gif above, actual recording, works realtime). I plan to add more features (query and params inspection etc), but for now you can track events / durations on waterfall chart.

Still did not create npm package that binds feathers debugger to feathers app, but there is sample script in readme. So I have few questions regarding that @daffl:

• Is there any elegant way to inject hooks in before/finally app.hooks using app.configure?
• For now it streams into file hosted in public folder, but I want to make a service that exposes an endpoint, so you technically can use it on remote feathers server.

Thank you in advance for comments! Suggestions are appreciated.

I submitted it to Chrome Store (pending), but you can download crx and manually install it as extension. I worked on this like yesterday and today and it's far from optimal, but I think it can be valuable and very cool.

Contributions are welcome!

Repository is here

Download: here

[J3m5]

This is awesome! Is there a repo somewhere ? I'm much more into Vue than react so I don't think I'll be able to contribute code but I'll certainly submit feedback, bugs and feature requests. Nice work!

[radenkovic]

Is there a repo somewhere ?

LOL, sorry, just updated the comment, it's here

[J3m5]

First feedback! : )

Exposing the debugger as a service would be a great first improvement, it could be used with sockets events and add authentication to it.

Also, it would be interesting to have a panel with error logs and another one with console logs. Having a panel with the feathers configuration would be nice too!

There are lot of feature that could improve the development of feathers app!

[J3m5]

About adding hooks dynamically, there is the feathers-profiler plugin that does it here by calling app.hooks(), but I don't know if it's still possible as it was created for feathers v2.

[radenkovic]

Just a minor update, extension is published! You can now simply install it from here

I plan to maintain it regularly.

Some things on my plate:

• decent npm package for feathers debugger (node)
• inspecting requests (query, params and more info)
• adding debug data using npm package (I think console.logs will be too complex for now)

[radenkovic]

If someone wants to try: https://github.com/radenkovic/feathers-debugger-service, I created a service that uses NeDB, and it's pretty awesome! Input welcome!

[daffl]

This is fantastic @radenkovic, thank you for sharing! I will definitely check this out shortly. As to your questions:

• Is there any elegant way to inject hooks in before/finally app.hooks using app.configure?

As long as you make sure you call app.configure(debuggerService()) after the original app.hooks have been set you should be able to add the trace app hooks right in https://github.com/radenkovic/feathers-debugger-service/blob/master/src/index.js#L22 by calling app.hooks again.

• For now it streams into file hosted in public folder, but I want to make a service that exposes an endpoint, so you technically can use it on remote feathers server.

Not sure if this has been done already but I think it should be fairly straightforward to stream all those events directly into the connected console. Let me know if you need any help with that.

[radenkovic]

Thanks for the updates @daffl ! I will try to auto-inject hooks with app.configure() in next version, that sounds great! About calling app.hooks() twice, can I ensure that trace() is the first in before and last in finally?

For now it streams into file hosted in public folder

That's already fixed (no files, uses feathers-nedb)

stream all those events directly into the connected console.

I think it will be easier for development to continue with feathers-nedb because of querying (already helped a lot)

All ideas welcome!

[daffl]

I would just put in the docs that the debugger needs to be the last thing to be configured (at least after app.hooks). That should do it. Also, once it is officially in the Chrome webstore would you be interested in writing up blog post about this?

[radenkovic]

@daffl Thanks for the update! It's already in Chrome store, but it's still not that good, I want to make few more updates (configuring app endpoint url) and needs better docs as you mentioned.

would you be interested in writing up blog post about this

Sure, but let me iterate few more times until it's in decent shape. Will keep you posted here.

[radenkovic]

@here Just to give you sneak-peek of what's cooking and to keep this thread alive, I hope I will release v1.3 on Saturday.

• p90 and p95 feature: higlight top 10% and 5% slowest queries
• Drastic performance improvements (reduced re-rendering a lot)

• Settings pane
• Set debugger url, allows remote debugging :tada:
• Will allow updating refresh interval manually

I think those were the main reported pain-points, after that will start adding cool features!

[radenkovic]

@here version 1.3 is released, if you have extension installed it should auto-update. If you notice any bugs, please create issues here

Download here