Proposal: A fully featured web debug toolbar / panel that knows about Rails and Turbo

Hi,

We all know about Rack Mini Profiler but it’s not quite set up to handle Turbo in all its glory.

Some of Rails 8’s agendas are to improve developer happiness which is indicated by some of the milestones that were posted. I think it would be beneficial if we had something baked into the framework that gave us a detailed look into each page request in a visual way. Perhaps it could even be released as a browser extension + gem combo.

The main goals would be to make it easier to get an idea on what your app is doing in development. I think these insights could help uncover performance issues, debug issues faster, better understand what’s happening on each request and allow you to know where to go in a project to make specific changes which is especially important when working with a new code base.

In any case, it would be interesting if we had a debug toolbar / panel that showed things like:

  • Database / Redis queries and their durations
  • Cache hits or misses
  • Which ERB templates are being loaded and how long they took
  • How long the request took with a breakdown of each thing that contributed to it
  • How many frame or steam requests were made and which templates rendered them
  • Track websocket channels that are connected to
  • A quick way to get debug logs, events and information out of Stimulus JS controllers
  • Potentially adding visual indicators around frames and showing which frames or stream IDs were updated during page updates (either manually invoked or morphed with Turbo 8)
  • Live reloading that can be toggled on / off with keeping state around, such as if you change anything the page gets updated without a page reload – this could apply to JS, CSS, ERB templates, etc…

Given it would be specific to Rails it could know about everything. It could technically pick up details about mailers, jobs, callbacks and more.

The sky’s the limit here. The above is only off the top of my head.

Would you like to see something like this? If so what would you like to see included?

9 Likes

This is a fantastic idea.

• The database and rendering timing are already collected by rack-mini-profiler, they just need new Turbo-aware UI • Cache hit / miss is collected by Rails in dev, and can be added to the response headers • WebSocket info can be collected from the appropriate libs • TurboFrames can be highlighted with pure CSS, I think • Idiomorph has extensive lifecycle hooks that could be leveraged

The case for official Rails DevTools is strong, and I’m all for it!

1 Like

Perhaps not fully in the same realm (your suggestion is more about in-page dev tooling) but it might be worth taking a look at what Laravel is doing in terms of dev tooling:

2 Likes

Coincidentally, I’m working on a Rails Debugbar, inpsired by the Laravel Debugbar. There is a demo on the website with fixtures data.

The first version is ready to be used. I’ll continue working on it to add support for views and hotwire, HTTP clients and more.

6 Likes

GitHub - discourse/logster: Log viewer UI and framework for rack is such an unsung hero. It really changes a ton of workflows, it is so much more easier heading to /logs vs needing to tail a file. It has search, full information from rack regarding headers, backtraces near log messages and more.

Yet, almost nobody uses it, which is a huge shame.

More than happy to land some PRs in rack mini profiler if anyone has ideas.

1 Like