URL Parser

How to Use the URL Parser

Paste any full URL — including protocol, credentials, port, path, query string and fragment — and click Parse. The tool breaks the URL down into every component using the browser's native URL API, lists all query parameters in a table, and converts the query string into a JSON object you can copy directly into code.

Features

• Breaks a URL into protocol, host, port (with default port shown when omitted), path, query and hash
• Lists every query parameter with its already-decoded value
• Converts the query string to JSON, merging repeated keys such as ?tag=a&tag=b into an array
• Shows the decoded form of percent-encoded paths and fragments side by side with the raw value
• Runs entirely client-side — no URL, including any embedded tokens, is ever uploaded

Anatomy of a URL

A URL is made of several parts: the protocol (scheme) such as https:, an optional userinfo section for credentials, the host and optional port, the path identifying a resource, the query string holding key/value parameters after ?, and the fragment after # that never leaves the browser. This tool exposes each of those parts individually so you can debug malformed links, inspect tracking parameters, or document an API endpoint.

URL Parserの使い方

protocolを含む完全なURLを入力欄に貼り付けて「解析」を押すと、ブラウザ標準のURL APIを使って protocol・ホスト名・ポート・パス・クエリ文字列・ハッシュに分解し、テーブル表示します。 クエリパラメータは一覧と、コードにそのまま貼り付けられるJSON形式の両方で確認できます。 全ての処理はブラウザ内で完結するため、トークンを含むURLでも安全に確認できます。

1. APIエンドポイントのクエリパラメータをJSON化してデバッグ

ログに残っていた長いリクエストURLをそのまま貼り付ければ、?page=2&sort=desc&tag=a&tag=b のようなクエリを一目で確認できるテーブルと、{"page":"2","sort":"desc","tag":["a","b"]} のようなJSONに変換します。同名キーが複数ある場合も自動で配列にまとめられるため、パラメータの重複を見落としません。

2. トラッキングパラメータ・短縮URLの中身を確認

utm_source や utm_campaignなどのマーケティング計測パラメータが大量に付いたURLも、キーと値の一覧に整形されるため、 共有前に不要なパラメータが含まれていないかをすぐ確認できます。

3. ポート省略時の実効ポートを確認

https://example.com/ のようにポートが省略されたURLでも、 プロトコルごとの既定ポート(https:443, http:80など)を「実効値」として併記するため、 ファイアウォール設定やリバースプロキシ設定と突き合わせる際に迷いません。

よくあるエラーと対処 / Common Errors and Fixes

言語別コード例 / Code Examples by Language

本ツールと同じ分解処理をコードで再現する場合の最小サンプル。

Minimal snippets that reproduce the same URL parsing programmatically.

JavaScript / TypeScript

const u = new URL("https://example.com:8443/path?q=tokyo&page=2#top");
u.protocol;   // "https:"
u.hostname;   // "example.com"
u.port;       // "8443"
u.pathname;   // "/path"
Object.fromEntries(u.searchParams); // { q: "tokyo", page: "2" }

Python

from urllib.parse import urlparse, parse_qs

u = urlparse("https://example.com:8443/path?q=tokyo&page=2#top")
u.scheme, u.hostname, u.port, u.path
parse_qs(u.query)  # {'q': ['tokyo'], 'page': ['2']}

Go

import "net/url"

u, _ := url.Parse("https://example.com:8443/path?q=tokyo&page=2#top")
u.Scheme, u.Hostname(), u.Port(), u.Path
u.Query() // url.Values{"q": []string{"tokyo"}, "page": []string{"2"}}

Shell (jq + node --print)

# クエリ文字列だけを取り出して確認 / Extract just the query string
node -e 'console.log(new URL(process.argv[1]).search)' "https://example.com/path?q=tokyo"

Before / After 実例 / Before & After

例1: 基本的なURLの分解 / Basic breakdown

入力 / Input:  https://example.com:8443/products/1?ref=sns#reviews

↓

protocol: https:
host: example.com  port: 8443
path: /products/1
query: ?ref=sns
hash: #reviews

例2: 重複クエリキーのJSON変換 / Duplicate query keys to JSON

入力 / Input:  ?tag=a&tag=b&sort=desc

↓

{
  "tag": ["a", "b"],
  "sort": "desc"
}

Why browser-only? / なぜブラウザ完結か

URLs pasted into a debugging tool often carry session tokens in the query string, internal hostnames, or Basic Auth credentials embedded before the @sign. Sending that to a server-side parser exposes it to a third party. DevToolBox uses the browser's built-in URLAPI to do the entire breakdown locally — no network request is made. You can confirm this yourself in DevTools → Network while parsing.

デバッグ用に貼り付けるURLには、クエリ文字列に含まれるセッショントークンや、@より前に埋め込まれたBasic認証情報など機密情報が含まれがちです。 本ツールはブラウザ標準のURL APIで分解を完結させ、ネットワーク送信は一切行いません。