Saya Bikin 6 Dev Tools Gratis yang Akhirnya Saya Pakai Tiap Hari
Tiap hari kerja, pasti ada momen kecil yang bikin nyebelin: JSON dari API ke-paste berantakan, error parse yang nggak jelas posisinya, atau harus nyari "base64 encode online" buat ke sekian kalinya. Lalu situs yang muncul penuh iklan, minta cookie, dan — yang paling bikin gondok — nyuruh saya nge-paste token produksi ke server entah punya siapa.
Saya capek. Jadi saya bikin sendiri. Enam tool kecil, semuanya jalan 100% di browser, nol iklan, nol upload. Buka, tempel, beres. Ini cerita soal apa yang saya bangun dan kenapa tiap tool ini ada.
Aturan mainnya: nggak ada yang dikirim ke mana-mana
Sebelum masuk ke tool-nya, satu prinsip yang saya pegang dari awal: nggak ada satu pun data kamu yang keluar dari browser. Nggak ada fetch ke server, nggak ada logging diam-diam, nggak ada "kami menghargai privasi Anda" bohongan.
Kenapa ini penting? Karena tool kayak gini sering dipakai buat hal sensitif — payload JSON yang ada data user, token autentikasi, kredensial. Tiap kali kamu nge-paste itu ke tool online random, kamu lagi percaya sama orang yang nggak kamu kenal. Tool saya jalan sepenuhnya di mesin kamu (semua logika di sisi client), jadi nggak ada yang perlu dipercaya. Mau dibuktiin? Buka tab Network, nggak akan ada request keluar. 😎
Semua tool ada di satu tempat: congfandi.com/dev-tools.
1. JSON Prettier — rapiin JSON berantakan dalam sekejap
API ngembalikin JSON yang dipadetin jadi satu baris panjang? Tempel ke JSON Prettier dan langsung rapi dengan indentasi dan syntax highlighting yang enak dibaca.
Yang bikin beda dari yang lain:
- Auto-format sambil kamu ngetik — nggak perlu pencet tombol apa-apa.
- Pilihan indent 2 spasi, 4 spasi, atau tab, plus tombol Minify kalau mau dipadetin lagi.
- Kalau JSON-nya rusak, dia nggak cuma bilang "invalid" — dia nunjukin baris dan kolom persis di mana masalahnya, plus tebakan penyebabnya (koma nyangkut, kutip kurang, dll).
Buat saya ini jadi tab yang nyaris selalu kebuka.
2. JSON Verify — cari titik error yang bikin pusing
Pernah dapat JSON 2000 baris yang gagal di-parse dan kamu harus nyari di mana satu koma sialan itu? JSON Verify dibikin khusus buat itu.
Tempel JSON, dia kasih vonis valid/invalid. Kalau invalid, dia nunjuk karakter persisnya — dikotakin, dikasih panah berlabel, lengkap dengan baris dan kolom.
Kenapa ini perlu tool sendiri? Karena pesan error JSON.parse di browser itu nggak konsisten — Chrome versi baru sering nggak ngasih posisi sama sekali. Jadi saya nulis scanner JSON sendiri biar penunjuknya selalu akurat, nggak peduli browser apa yang kamu pakai.
3. JSON Compare — beda dua JSON tanpa drama urutan key
Mau bandingin dua respons API, atau config sebelum vs sesudah? Tempel keduanya ke JSON Compare.
Yang penting: dia bandingin berdasarkan data, bukan teks. Urutan key beda? Format beda? Nggak dianggap beda. Yang dilaporin cuma perbedaan yang beneran penting, lengkap dengan path tiap perubahan (profile.social.x, projects[1].stars, dll) dan label jelas: ditambah, dihapus, atau diubah.
Jauh lebih waras daripada nempelin dua file ke diff tool teks yang langsung merah semua cuma gara-gara beda urutan.
4. Base64 — encode & decode, aman buat Unicode
Klasik tapi selalu kepake. Base64 buat encode teks ke Base64 atau decode balik, live sambil ngetik.
Detail yang sering dilupain tool lain:
- Aman Unicode. Emoji, huruf beraksen, aksara non-Latin — semua selamat. (
btoabawaan browser bakal rusak di sini; saya lewatin lewat byte UTF-8 dulu.) - Mode URL-safe buat token yang dipakai di URL (
+/jadi-_, padding dibuang), dan decoder-nya nerima dua-duanya. - Tombol Swap buat muterin hasil balik jadi input — gampang ngecek bolak-balik.
5. Auth Header — baca & bikin header Authorization
Ini yang paling sering saya pakai pas debugging API. Auth Header kerja dua arah.
Decode (mode default): tempel sebuah header — boleh Authorization: Bearer ..., boleh cuma value-nya:
- Bearer: kalau itu JWT, dia decode dan rapiin header + payload-nya jadi JSON yang kebaca, plus nunjukin signature-nya. Jadi nggak perlu lagi buka situs decode JWT yang penuh iklan.
- Basic: dia balikin username dan password dari Base64-nya (password disembunyiin, ada tombol mata buat nampilin).
Encode: bikin header siap-tempel dari sebuah token (Bearer) atau dari username + password (Basic auth).
Dan ya — kredensialnya nggak ke mana-mana. Buat tool yang megang token, ini bukan fitur tambahan, ini wajib.
6. JSON to TS — JSON jadi TypeScript interface otomatis
Favorit saya, dan yang paling ngirit waktu. Tempel JSON apa pun ke JSON to TS, langsung dapat TypeScript interface yang rapi dan siap pakai.
Dia nggak cuma mapping tipe asal-asalan — dia beneran nyimpulin bentuknya:
- Objek nested jadi interface sendiri (
profile→Profile,social→Social). - Array of objects digabung jadi satu bentuk — key yang nggak ada di sebagian elemen otomatis jadi opsional (
archived?: boolean), tipe yang beda di-union. - Null & nullable ketangani, array campuran jadi union berkurung rapi (
(string | number | null)[]). - Input JSON-nya pun auto-prettify dan berwarna, dan kamu bisa ganti nama root atau milih output
interfacevstype.
Yang tadinya ngetik interface manual sambil bolak-balik liat response, sekarang tinggal tempel-salin. Beneran ngehemat menit-menit yang numpuk jadi jam.
Kenapa saya repot-repot bikin ini?
Jujur? Karena tool yang ada bikin saya kesel, dan saya pengen sesuatu yang:
- Cepat — kebuka instan, nggak ada loading, nggak ada cookie banner.
- Privat — semua di browser, beneran nggak ada yang diupload.
- Beneran nolong — penunjuk error yang akurat, penggabungan tipe yang pinter, hal-hal kecil yang nunjukin tool ini dibikin sama orang yang beneran ngerasain masalahnya.
Semuanya gratis, nggak perlu daftar, nggak akan tiba-tiba dipasangin paywall. Cobain di congfandi.com/dev-tools dan bookmark yang sering kamu pakai.
Kalau ada tool ke-7 yang kamu pengen ada — atau nemu yang aneh di salah satunya — kabarin saya ya. Tool-tool ini lahir dari masalah saya sendiri, jadi saya selalu seneng dengar masalah kamu juga. 🚀