Skip to content

Feature/shortcuts and envdiff - #162

Merged
georgidhristov merged 2 commits into
DebugProbe:mainfrom
DevSars24:feature/shortcuts-and-envdiff
Jul 22, 2026
Merged

Feature/shortcuts and envdiff#162
georgidhristov merged 2 commits into
DebugProbe:mainfrom
DevSars24:feature/shortcuts-and-envdiff

Conversation

@DevSars24

Copy link
Copy Markdown
Contributor

Summary

This PR adds two features to the DebugProbe dashboard:

  • Keyboard shortcuts for faster navigation without using the mouse.
  • An automatic Environment Diff Badge that flags when the same endpoint behaves differently across environments (for example, staging versus production).

Both changes are additive and introduce no breaking changes.


Feature 1: Keyboard Shortcuts

Added a single global keyboard listener so developers can navigate the dashboard faster:

  • Pressing the forward slash key focuses the search box.
  • Pressing Escape closes the currently open details panel, or blurs the search box if that's what's focused.
  • Pressing the letter c copies the currently open trace as a cURL command.

Safety checks included:

  • Shortcuts are automatically disabled while typing inside any text field, so pressing c or slash while searching just types normally instead of triggering an action.
  • The only exception is Escape, which always works, even while typing.
  • Modifier key combinations like Ctrl, Cmd, or Alt are ignored, so existing browser shortcuts are not affected.
  • Holding a key down does not repeatedly re-trigger the same action.

This is a purely client-side change, implemented entirely in debugprobe-ui.js. No backend code was touched.


Feature 2: Environment Diff Badge

A common class of bug is when an endpoint works correctly in one environment but breaks in another, using the exact same request. This feature surfaces that automatically instead of requiring a developer to manually run a compare.

How it works:

  • When two traces are captured for the same route and HTTP method but from different environments, the dashboard compares their responses.
  • The comparison uses the existing comparison engine that already powers the manual compare feature — no new diffing logic was written.
  • If a genuine difference is found, a small badge appears next to that request in the dashboard.

Configuration:

  • This feature is opt-in and disabled by default, controlled by a new setting called AutoEnvironmentDiff.
  • When left disabled, no comparison work runs at all, and the dashboard behaves exactly as it did before this change.
  • Developers can enable it explicitly if they want the automatic detection.

Files Changed

  • debugprobe-ui.js — added the keyboard shortcut listener.
  • HtmlRenderer.cs — added the logic to detect and render the environment diff badge.
  • DebugEntryStore.cs — now tracks which environment each captured request came from, needed to compare across environments.
  • DebugProbeOptions.cs — added the new AutoEnvironmentDiff setting.
  • debugprobe.css — added styling for the new badge, matching the existing visual design.
  • HtmlRendererEnvDiffTests.cs — new test file covering the badge logic under different scenarios.

Testing Done

  • The project builds cleanly with no errors.
  • All 96 tests pass, including the new tests written for this feature.
  • Manually verified that with the new setting left at its default (off), no badge appears anywhere in the dashboard — confirming no change in behavior for existing users.
  • Manually tested all three keyboard shortcuts in the browser:
    • Search focus works correctly.
    • Closing the details view works correctly.
    • Copying a trace as cURL works correctly.
    • Typing normally inside the search box is unaffected.

@georgidhristov
georgidhristov merged commit dac074c into DebugProbe:main Jul 22, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants