Добавьте расширение в Chrome
- Откройте Chrome Web Store и найдите расширение «DevSuite Pro».
- Нажмите «Добавить в Chrome» и подтвердите, нажав «Установить расширение» во всплывающем окне.
Более 71 мощных инструментов для проверки, измерения, захвата, анализа и дизайна веб-страниц прямо в вашем браузере.
Начать очень просто. Установите расширение, откройте любую веб-страницу и получите доступ к 71+ инструментам разработчика из всплывающего окна или плавающей панели. Настройка не требуется.
DevSuite Pro предоставляет 71+ инструментов разработчика для проверки, измерения, дизайна и анализа веб-страниц. Ускорьте свой рабочий процесс с помощью мощных функций, встроенных прямо в ваш браузер.
Наведите курсор на любой элемент, чтобы мгновенно увидеть его CSS-стили и отредактировать их в реальном времени, что упрощает отладку и настройку дизайна.
Узнать больше →Нажмите на любой элемент, чтобы проверить его свойства, размеры, отступы, шрифты и цвета. Мгновенно поймите структуру страницы, не открывая DevTools браузера.
Узнать больше →Измеряйте расстояния, проверяйте выравнивание и добавляйте пиксельные линейки и направляющие на любую веб-страницу для идеального выравнивания вашего дизайна.
Узнать больше →Выбирайте цвета любого элемента на странице и копируйте значения HEX, RGB или HSL в буфер обмена одним кликом.
Узнать больше →Делайте скриншоты всей страницы или видимой области на любом веб-сайте и скачивайте их мгновенно — идеально для обмена дизайном и сообщения об ошибках.
Узнать больше →Предварительно просмотрите любую веб-страницу на различных размерах экрана и разрешениях устройств для тестирования адаптивного дизайна, не покидая браузер.
Узнать больше →Инспекция и редактирование CSS-стилей в реальном времени
CSS Inspector — это мощный инструмент разработчика, который позволяет просматривать все CSS-свойства любого элемента…
Отладка и управление CSS-анимациями в реальном времени
Animation Inspector даёт вам полный контроль над каждой CSS-анимацией и transition, запущенными на любой веб-странице…
Преобразуйте CSS любого элемента в классы утилит Tailwind
Copy as Tailwind устраняет разрыв между визуальным дизайном и кодом Tailwind CSS.
Визуализируйте полную структуру макета любой страницы
Режим только контуров добавляет цветные border outline к каждому HTML-элементу на веб-странице, мгновенно давая вам…
Получайте категоризированные Tailwind-классы для любого элемента
Tailwind Helper инспектирует любой элемент на веб-странице и генерирует полный категоризированный breakdown совпадающих…
Визуальное отображение HTML-дерева поверх любой страницы
Контуры страницы отображают полную структуру DOM любой веб-страницы в виде визуального дерева прямо поверх самой…
Обнаружение компонентов React, Vue, Angular и Svelte на любом сайте
Детектор компонентов автоматически определяет, какой фронтенд-фреймворк использует сайт, и показывает его полное дерево…
Drag & Drop для изменения положения любого элемента на странице
Инструмент «Переместить элемент» позволяет нажать на любой элемент веб-страницы и физически перетащить его на новое…
Удалите или переключите видимость любого элемента
Инструмент «Удалить/скрыть элемент» позволяет удалить или временно скрыть любой элемент веб-страницы одним нажатием…
Экспортируйте любой элемент в HTML, CSS или JSON
Экспорт элемента позволяет кликнуть на любой элемент веб-страницы и экспортировать его полную структуру в трёх…
Генерируйте компоненты React, Vue и Svelte из любого элемента
Копировать код компонента превращает любой элемент веб-страницы в чистый, готовый к продакшну файл компонента для…
Захватывайте видимую область или полностраничные скриншоты
Screenshot делает высококачественные снимки любой веб-страницы в двух режимах: видимая область (именно то, что вы…
Просматривайте, выбирайте и скачивайте все изображения с любой веб-страницы
Extract Images сканирует любую веб-страницу и представляет все изображения в виде удобной галереи. Смотрите миниатюры…
Найдите, просматривайте и скачивайте все SVG на любой странице
SVG Grabber обнаруживает каждый SVG на веб-странице — встроенные SVG-элементы, ссылки на внешние .svg-файлы…
Замените любое изображение на странице своим собственным
Image Replacer позволяет кликнуть на любое изображение на веб-странице и заменить его своим — загрузив локальный файл…
Мгновенно создавайте QR-коды для любого URL или текста
Генератор QR-кодов автоматически создаёт сканируемый QR-код для URL текущей страницы — или для любого пользовательского…
Пиксельно точные линейки, направляющие и измерения на любой странице
Page Ruler добавляет на любую веб-страницу линейки и перетаскиваемые направляющие в стиле Photoshop. Пиксельно точные…
Предварительный просмотр нескольких viewport устройств одновременно
Responsive Viewer отображает текущую веб-страницу сразу в нескольких размерах viewport — все на одном экране. Смотрите…
Измеряйте точные расстояния в пикселях между любыми двумя элементами
Measure Distance позволяет нажать на любые два элемента на веб-странице и мгновенно увидеть точное расстояние между…
Визуализируйте каждый контекст наложения и слой z-index
Z-Index Inspector раскрывает полный порядок наложения каждого элемента на веб-странице. Каждый элемент со значением…
Инспектируйте CSS Grid и Flexbox-макеты с помощью визуальных overlays
Grid/Flex Visualizer обнаруживает каждый CSS Grid и Flexbox-контейнер на веб-странице и отображает их структуру макета…
Симуляция зон внимания пользователей на любой странице
Heatmap Simulator генерирует предсказанную тепловую карту внимания для любой веб-страницы на основе устоявшихся…
Выборочная очистка cache, cookies, localStorage и sessionStorage
Очистка данных браузера даёт разработчикам быстрый и избирательный способ удалить определённые типы данных для текущего…
Определите каждую технологию за любым сайтом
Site Stack сканирует любой сайт и определяет его полный технологический стек — frontend-фреймворки (React, Vue…
Комплексный SEO-аудит: meta tags, заголовки, OpenGraph и многое другое
SEO Inspector проводит мгновенный, комплексный SEO-аудит любой веб-страницы.
Автоматический аудит WCAG: contrast ratio, alt text, ARIA и многое другое
Accessibility Inspector выполняет автоматическую проверку соответствия WCAG 2.1 Level AA на любой веб-странице и…
Нажмите на любой текст на любой странице и редактируйте его мгновенно
Live Text Editor делает каждый текстовый элемент на веб-странице редактируемым одним кликом. Изменяйте заголовки…
Меняйте любой шрифт глобально или для отдельных элементов из Google Fonts
Смена шрифтов позволяет заменить любой шрифт на веб-странице другим из библиотеки Google Fonts — глобально (для всего…
Найдите каждый шрифт, используемый на любой веб-странице
«Список всех шрифтов» сканирует любую веб-страницу и представляет полный реестр каждого используемого семейства шрифтов…
Точный eyedropper для значений цвета в форматах HEX, RGB и HSL
Color Picker предоставляет пиксельно-точный инструмент eyedropper для выбора цветов с любого элемента на веб-странице…
Извлеките полную цветовую палитру любой веб-страницы
Color Palette сканирует каждый элемент на веб-странице и извлекает полный набор используемых цветов — от текста и фонов…
Мгновенно применяйте dark mode к любому сайту
Принудительный dark mode применяет тёмную цветовую схему к любому сайту, который её не поддерживает, — или отменяет…
Мгновенно включайте или отключайте JavaScript для текущей вкладки
Переключение JavaScript отключает или повторно включает выполнение JavaScript для текущей вкладки браузера одним…
Просматривайте, редактируйте, добавляйте и удаляйте cookies для любого домена
Редактор cookies отображает все cookies текущего домена в удобной сортируемой таблице. Просматривайте имена, значения…
Просматривайте вывод консоли во всплывающей панели — без DevTools
Логгер консоли перехватывает весь вывод консоли (console.log, console.warn, console.error, console.info) и отображает…
Мониторинг всех сетевых запросов в режиме реального времени
Network Monitor перехватывает и отображает каждый сетевой запрос текущей страницы — вызовы XHR/Fetch API, загрузку…
Просмотр, редактирование, добавление и удаление записей localStorage и sessionStorage
Local Storage Editor предоставляет удобный табличный интерфейс для управления записями localStorage и sessionStorage…
Сканируйте все ссылки на странице и находите нерабочие
Проверка битых ссылок сканирует все ссылки на текущей странице — href-атрибуты якорей, источники изображений, источники…
Мгновенная панель производительности: время загрузки, статистика DOM и ресурсы
Производительность страницы предоставляет мгновенный обзор производительности любой веб-страницы — метрики времени…
Форматируйте, минифицируйте и проверяйте JSON в один клик
Форматер JSON красиво форматирует, минифицирует и проверяет JSON прямо в вашем браузере. Вставьте любую строку JSON…
Кодируйте строки в Base64 и обратно мгновенно
Кодировщик/декодировщик Base64 преобразует текст в Base64 и Base64 обратно в текст прямо в вашем браузере…
Кодируйте и декодируйте строки URL в один клик
Кодировщик/декодировщик URL преобразует строки URL в их процентно-кодированную форму и обратно. Выберите между…
Кодируйте и декодируйте HTML сущности мгновенно
Кодировщик HTML сущностей преобразует специальные символы (< > & " ') в их эквиваленты HTML сущностей (< > &…
Экранируйте и отмените экранирование строк для кода
Обратная косая черта Экранирование/Отмена экранирования преобразует строки в их экранированную форму и обратно (\n \t…
Преобразуйте изображения в Base64 Data URI и обратно
Изображение <-> Base64 преобразует файлы изображений (PNG, JPG, SVG, WebP, GIF) в Base64-кодированные Data URI и…
Мгновенно декодируйте JSON Web Tokens
JWT Отладчик декодирует и проверяет JSON Web Tokens — разбирает заголовок, полезную нагрузку и подпись, отображает…
Генерируйте массовые идентификаторы UUID v4
Генератор UUID создает криптографически стойкие идентификаторы UUID v4, используя API crypto браузера. Генерируйте…
Вычисляйте хеши MD5, SHA-1, SHA-256, SHA-384, SHA-512
Генератор хешей вычисляет криптографические хеши (MD5, SHA-1, SHA-256, SHA-384, SHA-512) любого текстового ввода. Все…
Генерируйте криптографически стойкие пароли
Генератор паролей создает надежные, случайные пароли, используя API криптографической случайности браузера. Настройте…
Тестируйте регулярные выражения в реальном времени с выделением совпадений
Тестер регулярных выражений оценивает регулярные выражения для проверки текста в реальном времени. Совпадения выделены…
Преобразуйте Unix, ISO и человекочитаемые даты
Преобразователь временных меток переводит между временными метками Unix (секунды, миллисекунды, микросекунды…
Сравните два текстовых блока построчно
Инструмент сравнения сравнивает два текстовых блока и выделяет добавленные, удаленные и неизменные строки с цветовой…
Проверьте коэффициент контрастности WCAG для любых двух цветов
Проверка контрастности вычисляет коэффициент контрастности WCAG 2.1 между двумя цветами и классифицирует их по порогам…
Преобразуйте HEX, RGB, HSL, HSV и OKLCH мгновенно
Преобразователь формата цвета переводит любой цвет между HEX, RGB, HSL, HSV и OKLCH.
Извлеките доминирующую палитру из любого изображения
Экстрактор цвета изображения анализирует любой файл изображения (перетащите, вставьте или щелкните для загрузки) и…
Получите селекторы CSS и XPath для любого элемента
Поиск пути DOM позволяет вам навести указатель мыши на любой элемент на странице, чтобы выявить его уникальный селекто�…
Тестируйте кросс-ориджинные запросы и проверяйте заголовки CORS
Проверка CORS тестирует, будет ли кросс-ориджинный запрос с вашего сайта разрешен целевым сервером. Запускает…
Захватываем кадры WebSocket в реальном времени
Инспектор WebSocket захватывает каждый кадр WebSocket — отправляемый и получаемый — по всем соединениям на странице…
Сканируйте страницу на наличие сломанных изображений мгновенно
Поиск сломанных изображений сканирует каждое изображение <img> и CSS background-image на странице, обнаруживает…
Автоматически заполняйте формы реалистичными тестовыми данными
Заполнитель форм заполняет каждое видимое поле формы на странице реалистичными тестовыми данными — имя, электронная…
Преобразуйте между CSV и JSON в любом направлении
Преобразователь CSV ↔ JSON обрабатывает полный полный тур между двумя наиболее распространенными табулярными форматами…
Форматируйте, проверяйте и просматривайте XML с выделением синтаксиса
Форматер XML красиво печатает, минифицирует и проверяет XML в браузере.
Форматируйте SQL запросы красиво
Форматер SQL преобразует сжатый или беспорядочный SQL в читаемые, правильно отступленные запросы. Ключевые слова…
Сохраняйте веб-страницы как чистые PDF
Преобразовать в PDF сохраняет текущую веб-страницу как PDF через диалог печати браузера с предварительно применными…
Отправляйте запросы REST, GraphQL и WebSocket с самой страницы
API Tester — это встроенный HTTP-клиент для вызовов REST, GraphQL и WebSocket, который запускается в контексте…
Блокировать запросы, перезаписывать заголовки и поддельные ответы API
Request Mocker изменяет сетевой трафик в браузере, не затрагивая серверную часть — блокируйте запросы, устанавливайте…
Смотрите LCP, CLS и INP в прямом эфире, пока вы используете страницу
Core Web Vitals показывает три показателя, по которым ранжируется Google — LCP, CLS и INP — измеренные в реальном…
Найдите неиспользуемые правила CSS и раздувание JavaScript
Code Coverage проверяет каждый селектор в каждой читаемой таблице стилей на соответствие живой странице, поэтому вы…
См. график загрузки, не открывая DevTools.
Resource Waterfall отображает каждый запрос, сделанный страницей, на временной шкале, каждый столбец разбивается на…
Краткий обзор заголовков безопасности и политики безопасности контента
Средство проверки безопасности и CSP считывает заголовки ответов страницы, на которой вы находитесь, и оценивает их…
Просматривайте каждый скрипт аналитики, пиксель и сторонний трекер на странице.
Tracker & Pixel Scanner перечисляет то, что смотрит посетитель — аналитику, рекламные пиксели, устройства записи…
Выберите лучший план для вашего рабочего процесса. Начните бесплатно, обновляйтесь в любое время.
Распространенные вопросы о функциях и использовании расширения DevSuite Pro. Если у вас есть вопрос, ответ может быть уже ниже.
Посетите Chrome Web Store, найдите «DevSuite Pro», нажмите «Добавить в Chrome» и подтвердите, выбрав «Установить расширение». После установки значок расширения появится на панели инструментов вашего браузера. Нажмите на него, чтобы мгновенно получить доступ к 71+ инструментам разработчика.
Бесплатные инструменты (43+) доступны всем без лицензии. Инструменты 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.