DEV Community

Danny Cranmer
Danny Cranmer

Posted on

10 Developer Tools You Didn't Know You Could Run Entirely in Your Browser

Every developer has a handful of tasks that interrupt their flow — decoding a JWT from a staging environment, formatting a messy JSON API response, figuring out what a cron expression actually means. You Google it, click the first result, and hope the sketchy-looking site does not steal your data.

Here are 10 common developer tasks you can handle entirely in your browser — no installs, no server requests, no data leaving your machine. I have been using DevToolbox for these, which runs everything client-side.


1. Format and Validate JSON

The scenario: You hit a REST API and get back a 400-character single-line JSON blob. You need to find a nested field buried three levels deep.

Instead of piping through python -m json.tool in the terminal, paste it into a JSON Formatter. You get syntax highlighting, collapsible nodes, and instant validation. If the JSON is malformed, it tells you exactly where the error is.

Pro tip: This is especially useful when debugging webhook payloads — Stripe, GitHub, Twilio — where the JSON can be deeply nested and hard to read raw.


2. Encode and Decode Base64

The scenario: You are setting up a Kubernetes secret and need to base64-encode a database connection string. Or you received a base64 blob in an email header and need to decode it.

The Base64 Encoder/Decoder handles text and file encoding. It also supports URL-safe Base64, which matters when you are stuffing tokens into query parameters.

Pro tip: Drag and drop a file directly onto the page to encode it — useful for embedding small images as data URIs in CSS.


3. Decode JWTs Without Exposing Them

The scenario: A user reports an auth issue. You grab their JWT from the logs and need to check the claims — expiry, issuer, roles. The catch: this is a production token containing user data.

With a JWT Decoder that runs in-browser, the token never hits a third-party server. You see the header, payload, and signature broken out with color coding and human-readable timestamps. It flags expired tokens automatically.

Pro tip: This is critical for debugging OAuth flows. Check the aud and iss claims first — misconfigured audience is the #1 cause of "valid token, still 401" issues.


4. Test Regular Expressions with Live Feedback

The scenario: You need to extract email addresses from a log file, or validate phone numbers in a form. You have a regex that is almost right but matches too much.

The Regex Tester highlights matches in real time as you type. It shows capture groups, flags, and has a built-in cheat sheet for when you forget the difference between \b and \B.

Pro tip: Test your regex against edge cases before putting it in production code. Paste in 10-15 real-world examples to catch the weird ones — email addresses with plus signs, phone numbers with extensions.


5. URL Encode/Decode Query Parameters

The scenario: You are building a redirect URL with query parameters that contain special characters — maybe a callback URL inside another URL. Something is double-encoded and the API returns a 400.

The URL Encoder/Decoder lets you encode and decode individual components or full URLs. It handles the edge cases that trip people up, like spaces becoming %20 vs +.

Pro tip: When debugging OAuth redirect issues, decode the full authorization URL to see all the parameters clearly. Half the time the bug is a malformed redirect_uri.


6. Generate Hashes for Integrity Checks

The scenario: You are publishing a script and need to provide a SHA-256 checksum so users can verify the download. Or you need a quick MD5 hash for a cache key.

The Hash Generator computes SHA-256, SHA-1, MD5, and more from any text input, all in-browser using the Web Crypto API.

Pro tip: Use SHA-256 hashes as cache-busting keys for static assets. Hash the file contents, append to the filename, and you have perfect cache invalidation without timestamp-based heuristics.


7. Convert Colors Between Formats

The scenario: The designer hands you a HEX color. Your CSS framework wants HSL. The accessibility audit needs you to check contrast ratios against WCAG standards.

The Color Picker converts between HEX, RGB, and HSL instantly. It includes a contrast ratio checker and generates shades and tints from any base color.

Pro tip: WCAG AA requires a contrast ratio of at least 4.5:1 for normal text. Instead of eyeballing it, paste your background and foreground colors and get the exact ratio.


8. Convert Unix Timestamps to Human Dates

The scenario: You are tailing a log and every timestamp is a Unix epoch — 1710849600. Is that today? Yesterday? You have no idea without converting it.

The Unix Timestamp Converter does bidirectional conversion between epoch timestamps and human-readable dates. It auto-detects whether you pasted seconds or milliseconds, and shows a live ticking clock of the current epoch time.

Pro tip: API responses from different services mix seconds and milliseconds. A 13-digit number is milliseconds (JavaScript-style), 10 digits is seconds (Unix-style). The converter handles both automatically.


9. Build Cron Expressions That Actually Make Sense

The scenario: You need a cron job that runs at 2:15 AM on the first Monday of every month. You think the expression is 15 2 1-7 * 1 but are not entirely sure whether the day-of-month and day-of-week fields combine with AND or OR.

The Cron Expression Builder lets you construct expressions visually and shows the next scheduled run times so you can verify the schedule before deploying.

Pro tip: Always check the next 5 run times before committing a cron expression. The interaction between day-of-month and day-of-week fields is the most common source of cron bugs.


10. Diff Two Text Blocks Side by Side

The scenario: You are comparing two config files — staging vs production — and need to spot the differences. Or you are reviewing what changed in a .env file before deploying.

The Diff Checker gives you a side-by-side comparison with line-level and character-level highlighting. Paste two blocks of text and see exactly what changed.

Pro tip: Use this for comparing API responses before and after a code change. Paste the old response on the left, the new one on the right, and verify only the expected fields changed.


Why Browser-Based Matters

All 10 of these tools run entirely in your browser using JavaScript. No server calls, no data collection, no accounts. You can verify this by opening DevTools and checking the Network tab — zero requests after the page loads.

This matters when you are handling:

  • Production JWTs with user data
  • API keys in Base64
  • Config files with secrets
  • Customer data in JSON payloads

The tools even work offline once loaded.


Try Them Out

All 10 tools are at DevToolbox — free, no signup, no ads.

If you find them useful, consider buying me a coffee to support development.

What other browser-based tools would save you time? I am building based on what developers actually need — drop a comment.

Top comments (0)