API Debugging intermediate 12 min

Inspect a URL Before Debugging a Routing Bug

Break a URL into parts so route, query, and fragment issues are not mixed together.

Scenario

A shared link is supposed to open the billing tab for user 42, but it lands on the wrong view. Before anyone touches router code, look at what the URL actually says: this one carries tab=billing&tab=usage — the same parameter twice — plus a #invoices fragment that the server never even receives. Routing bugs frequently turn out to be URL bugs, and the URL is much cheaper to inspect than the router.

Broken input

https://app.example.test/users/42?tab=billing&tab=usage#invoices

Goal

Use URL Parser / Inspector to break the URL into origin, path, query parameters, and fragment, so each part can be checked against what the app expects to receive.

Tool sequence

  1. Open URL Parser / Inspector.
  2. Paste the full shared link, fragment included.
  3. Read the parts: origin https://app.example.test, path /users/42, two tab values, fragment invoices.
  4. Spot the two mismatches — the duplicated tab means the view depends on which value the frontend reads (URLSearchParams.get("tab") returns the first, billing), and #invoices is client-only, so any server-side redirect drops it.
  5. Fix whatever composed the link to emit one tab value, and dig into the remaining parameters with Query String Parser / JSON Converter if the query string carries more state.

Checkpoint output

origin:    https://app.example.test
path:      /users/42
query:     tab = billing, usage   ← duplicate key
fragment:  invoices               ← never sent to the server

The path is fine; the conflict lives in the duplicated tab parameter and a fragment the server cannot see. The router was innocent.

Common mistakes

  • Debugging route matching before checking whether the URL's query parameters are even coherent.
  • Ignoring fragments — they never reach the server, so server logs will never explain fragment-dependent behavior.
  • Assuming duplicate query keys collapse the same way in every framework and browser API.
  • Testing with a hand-typed URL instead of the exact link the user shared, which hides the malformed part.

Related tools and lessons