Last time we talked about the portal site formatnow.dev. Today, let's dive into one of its sub-sites – Dev Toolbox (dev.formatnow.dev). The name sounds pretty simple, right? It's exactly a "developer toolbox," packing all those little daily development tasks into one kit. I spent half a day trying them out one by one, going through all 12 tools. Let me share my real thoughts.
The positioning is very clear. As a developer, the functions I need daily are just a few: JSON formatting, some routine encoding and decoding – things that assist my everyday development. Having too many functions is actually meaningless to me. To be honest, this site isn't that different in functionality from the JSON.cn I usually use. The interface might be a bit cooler, but what's good is that I can quickly find other useful online tools through it without having to search everywhere. I think that's a great point.
First Impression
As soon as the page loads, that purple-tinted frosted glass navigation bar lights up. The overall style is consistent with the portal site – dark theme, matte glass texture – giving it a real developer-tool vibe. On the left is a "Quick Switch" menu listing all 12 tools, letting you jump to any of them. In the top-right corner is a Chinese/English toggle button. I tried it, and the English translation is quite complete, not a sloppy machine translation.
Going Through the 12 Tools One by One
1. JSON Formatter – Makes viewing formatted JSON comfortable
Those of you working on backends or calling APIs definitely deal with JSON every day. Sometimes, getting a minified JSON blob from an interface can make your eyes hurt. I pasted a JSON data snippet into the input box:
{"name":"Zhang San","age":30,"email":"test@example.com","active":true}
Clicking the Format button instantly arranged it neatly, with proper indentation and line breaks. There's also a Minify function to compress it into a single line, and Validate to check if the JSON syntax is correct. When debugging interfaces or checking logs during development, this tool is pretty handy.
2. Base64 Encoder / Decoder
Base64 encoding and decoding – commonly used on both frontend and backend. I tried the string "Hello FormatNow Dev Toolbox!". Clicking Encode gave the result instantly, and clicking Decode restored the original text. The two-way verification works perfectly. When you need to handle Base64 images or check token fields in APIs, just switch to Dev Toolbox and do it, no need to open some bulky tool.
3. URL Encoder
I use this quite often – when calling API endpoints or writing crawlers, special characters in URL parameters need encoding. I tried "Hello World" (Chinese characters). Encoding turned them into %E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C, and decoding returned the correct Chinese. Mixed Chinese and English works fine too.
4. Regex Tester – Know immediately if your regex is wrong
Regular expressions – honestly, I worry every time I write one. This tool has a real-time testing area. Write the regex pattern on the left, paste the test text on the right, and click Test to see the matches. I tried matching Format\w+ against "Hello FormatNow and FormatNowDev" – it matched two results. What's the benefit? When writing log parsing rules, doing text filtering, or form validation, if you can't visually figure out the matching logic, run it here to get clarity.
5. Timestamp Converter – Convert between timestamps and dates
Unix timestamps – 1551398400 can stump a lot of people – "What day is that exactly?" I tested the forward conversion: input 1700000000, click Test, and it immediately shows 2023/11/15 6:13:20 AM. Going backward is just as smooth – pick a date and it converts back to a timestamp. There's also a "Current Time" button showing the current timestamp at a glance. Super useful when passing time parameters in API calls.
6. Hash Generator – MD5, SHA-256, SHA-512 with one click
Data integrity verification, password hashing – hashes are used everywhere in development. I typed a short piece of text, clicked Generate, and the MD5, SHA-256, and SHA-512 hash results appeared simultaneously. No need to remember command lines or go through multi-step online tool processes – see a direct comparison of three algorithm results on one page.
7. JWT Parser – Decode a token to see what's inside
JWT tokens look like a bunch of gibberish, but they actually contain a Header and Payload. The page comes with a sample JWT. I clicked Decode, and the signing algorithm (HS256) from the Header and user info (sub, name, iat) from the Payload were all displayed in an expanded view. When debugging SSO logins or checking user authentication tokens, decoding gives you an immediate view of what's inside.
8. SQL Formatter – A lifesaver for writing SQL
This is one of my favorite tools. When writing SQL, sometimes you have JOIN after JOIN and a pile of WHERE conditions – if the indentation is messed up, it's unreadable. I clicked Load Example, and a multi-table join SQL template appeared:
SELECT ...
FROM Users u
JOIN Orders o ON u.id = o.user_id
...
Clicking Format instantly rearranged everything – keywords in uppercase, indentation aligned, subqueries indented separately. No need to manually adjust formatting – it becomes clean in one second. It supports multiple SQL dialects: MySQL, PostgreSQL, MariaDB, BigQuery, T-SQL, PL/SQL. You can also customize keyword case, indentation spaces, and line spacing. Honestly, since I write a lot of SQL, I might open this tool frequently.
9. Code Formatter – Code formatting
Supports formatting for HTML, CSS, and JavaScript. There's a default HTML example. I clicked Format to try it – all indentation aligned, tag nesting relationships clear at a glance. When your frontend code gets messy, paste it in, click once, and it aligns perfectly. The Minify function can compress it back into one line, which is also useful for reducing production code size.
10. JSON to TypeScript – Convert interface data directly to type definitions
In frontend-backend separated development, the backend often returns a JSON blob, and the frontend has to manually write TypeScript types. With this tool, paste the JSON in, click Convert to TypeScript, and the interface definition is automatically generated. I tried it with a JSON object – it converted it to an interface definition, with all field types inferred correctly (strings automatically typed as string, numbers as number). If you need to quickly coordinate with backend, this tool can save a lot of manual typing of interface types.
11. API Tester – Send requests when you need to
It's basically a lightweight version of Postman. I tried a GET request to https://httpbin.org/get. Clicking Send returned a 200 status code, with the full response body displayed – request headers, source IP, parameters all there, taking only 40ms. It also supports POST, PUT, DELETE, PATCH methods. There are four tabs – Params, Headers, Body, Auth – for configuring request parameters. For simple API testing, you don't need to switch to Postman; this handles it.
12. Format Converter – Convert between JSON, YAML, and XML
A tool for converting between the three data formats. I put in a JSON snippet, clicked Auto Convert, and the XML format came out. Need to read a config file from YAML? Need to convert between JSON and XML? Just click. Each of the three formats has its use cases in different projects, and this tool connects them together.
Overall Impressions
I ran through all 12 tools – no gimmicks. They produce results when they should, format when they should, decode when they should. The UI style is consistent, the operation logic is clear, and each tool gives results with a single button click – no need to read manuals or tutorials.
What pleasantly surprised me were SQL Formatter and API Tester – their functionality is quite complete. Especially SQL Formatter – it even has PostgreSQL and BigQuery dialects, which is usually a configuration option found in separate paid tools. The response time display in API Tester is also a nice touch – seeing that 40ms data gives you a clear idea of the interface response speed.
If I had to mention a small regret – there's no data interoperability between tools yet. For example, the JSON response from API Tester can't be sent directly to JSON Formatter for formatting with one click; you have to copy and paste yourself. However, considering this is a static site without global state management, that's normal. Copying and pasting takes just a second.
Who is it for?
Frontend and backend developers, API debugging, data processing, and anyone who occasionally needs to check a timestamp or hash value. Especially for those who write a lot of SQL, or those who frequently switch between frontend and backend during collaborative debugging – having this toolbox as a shortcut in your bookmarks is pretty convenient.
Next time I'll test another sub-site of FormatNow. Any guesses which one?
Top comments (0)