Developer Tools
URL Parser & Inspector - Decode Any URL Instantly
Parse any URL into its components: protocol, hostname, port, path, query parameters, and hash. Decode query strings, inspect domain parts, and build custom URLs.
URL anatomy
Parsed URL | |
| Full URL | https://user:secret@www.example.com:8080/path/to/page?name=John%20Doe&tag=a&tag=b#section2 |
| Protocol | https: |
| Username | user |
| Password | •••••• |
| Hostname | www.example.com |
| Port | 8080 |
| Pathname | /path/to/page |
| Hash | #section2 |
| Origin | https://www.example.com:8080 |
Domain breakdown
Query parameters (3)
| Key ▲▼ | Value ▲▼ |
|---|---|
| name | John Doe |
| tag | a |
| tag | b |
URL anatomy
A URL (Uniform Resource Locator) is made up of several distinct parts:
- Protocol: The scheme that tells the browser how to connect (
https:,http:,ftp:) - Credentials: Optional username and password embedded in the URL
- Hostname: The domain name or IP address of the server
- Port: Optional port number (defaults to 443 for HTTPS, 80 for HTTP)
- Pathname: The path to the resource on the server
- Query string: Key-value pairs after the
?, used to pass parameters - Hash / fragment: The
#sectionthat tells the browser to scroll to a named anchor
About percent-encoding
URLs can only contain a limited set of ASCII characters. Special characters (spaces, accented
letters, emoji, etc.) must be percent-encoded: replaced with a
% followed by their two-digit hex value. For example, a space becomes
%20. This tool decodes all percent-encoded values so you can read them as plain
text.
Using the URL builder
The URL Builder tab lets you assemble a URL from its parts. Enter the hostname, path, and query parameters and the tool constructs a properly encoded URL. This is useful when you need to construct API endpoints or redirect URLs with special characters in the query string.
Browser URL API
Modern browsers provide the URL and URLSearchParams Web APIs for parsing
URLs in JavaScript without manual string splitting:
const u = new URL('https://example.com/path?foo=bar&baz=1');
console.log(u.hostname); // 'example.com'
console.log(u.searchParams.get('foo')); // 'bar' URLSearchParams handles encoding and decoding automatically and is supported in all
modern browsers and Node.js 10+.
URL security considerations
Open redirect vulnerabilities occur when an application accepts a URL parameter
(e.g., ?next=https://evil.com) and redirects to it without validation. Always
validate that a redirect target’s origin matches your own:
const target = new URL(redirectParam, window.location.origin);
if (target.origin !== window.location.origin) throw new Error('Invalid redirect'); Never blindly redirect users to a URL supplied in a query parameter.
Data URIs
A data: URI embeds resource content directly in the URL:
data:text/html;base64,PHRpdGxlPkhpPC90aXRsZT4=. They are used in CSS background
images to inline small assets and avoid HTTP requests. Limitations include: no browser caching
(the data is re-parsed every use), significant size overhead for binary content, and blocking
by strict Content Security Policies that disallow
data: in img-src or script-src.