What does a URL parser do?

A URL parser breaks a URL into its individual components: protocol (scheme), hostname, port, pathname (path), query string, and fragment (hash). This tool also extracts each query parameter as a separate key-value pair, making it easy to read and edit complex URLs with many parameters.

What is URL percent-encoding?

Percent-encoding converts characters that are not allowed in a URL into a safe format. Each character is replaced by a percent sign followed by two hexadecimal digits representing its UTF-8 byte value. For example, a space becomes %20 and an equals sign becomes %3D. This tool encodes and decodes individual query parameter values using the encodeURIComponent / decodeURIComponent functions.

What is a relative URL?

A relative URL specifies a location relative to a base URL rather than as a complete address. For example, given the base URL https://example.com/docs/ and the relative URL ./guide, the resolved absolute URL is https://example.com/docs/guide. This tool resolves any relative URL to its absolute form using the browser-native URL API.

What are UTM parameters?

UTM parameters are query string keys that start with utm_ (e.g., utm_source, utm_medium, utm_campaign). They are used by marketing and analytics tools such as Google Analytics to track the origin and attribution of web traffic. This tool detects UTM parameters automatically and highlights them in the query parameter table.

Is my data sent to a server?

No. All parsing, encoding, decoding, and URL resolution runs entirely in your browser using the native URL Web API and built-in JavaScript functions. Your URLs and query parameter values never leave your device.

URL Parser & Debugger — Break Down Any URL Online

What is a URL?

A URL (Uniform Resource Locator) is a structured address that identifies a resource on the web. Every URL is made up of several distinct components, each with a defined purpose. Understanding these components is essential when debugging API integrations, tracking parameters, OAuth flows, and redirect chains.

A complete URL looks like this:

https://user@example.com:8080/api/v1/search?q=hello+world&page=2#results
│─────│ │───│ │──────────│ │──│ │─────────────│ │────────────────│ │────│
scheme  user   hostname  port  pathname          search/query     fragment

URL Components Explained

Component	Example	Description
Protocol	`https:`	The scheme — defines how data is transferred. Common values: `https:`, `http:`, `ftp:`, `ws:`.
Hostname	`example.com`	The domain name or IP address of the server.
Port	`8080`	The TCP port. Omitted when using the default (80 for HTTP, 443 for HTTPS).
Pathname	`/api/v1/search`	The path to the resource on the server. Always starts with `/`.
Search	`?q=hello+world&page=2`	The query string, starting with `?`. Contains key-value pairs separated by `&`.
Fragment	`#results`	The fragment identifier — tells the browser to scroll to a specific element. Not sent to the server.
Origin	`https://example.com:8080`	Combines scheme, hostname, and port. Used in CORS and security checks.

Query Parameters

The query string is the part of the URL after the ?. It contains a series of key-value pairs separated by &. For example:

?utm_source=google&utm_medium=cpc&page=2&sort=asc

This URL has four query parameters: utm_source, utm_medium, page, and sort. Each key and value should be percent-encoded to ensure that reserved characters like =, &, +, and / are transmitted correctly.

Use the query parameter table in this tool to view, add, remove, and edit individual parameters. The rebuilt URL updates in real time to reflect your changes.

URL Encoding (Percent-Encoding)

Certain characters have special meaning in URLs: ? marks the start of the query string, & separates parameters, = separates keys from values, and # marks the fragment. To use these characters as literal data inside a URL, they must be percent-encoded.

Percent-encoding replaces each character with a % followed by two hexadecimal digits representing the character’s UTF-8 byte value:

Character	Encoded
Space	`%20`
`&`	`%26`
`=`	`%3D`
`+`	`%2B`
`/`	`%2F`
`?`	`%3F`
`@`	`%40`
`#`	`%23`
`€`	`%E2%82%AC`

This tool uses encodeURIComponent and decodeURIComponent — the JavaScript functions designed to encode individual parameter values. They handle the full Unicode range by encoding non-ASCII characters as their multi-byte UTF-8 sequences.

Relative URLs

A relative URL specifies a location relative to a base URL rather than as a complete address. They are common in HTML links, CSS @import rules, and API documentation.

Base URL	Relative	Resolved
`https://example.com/docs/guide/`	`./intro`	`https://example.com/docs/guide/intro`
`https://example.com/docs/guide/`	`../api`	`https://example.com/docs/api`
`https://example.com/docs/`	`/about`	`https://example.com/about`
`https://example.com/page`	`https://other.com`	`https://other.com`

Use the Resolve Relative tab to convert any relative URL to its absolute form instantly.

Recognized URL Patterns

This tool detects common URL patterns and labels them automatically:

UTM Parameters — URLs containing keys that start with utm_ (e.g., utm_source, utm_medium, utm_campaign) are marketing tracking URLs used by Google Analytics and similar tools.

OAuth Redirect URLs — URLs containing response_type, client_id, or redirect_uri are part of an OAuth 2.0 or OpenID Connect authorization flow. These URLs must be URL-encoded precisely — even a single misplaced character will cause authentication failures.

API Endpoint URLs — URLs whose path contains /api/, /v1/, /v2/, or /v3/ are identified as API endpoint calls. These often have strict parameter formatting requirements.

Common Debugging Use Cases

Broken redirect — Paste the full redirect URL into the parser to check whether the redirect_uri parameter is properly encoded. A common mistake is double-encoding or missing encoding of the :// inside the redirect target.

OAuth login not working — Parse the authorization URL to verify that client_id, response_type, redirect_uri, and scope are all present and correctly encoded.

UTM tracking not appearing in analytics — Check that all utm_* parameters are present in the URL and that their values do not contain unencoded & characters that would break the parameter boundary.

Relative link going to the wrong page — Use the Resolve Relative tab to see exactly where a relative link resolves to, given the actual page URL as the base.

How the Browser Parses URLs

Modern browsers implement URL parsing via the WHATWG URL Standard, which is also implemented in Node.js as the built-in URL class. This tool uses new URL(input) and URLSearchParams — the same APIs that browsers and servers use — ensuring that parsing results match real-world behavior.

Key behaviours to be aware of:

The URL API normalizes URLs, for example lowercasing the hostname and scheme.
Default ports (80 for HTTP, 443 for HTTPS) are stripped from the port property.
The origin property returns "null" for file: and blob: URLs.
URLSearchParams decodes both %20 (percent-encoded space) and + (plus-encoded space) as a literal space.

Privacy

All URL parsing, encoding, decoding, and resolution happens entirely in your browser. No data is sent to any server. The tool works fully offline once the page has loaded.

URL Parser & Debugger