"На моей машине всё работает" — фраза, которая стала мемом, но до сих пор вызывает нервный тик у QA-инженеров и тимлидов. Отладка и тестирование часто воспринимаются как скучная обязаловка, которую хочется пропустить ради "написания фич". Но именно на этом этапе ломаются копья (и продакшен).
Сегодня в подборке — восемь инструментов, которые делают процесс поиска багов и написания тестов менее болезненным. Здесь есть всё: от утилит для быстрой подмены бэкенда и генерации тестовых файлов до мощных сканеров безопасности и средств отладки нативных модулей React Native.
Mock (dhuan) — когда нужно сымитировать API за 30 секунд
Частая ситуация: фронтенд уже готов, а бэкенд-разработчики только обсуждают архитектуру базы данных. Чтобы не простаивать, нужно быстро сымитировать ответы сервера. Утилита Mock решает эту задачу максимально просто.
Это language-agnostic инструмент, который позволяет поднять мок-сервер через простую конфигурацию или даже командную строку. Его киллер-фича — возможность использовать обычные shell-скрипты как обработчики запросов. Хотите вернуть JSON с текущей датой или случайным числом? Просто напишите однострочный скрипт. Это идеальный вариант для быстрого прототипирования и тестов, когда разворачивать полноценный сервер слишком долго.
TanStack Devtools — ультимативный центр управления состоянием
Если вы используете библиотеки TanStack (Query, Router, Table), то этот инструмент вам просто необходим. TanStack Devtools — это не просто "еще одна консоль", а полноценная панель управления состоянием вашего приложения.
Инструмент позволяет в реальном времени видеть, что происходит с вашими запросами: какие данные кэшируются, какие устарели, а где произошла ошибка. Вы можете вручную инвалидировать кэш, перезапускать запросы и инспектировать сложные объекты данных. Поддерживается работа с React, Solid, Vue и даже Svelte. Это как рентген для вашего приложения, который показывает все скрытые процессы.
React Native Harness — нативные тесты с удобством Jest
Тестирование React Native приложений всегда было болью. Либо вы пишете JS-тесты, которые не видят нативных проблем, либо погружаетесь в мир нативного тестирования iOS/Android с их сложными инструментами. React Native Harness пытается объединить лучшее из двух миров.
Этот инструмент позволяет писать тесты с привычным синтаксисом Jest (describe, it), но запускать их в реальном нативном окружении (на симуляторах или реальных устройствах). Это значит, вы можете тестировать TurboModules и нативные API, используя JavaScript. Идеально для авторов библиотек и тех, кому нужна уверенность в работе приложения на реальном железе, а не только в среде Node.js.
Trivy — швейцарский нож для поиска уязвимостей
Безопасность — это то, о чем часто вспоминают в последнюю очередь. Trivy от Aqua Security делает аудит настолько простым, что его можно встроить в любой CI/CD пайплайн без боли. Это универсальный сканер уязвимостей.
Он умеет сканировать вообще всё: образы контейнеров, файловые системы, git-репозитории, конфигурации Kubernetes и даже виртуальные машины. Trivy находит устаревшие пакеты с известными CVE, секреты (ключи, пароли), случайно оставленные в коде, и ошибки в конфигурации IaC (Infrastructure as Code). Если вы деплоите что-то в продакшен, прогон через Trivy должен стать обязательным ритуалом.
FileMock — генератор "битых" и тяжелых файлов для тестов
Тестирование формы загрузки файлов — это отдельный вид пытки. Где взять PDF на 50 Мб? Как быстро найти "битую" картинку, чтобы проверить обработку ошибок? FileMock — это бесплатный сервис, который генерирует такие файлы на лету прямо в браузере.
Вам не нужно искать мусорные файлы в интернете или создавать их вручную через командную строку. Просто выбираете тип (изображение, видео, документ), задаете нужный размер (хоть 1 Гб) и скачиваете. Сервис умеет создавать файлы разных форматов, что спасает кучу времени при проверке валидации форм и стресс-тестировании хранилищ.
Web Codegen Scorer — проверяем качество кода, написанного нейросетью
С приходом GitHub Copilot и ChatGPT кода стало больше, но его качество вызывает вопросы. Команда Angular выпустила инструмент Web Codegen Scorer, чтобы попытаться измерить эффективность кода, сгенерированного LLM.
Это утилита для бенчмаркинга, которая оценивает качество веб-кода (HTML, CSS, JS) по ряду метрик. Она полезна не столько для ежедневной разработки, сколько для тех, кто внедряет AI-инструменты в процессы компании и хочет понять, какая модель справляется лучше. Инструмент помогает проводить сравнительные тесты и выбирать оптимальные промпты или модели для генерации кода.
Automated Accessibility Example — шпаргалка по a11y-тестам
Доступность (Accessibility или a11y) часто игнорируется, потому что разработчики просто не знают, как её тестировать. Этот репозиторий — отличная шпаргалка и пример того, как внедрить автоматизированные проверки доступности в проект.
Здесь собраны примеры использования axe-core и других библиотек для автоматического поиска проблем с контрастностью, отсутствующими лейблами и навигацией с клавиатуры. Это не столько готовая библиотека, сколько "золотой стандарт" и набор рецептов, которые можно скопировать в свой проект, чтобы сделать его дружелюбным для всех пользователей.
Vite Console Forward Plugin — выводим логи из браузера в терминал
Отладка на мобильных устройствах или в средах, где нет доступа к DevTools браузера, может превратиться в гадание на кофейной гуще. Vite Console Forward Plugin решает эту проблему, пересылая все логи из браузера прямо в терминал, где запущен Vite.
Это маленький, но невероятно полезный плагин. Если вы тестируете сайт на телефоне в той же Wi-Fi сети или отлаживаете специфичный баг в WebView, вы увидите все console.log и ошибки прямо в консоли своего редактора кода. Простая вещь, которая экономит нервы и время на подключение удаленных отладчиков.
🔔 Если статья была полезной, жмите на колокольчик на главной странице канала, чтобы быть в курсе новых публикаций, и подпишитесь, если ещё не подписаны! 📰