URL Parser & Builder - Online URL Breakdown Tool

1. Paste to parse

An empty port is not a missing one — browsers omit the protocol default (443 for https, 80 for http); the port shows only when explicitly set to a non-default.

1. Paste a full URL (must start with https:// or http://) into the input box.
2. The breakdown appears instantly below: protocol, hostname, port, path and fragment, with query parameters as an editable key-value table.
3. Copy any single key or value from the table and compare against what the API expects.

2. Values are shown decoded

Chinese and special characters travel percent-encoded (e.g. %E4%B8%AD), and the tool displays the decoded original for readability. The reverse caveat: when copying a parameter value back into code to rebuild a URL, anything containing Chinese or reserved characters (&, =, #) must be re-encoded with encodeURIComponent — concatenating raw breaks the URL structure.

3. Four frequent causes of "the API disagrees"

• Parameter order: most backends do not care, but some signature schemes sort params before concatenating — different order, different signature.
• Encoding differences: space as %20 versus +, escaped or unescaped slashes — languages differ in defaults, so what looks identical to the eye arrives as different bytes.
• Fragment trap: nothing after # is ever sent to the server — it is a browser-side fragment identifier, so its absence from server logs is expected.
• Passwords in URLs: basic-auth credentials in https://user:pass@host parse fine, but such URLs land in browser history and server logs — temporary debugging only.

4. Three hidden behaviors of the URL constructor

The built-in WHATWG URL constructor replaced hand-rolled parsing, but three behaviors hide in plain sight. First, href normalizes — trailing slashes, default ports :80/:443 and hostname casing get canonicalized, so comparing raw strings for equality misfires constantly. Second, searchParams.get returns null for missing keys but empty string for present-but-empty (?a=); the three states (null / empty / valued) need separate handling in conditionals. Third, searchParams iteration preserves occurrence order, but repeated keys are interpreted by the server: PHP keeps the last, Express (default parser) returns an array — the same URL parses differently on each end.

5. Using parsed values safely

• Whelist before use: allow only https/http schemes and validate hostname by suffix (to defeat evil.com.example.com tricks).
• decodeURIComponent can throw URIError on malformed % sequences — always try/catch user-controlled input.
• location.hash never reaches the server but is equally attacker-controlled; in XSS contexts it is as guilty as the query string.

6. Missing schemes, relative paths, and URL-shaped strings

This tool expects absolute http:// or https:// URLs — without a scheme the browser URL constructor may treat input as relative or throw, depending on the string. For protocol-relative //cdn.example.com/a.js or site paths like /api/v1?x=1, prepend the real scheme and host used in production before pasting, or host/path fields will not match live traffic. mailto:, data:, and blob: also parse under WHATWG rules, but their query semantics differ from http(s); do not reuse https assumptions when debugging those schemes.