Добавьте расширение в Chrome
- Откройте Chrome Web Store и найдите расширение «DevSuite Pro».
- Нажмите «Добавить в Chrome» и подтвердите, нажав «Установить расширение» во всплывающем окне.
Более 64 мощных инструментов для проверки, измерения, захвата, анализа и дизайна веб-страниц прямо в вашем браузере.
Начать очень просто. Установите расширение, откройте любую веб-страницу и получите доступ к 64+ инструментам разработчика из всплывающего окна или плавающей панели. Настройка не требуется.
DevSuite Pro предоставляет 64+ инструментов разработчика для проверки, измерения, дизайна и анализа веб-страниц. Ускорьте свой рабочий процесс с помощью мощных функций, встроенных прямо в ваш браузер.
Наведите курсор на любой элемент, чтобы мгновенно увидеть его CSS-стили и отредактировать их в реальном времени, что упрощает отладку и настройку дизайна.
Узнать больше →Нажмите на любой элемент, чтобы проверить его свойства, размеры, отступы, шрифты и цвета. Мгновенно поймите структуру страницы, не открывая DevTools браузера.
Узнать больше →Измеряйте расстояния, проверяйте выравнивание и добавляйте пиксельные линейки и направляющие на любую веб-страницу для идеального выравнивания вашего дизайна.
Узнать больше →Выбирайте цвета любого элемента на странице и копируйте значения HEX, RGB или HSL в буфер обмена одним кликом.
Узнать больше →Делайте скриншоты всей страницы или видимой области на любом веб-сайте и скачивайте их мгновенно — идеально для обмена дизайном и сообщения об ошибках.
Узнать больше →Предварительно просмотрите любую веб-страницу на различных размерах экрана и разрешениях устройств для тестирования адаптивного дизайна, не покидая браузер.
Узнать больше →Инспекция и редактирование CSS-стилей в реальном времени
Отладка и управление CSS-анимациями в реальном времени
Преобразуйте CSS любого элемента в классы утилит Tailwind
Визуализируйте полную структуру макета любой страницы
Получайте категоризированные Tailwind-классы для любого элемента
Визуальное отображение HTML-дерева поверх любой страницы
Обнаружение компонентов React, Vue, Angular и Svelte на любом сайте
Drag & Drop для изменения положения любого элемента на странице
Удалите или переключите видимость любого элемента
Экспортируйте любой элемент в HTML, CSS или JSON
Генерируйте компоненты React, Vue и Svelte из любого элемента
Захватывайте видимую область или полностраничные скриншоты
Просматривайте, выбирайте и скачивайте все изображения с любой веб-страницы
Найдите, просматривайте и скачивайте все SVG на любой странице
Замените любое изображение на странице своим собственным
Мгновенно создавайте QR-коды для любого URL или текста
Пиксельно точные линейки, направляющие и измерения на любой странице
Предварительный просмотр нескольких viewport устройств одновременно
Измеряйте точные расстояния в пикселях между любыми двумя элементами
Визуализируйте каждый контекст наложения и слой z-index
Инспектируйте CSS Grid и Flexbox-макеты с помощью визуальных overlays
Симуляция зон внимания пользователей на любой странице
Выборочная очистка cache, cookies, localStorage и sessionStorage
Определите каждую технологию за любым сайтом
Комплексный SEO-аудит: meta tags, заголовки, OpenGraph и многое другое
Автоматический аудит WCAG: contrast ratio, alt text, ARIA и многое другое
Нажмите на любой текст на любой странице и редактируйте его мгновенно
Меняйте любой шрифт глобально или для отдельных элементов из Google Fonts
Найдите каждый шрифт, используемый на любой веб-странице
Точный eyedropper для значений цвета в форматах HEX, RGB и HSL
Извлеките полную цветовую палитру любой веб-страницы
Мгновенно применяйте dark mode к любому сайту
Мгновенно включайте или отключайте JavaScript для текущей вкладки
Просматривайте, редактируйте, добавляйте и удаляйте cookies для любого домена
Просматривайте вывод консоли во всплывающей панели — без DevTools
Мониторинг всех сетевых запросов в режиме реального времени
Просмотр, редактирование, добавление и удаление записей localStorage и sessionStorage
Сканируйте все ссылки на странице и находите нерабочие
Мгновенная панель производительности: время загрузки, статистика DOM и ресурсы
Форматируйте, минифицируйте и проверяйте JSON в один клик
Кодируйте строки в Base64 и обратно мгновенно
Кодируйте и декодируйте строки URL в один клик
Кодируйте и декодируйте HTML сущности мгновенно
Экранируйте и отмените экранирование строк для кода
Преобразуйте изображения в Base64 Data URI и обратно
Мгновенно декодируйте JSON Web Tokens
Генерируйте массовые идентификаторы UUID v4
Вычисляйте хеши MD5, SHA-1, SHA-256, SHA-384, SHA-512
Генерируйте криптографически стойкие пароли
Тестируйте регулярные выражения в реальном времени с выделением совпадений
Преобразуйте Unix, ISO и человекочитаемые даты
Сравните два текстовых блока построчно
Проверьте коэффициент контрастности WCAG для любых двух цветов
Преобразуйте HEX, RGB, HSL, HSV и OKLCH мгновенно
Извлеките доминирующую палитру из любого изображения
Получите селекторы CSS и XPath для любого элемента
Тестируйте кросс-ориджинные запросы и проверяйте заголовки CORS
Захватываем кадры WebSocket в реальном времени
Сканируйте страницу на наличие сломанных изображений мгновенно
Автоматически заполняйте формы реалистичными тестовыми данными
Преобразуйте между CSV и JSON в любом направлении
Форматируйте, проверяйте и просматривайте XML с выделением синтаксиса
Форматируйте SQL запросы красиво
Сохраняйте веб-страницы как чистые PDF
Выберите лучший план для вашего рабочего процесса. Начните бесплатно, обновляйтесь в любое время.
Распространенные вопросы о функциях и использовании расширения DevSuite Pro. Если у вас есть вопрос, ответ может быть уже ниже.
Посетите Chrome Web Store, найдите «DevSuite Pro», нажмите «Добавить в Chrome» и подтвердите, выбрав «Установить расширение». После установки значок расширения появится на панели инструментов вашего браузера. Нажмите на него, чтобы мгновенно получить доступ к 64+ инструментам разработчика.
Бесплатные инструменты (20+) доступны всем без лицензии. Инструменты Pro отмечены золотым значком PRO и требуют активной лицензии Pro для использования. Во всплывающем окне вы можете увидеть, какие инструменты бесплатные, а какие pro — у бесплатных инструментов нет значка замка, в то время как pro инструменты выглядят немного приглушенными, пока вы не активируете свою лицензию.
Некоторые веб-сайты имеют строгую политику безопасности контента (CSP), которая блокирует определенные действия браузерных расширений. Это особенно часто встречается на сайтах банков и государственных учреждений. Кроме того, внутренние страницы Chrome (chrome://) не позволяют расширениям запускать контентные скрипты.
Нет. Все изменения, внесенные такими инструментами, как Переместить элемент, Редактор текста, Удалить/Скрыть элемент и CSS Inspector, являются временными. Они влияют только на то, что вы видите в своем браузере в данный момент. Перезагрузка страницы вернет все в исходное состояние.
Откройте всплывающее окно DevSuite Pro, нажмите на значок настроек в правом верхнем углу. Прокрутите вниз до раздела «Лицензия», вставьте лицензионный ключ в поле ввода и нажмите «Активировать». Если ключ действителен, значок изменится с FREE на PRO, и все pro-инструменты будут мгновенно разблокированы.
Вы можете переместить панель, перейдя в Настройки и выбрав другое положение боковой панели — сверху, снизу, слева или справа. Вы также можете полностью скрыть панель, отключив параметр «Показывать панель на страницах» в Настройках или нажав Ctrl+Shift+X в любое время.
Нет. DevSuite Pro не собирает, не отслеживает и не передает данные о вашем просмотре сайтов. Все настройки хранятся локально в вашем браузере. Единственный внешний запрос выполняется во время активации лицензионного ключа для проверки ключа на нашем сервере.
Да! DevSuite Pro доступен как в Chrome Web Store, так и в Firefox Add-ons. Он работает в Chrome, Edge, Brave и других браузерах на базе Chromium, а также в Firefox.