Інструменти розробника

Браузерний набір інструментів для дрібних завдань, що перебивають справжню роботу

Більшість проблем у розробці — великі й цікаві. Ті, що насправді сповільнюють, — ні. Перед вами мініфікована відповідь API, JWT, який не читається, URL, що ламає свій рядок запиту, і регулярний вираз, що майже працює. Жодне з цього не заслуговує залежності, встановлення CLI або вкладки, повної реклами. Вони заслуговують тридцяти секунд і чистого текстового поля.

Це і є вся ідея цієї колекції: єдина сторінка безкоштовних утиліт для розробників, що завантажуються миттєво, працюють повністю у вашому браузері й не просять вас реєструватися. Форматування JSON, Base64, кодування URL, декодування JWT, конвертація кольорів, тестування регулярних виразів, математика часових міток і довідник HTTP-статусів — усе в одному місці. Ви більше не вставляєте дані на перший-ліпший сайт, що видає пошук Google, і не гадаєте, чи логує той сайт вашу інформацію.

Що насправді робить кожен інструмент

Форматувальник JSON перетворює стіну екранованого однорядкового JSON на щось, що людина може проглянути. Скажімо, вебхук спрацював і ваші логи зафіксували сире тіло як один величезний рядок. Вставте, виберіть відступ у два або чотири пробіли — і отримаєте читабельне дерево з підсвіченою синтаксичною помилкою, якщо така є. Він перевіряє й форматує одночасно, тому зайва кома в кінці або ключ без лапок будуть виявлені, а не тихо зламають щось на трьох рівнях глибше у вашому застосунку.

Кодування/декодування Base64 — це робочий кінь, до якого ви постійно звертаєтеся, навіть не помічаючи. Data URI, заголовки Basic Auth, бінарні дані в конфігаційних файлах, сегменти токенів — усе це Base64. Декодуйте значення заголовка, щоб підтвердити, що облікові дані надсилаються саме так, як ви очікуєте, або закодуйте невелике зображення для вбудовування. Інструмент коректно обробляє UTF-8, що важливо, як тільки у вхідних даних з'являється не ASCII.

Інструмент кодування/декодування URL виправляє класичний баг: параметр запиту містить пробіл, амперсанд або знак плюса й тихо ламає ваш запит. Якщо ви будуєте посилання вручну і значення — name=John & Co, вам потрібно екранувати амперсанд до %26, інакше сервер сприйме його як роздільник параметрів. Вставте, закодуйте, скопіюйте. Декодування працює навпаки, коли ви дивитеся на залогований URL, повний відсоткових кодів, і намагаєтеся зрозуміти, що насправді запитувалося.

Інструмент для токенів і важливе застереження

Декодер JWT розбиває токен на три частини, розділені крапками, і показує заголовок і payload як звичайний JSON. При відлагодженні автентифікації це безцінно: перевірте, яким алгоритмом підписано токен, прочитайте sub, переконайтеся, що клейм exp ще не минув, і подивіться, які scopes або ролі шлюз передає клієнту.

Ось що люди часто забувають. Декодування JWT — це не його верифікація. Payload — це просто Base64url, і будь-хто, хто тримає токен, може прочитати кожен клейм у ньому; цей інструмент робить рівно те саме і нічого більше. Він не перевіряє підпис, тому декодований токен говорить вам, що токен стверджує, а не чи він справжній. Ніколи не довіряйте клеймам з декодера для прийняття рішення про авторизацію; це робота вашого сервера з ключем підпису. Використовуйте декодер для розуміння й налагодження, але не для перевірки.

Тестер регулярних виразів замикає коло найдратівливішої утиліти. Напишіть паттерн, вставте зразок тексту і спостерігайте, як збіги підсвічуються в реальному часі під час введення. Групи захоплення перераховані окремо, щоб ви могли переконатися, що група два справді захоплює рік, а не всю дату. Це перевершує цикл редагування-збереження-перезапуску при тестуванні паттерну у вашій кодовій базі й є швидким способом зрозуміти, чому жадібний квантор поглинає більше, ніж ви мали на увазі.

На завершення: конвертер HEX↔RGB перетворює #1a2b3c на rgb(26, 43, 60) і назад, коли токени дизайну й ваш CSS не збігаються. Конвертер Unix-часових міток перетворює 1718900000 на реальну дату і час — це стане в нагоді кожного разу, коли база даних зберігає секунди епохи, а ваші очі їх не читають. А довідник кодів HTTP-статусів рятує від здогадок, 422 чи 409 правильна відповідь, коли API-виклик іде не так.

Локальна обробка — щоб можна було вставляти чутливі дані

Це найважливіше для тих, хто працює з виробничими даними. Кожен інструмент тут виконується на стороні клієнта в JavaScript. Ваші дані ніколи не покидають браузер: жодного завантаження, жодного звернення до сервера, нічого для логування. Це означає, що ви можете вставити реальний токен доступу, щоб перевірити його клейми, декодувати Base64-заголовок, що містить облікові дані, або відформатувати API-відповідь із даними клієнтів — і жодне з цього не перетне мережу. Хочете доказ? Відкрийте інструменти розробника, перегляньте вкладку мережі й вставляйте. Ви не побачите жодного запиту. Для чутливих payloads локальний інструмент — не перевага, це єдиний відповідальний варіант.

Питання та відповіді