DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

10 Free Developer Tools Every Web Dev Should Bookmark in 2026

#webdev #programming #productivity #devtools

The best developer tools are the ones that are already open when you need them. Not the ones you have to install, configure, or remember the name of—the ones living in your browser tabs, ready to go at any moment.

This list is the result of looking at what tools actually come up during real development work: debugging a 401 response, validating a regex, formatting a 3,000-line JSON blob that a third-party API just dumped on you. Every tool here is free, runs entirely in the browser, and requires no account or installation.

1. JWT Decoder

URL: devplaybook.cc/tools/jwt-decoder

Every developer working with authentication eventually needs to look inside a JWT. Maybe a 401 landed with no explanation and you need to check if the token is expired. Maybe a claims-based authorization rule is failing and you want to see the actual payload.

The JWT Decoder parses the header, payload, and signature sections in seconds—right in your browser, with nothing leaving your machine.

Why it's essential:

  • Instantly shows human-readable timestamps for exp, iat, and nbf claims
  • Highlights the alg field (spot dangerous alg: none vulnerabilities immediately)
  • 100% client-side—safe for tokens that contain user identifiers

When you'll reach for it: Any time you're debugging OAuth flows, inspecting tokens from identity providers, or explaining JWT structure to a teammate.

2. JSON Formatter

URL: devplaybook.cc/tools/json-formatter

Minified JSON is unreadable. API responses, database exports, Webhook payloads—they all arrive as walls of text. The JSON Formatter beautifies any JSON instantly.

Why it's essential:

  • Syntax highlighting with error detection—invalid JSON surfaces immediately
  • Handles deeply nested objects cleanly
  • Minify option to go the other direction when you need compact output
  • Copy formatted output with a single click

When you'll reach for it: Any time you console.log an API response and can't read it. Any time a webhook payload arrives as one long line.

// What you paste in (typical API response)
{"user":{"id":42,"email":"alice@example.com","roles":["admin","editor"],"settings":{"theme":"dark","notifications":true}}}

// What you get
{
  "user": {
    "id": 42,
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "settings": {
      "theme": "dark",
      "notifications": true
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Regex Tester

URL: devplaybook.cc/tools/regex-tester

Writing regex blind—in a code file, running tests each time—is painful. The Regex Tester gives you immediate visual feedback: which parts of your test string match, which groups capture what, and where the pattern breaks.

Why it's essential:

  • Real-time match highlighting as you type
  • Shows captured groups in a separate panel
  • Supports all regex flags (case-insensitive, global, multiline, dotall)
  • Test against multiple strings simultaneously

When you'll reach for it: Validating email patterns, writing URL parsers, building form validation, extracting data from log files, constructing search queries.

# Paste this to test email validation
^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$

# Test strings:
alice@example.com          ✅ matches
bob+tags@company.co.uk     ✅ matches
notanemail                 ❌ no match
missing@.com               ❌ no match
Enter fullscreen mode Exit fullscreen mode

4. UUID Generator

URL: devplaybook.cc/tools/uuid-generator

UUIDs are everywhere: database primary keys, API request IDs, idempotency keys, test data. The UUID Generator generates RFC 4122-compliant UUIDs on demand with no setup.

Why it's essential:

  • Generates v1 (time-based), v4 (random), and v5 (namespace-hashed) UUIDs
  • Bulk generation for seeding test databases
  • Copy single or batch UUIDs instantly
  • Validate existing UUID strings against the format

When you'll reach for it: Seeding a database with test records, creating idempotency keys for API requests, generating demo data, writing fixture files.

5. Base64 Encoder/Decoder

URL: devplaybook.cc/tools/base64

Base64 is everywhere in web development: Authorization headers, JWT payloads, embedded images (data:image/png;base64,...), email attachments. The Base64 tool handles encoding and decoding in both directions.

Why it's essential:

  • Encode text to base64 or decode base64 to text instantly
  • Handles URL-safe base64 (replaces + and / with - and _)
  • Image to base64 conversion for embedding assets in CSS or HTML
  • Works with binary data, not just ASCII text

When you'll reach for it: Debugging Authorization: Basic headers (which are just base64(username:password)), inspecting JWT payloads manually, converting small images for inline use.

# Decode an Authorization header manually
Authorization: Basic dXNlcjpwYXNzd29yZA==

Decoded: user:password
Enter fullscreen mode Exit fullscreen mode

6. URL Encoder/Decoder

URL: devplaybook.cc/tools/url-encoder

Query parameters with special characters, Unicode in URLs, spaces encoded as %20 or +—URL encoding rules are subtle. The URL Encoder/Decoder handles both directions and shows the full percent-encoding transformation.

Why it's essential:

  • Encode/decode full URLs or individual components
  • Handles Unicode correctly (percent-encodes UTF-8 bytes)
  • Decodes malformed percent-encoding gracefully
  • Useful for constructing query strings manually

When you'll reach for it: Building API integrations with query parameters, debugging redirect URLs, working with OAuth callback URIs, parsing UTM parameters.

# Encode
search query with "special" chars & symbols
→ search%20query%20with%20%22special%22%20chars%20%26%20symbols

# Decode
https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world
→ https://example.com/search?q=hello world
Enter fullscreen mode Exit fullscreen mode

7. Hash Generator

URL: devplaybook.cc/tools/hash-generator

Checksums, content hashes, HMAC verification, password hashing comparisons—hashing comes up constantly in security and systems work. The Hash Generator supports MD5, SHA-1, SHA-256, SHA-384, and SHA-512.

Why it's essential:

  • Compute hashes of any text string instantly
  • Verify checksums for file integrity
  • Compare expected vs. computed HMAC values during webhook verification
  • Supports all major hash algorithms in one place

When you'll reach for it: Verifying a downloaded file's checksum, debugging webhook signature validation, understanding password storage formats, computing content hashes for cache-busting.

// Typical webhook verification
const expectedSig = req.headers['x-webhook-signature'];
const computedSig = hmac_sha256(webhookSecret, req.body);
// Paste your payload + secret into the Hash Generator to verify manually
Enter fullscreen mode Exit fullscreen mode

8. API Request Builder

URL: devplaybook.cc/tools/api-request-builder

Sometimes you just need to fire a quick API request without opening Postman or writing a curl command. The API Request Builder is a browser-based HTTP client that handles GET, POST, PUT, PATCH, and DELETE with custom headers, query params, and request bodies.

Why it's essential:

  • No installation or sign-in required
  • Full header editor—add Authorization, Content-Type, custom headers
  • JSON request body editor with syntax highlighting
  • Response panel shows status code, headers, and formatted response body
  • Works for public and localhost APIs

When you'll reach for it: Quick endpoint testing during development, verifying a third-party API before integrating it, checking authentication headers, exploring REST APIs from documentation.

9. Cron Expression Generator

URL: devplaybook.cc/tools/cron-generator

Cron syntax is powerful but not intuitive. 0 9 * * 1-5 is "9 AM every weekday"—but writing that from memory under pressure is error-prone. The Cron Generator translates between cron syntax and human-readable descriptions in both directions.

Why it's essential:

  • Type a description and get the cron expression
  • Paste a cron expression and get a plain English explanation
  • Shows the next 5 scheduled run times
  • Supports standard 5-field and extended 6-field (with seconds) formats

When you'll reach for it: Setting up scheduled jobs, writing cron expressions for CI/CD pipelines, configuring cloud scheduler jobs (AWS EventBridge, GCP Cloud Scheduler, Vercel Cron), debugging unexpected job schedules.

"Every day at midnight UTC"     → 0 0 * * *
"Every 15 minutes"              → */15 * * * *
"First of every month at 6 AM"  → 0 6 1 * *
"Every weekday at 9:30 AM"      → 30 9 * * 1-5
Enter fullscreen mode Exit fullscreen mode

10. Password Generator

URL: devplaybook.cc/tools/password-generator

Generating secure random passwords comes up constantly: provisioning test accounts, creating API secrets, generating temporary credentials. The Password Generator creates cryptographically random passwords to your exact specification.

Why it's essential:

  • Configurable length (8–128 characters)
  • Toggle character sets: uppercase, lowercase, numbers, symbols
  • Excludes visually ambiguous characters (0, O, l, 1) option
  • Generates multiple passwords at once for batch provisioning
  • All generation happens in the browser—passwords never transmitted

When you'll reach for it: Creating test account credentials, generating API keys for demo environments, provisioning service accounts, creating memorable but secure passwords.

Honorable Mentions

These didn't make the top 10 but belong in your bookmark folder:

Tool Use Case
SQL Formatter Beautify minified SQL queries
JSON to TypeScript Convert JSON payloads to TypeScript interfaces
Unix Timestamp Converter Convert between Unix timestamps and human-readable dates
String Case Converter Convert between camelCase, snake_case, PascalCase, kebab-case
Markdown Preview Preview markdown with syntax highlighting before publishing
Git Commit Generator Write conventional commit messages
IP Geolocation Look up geolocation data for any IP address

Why Browser-Based Tools Win

Every tool on this list runs entirely in the browser:

  • No installation — works immediately on any machine, including locked-down corporate laptops
  • No account — no email, no password, no waiting for an activation email
  • Privacy — your tokens, API keys, and passwords don't travel to a server
  • Accessible anywhere — if you can open a browser, the tool works

For most daily debugging tasks, the overhead of opening a desktop app or a terminal outweighs any benefit. A tool that's one click away gets used; a tool that requires three setup steps gets skipped.

Building Your Dev Toolkit

The most effective approach: bookmark a small set of tools you use weekly and actually remember they exist. A shorter list you consistently use beats a comprehensive list you've forgotten about.

Start with the three you'd reach for most:

  1. JSON Formatter — the one you'll use every single day
  2. JWT Decoder — essential for anyone working with authentication
  3. Regex Tester — saves debugging time on every form validation or data-parsing task

Add the rest as you encounter use cases. All 10 tools above (plus the honorable mentions) are available at devplaybook.cc/tools.

Want to go deeper? Our Complete HTTP Status Codes Reference covers every status code for REST API development. The Regex Cheat Sheet has 30+ ready-to-use patterns for common validation tasks.

使用以下連結支持我們：Cloudflare | DigitalOcean

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)