Инструменты разработчика

DevTools — это встроенный визуальный инструмент для настройки, отладки и анализа Ваших приложений.

Возможности

Ранее для изменения внешнего вида требовалось вручную редактировать CSS-файлы, а для отладки — использовать сторонние инструменты. DevTools объединяет эти возможности в едином интерфейсе, доступном прямо внутри вашего приложения.

Задача	Как DevTools помогает её решить
Настройка внешнего вида	Визуальное редактирование дизайн-токенов с мгновенным предпросмотром. Никакого написания CSS-кода вручную. Что такое дизайн-токены, см. в разделе Стилизация приложения.
Настройка структуры	Тестирование параметров шаблона без обновления конфигурационных файлов.
Отладка сетевых запросов	Просмотр и анализ сетевых запросов на любом устройстве.
Мониторинг ошибок	Отображение системных логов с фильтрацией и счетчиком ошибок.
Работа на мобильных устройствах	Отладка там, где нет доступа к стандартным инструментам разработчика.

Окно DevTools можно перетаскивать за заголовок и изменять его размер. Для удобства работы предусмотрена snap-привязка — окно автоматически фиксируется у краев экрана.

Включение/Отключение

DevTools управляется через файл pghs-config.json в папке со статическими файлами вашего проекта:

{
  "devTools": {
    "enabled": true
  }
}

• true — панель DevTools отображается на странице (режим настройки);

• false — панель скрыта (режим использования).

После сохранения файла DevTools станет доступен в интерфейсе вашего приложения для всех пользователей системы. Это безопасно, так как DevTools не позволяет применить изменения, а служит лишь для отладки и настройки в локальной среде.

Подробнее о структуре pghs-config.json см. Публичный конфигурационный файл pghs-config.json.

Вкладки

Настройки шаблона

Вкладка Настройки шаблона (Layout) позволяет изменить базовую структуру вашего приложения: расположение шапки, бокового меню, основной области контента.

Параметры настройки

Параметр	Описание
Тип отображения (View)	Dashboard — для административных панелей, LK — для личных кабинетов.
Скрытие навигации (Allow to hide nav)	Разрешить пользователю скрывать навигационное меню (доступно только для типа отображения Dashboard).
Положение шапки (Header position)	Inside — внутри основного контента, Outside — над всем содержимым.
Подписи в меню (Header menu titles)	Показывать текстовые подписи у иконок в шапке (подписи скрываются только для пунктов, у которых указана иконка).

Применение изменений

После выбора параметра изменения применяются автоматически только на текущем устройстве.

Для публикации изменений Вам следует скопировать сгенерированное в правой части вкладки новое содержимое pghs-config.json и обновить файл на сервере вручную (Публичный конфигурационный файл pghs-config.json).

Темизация

Вкладка Темизация (Theming) предназначена для визуального редактирования дизайн-токенов — CSS-переменных, которые определяют внешний вид приложения.

Все изменения применяются в реальном времени (задержка ~10 мс). Вы сразу видите результат на странице.

Предупреждение

При переходе на вкладку Темизация система автоматически анализирует, разбирает и применяет изменения из файла theme-roller.css. Если в файле содержатся синтаксические ошибки, после применения изменений тема может отображаться некорректно. Эти ошибки могут возникнуть только при ручном редактировании theme-roller.css.

В этом случае необходимо вручную проверить содержимое файла theme-roller.css, исправить ошибки и загрузить исправленную версию на сервер.

Структура вкладки

Common Settings — базовые настройки, которые покрывают 80% потребностей при создании темы:

Подраздел	Что настраивает
Настройки (Settings)	Базовые размеры и отступы: внутренние отступы, скругление углов, высота элементов и шапки, ширина бокового меню и контейнера, фон страницы, размеры и цвет границ (--padding, --radius, --item-height и др.)
Фирменные цвета (Brand)	Фирменные цвета приложения и их приглушенные версии, цвета текста на них, цвет теней фирменных элементов
Шрифты (Typography)	Шрифты: основной шрифт, базовый размер текста, размер форматированного контента, цвет ссылок (--font-family-primary, --font-size, --color-link)
Основной слой (Primary)	Основной слой: фон страницы и его приглушенная версия, цвета текста на нем, цвет и толщина границ, цвет теней
Вторичный слой (Secondary)	Вторичный слой: фон панелей и меню и его приглушенная версия, цвета текста, цвет и толщина границ, цвет теней
Состояния (Status)	Цвета состояний: ошибка, успех, предупреждение, информация и тексты на их фонах
Логотип (Logo)	Настройки логотипа: отображение, путь к файлу, соотношение сторон, размер и положение

Ниже расположены блоки с токенами компонентов — для тонкой настройки внешнего вида отдельных элементов интерфейса:

Компонент	Что настраивает
App Button	Цвета для кнопок всех типов (Default, Primary, Secondary, Statuses)
Dropdown	Выпадающие списки
App form	Поля ввода, селекты, текстовые области
App form: Checkbox, Radio, Switcher…	Настройки, специфичные для различных типов полей ввода
Modal	Модальные окна
Page: Header	Шапка страницы
Page: Navigation bar	Навигационная панель в шапке
Page: Sidebar	Левое меню
Page: Top	Верхняя часть страницы
Region	Базовые настройки для регионов
Region: Breadcrumbs, Cards, Charts…	Настройки, специфичные для различных регионов

Примечание

Приведенный список компонентов не является полным и может отличаться от актуального. Точный перечень доступных компонентов и их токенов отображается на вкладке Темизация в DevTools.

Индикаторы состояния токена

Рядом с каждым токеном расположен цветной индикатор, показывающий его статус относительно текущей темы. Мы постарались сделать поведение цветовых индикаторов максимально интуитивно понятным:

Индикатор	Значение	Когда появляется	Что происходит при нажатии
Синий	Токен будет добавлен в файл theme-roller.css при скачивании	Пользователь изменил токен, которого не было в файле	Отмена добавления — токен вернется к состоянию «не определен»
Желтый	Значение токена будет обновлено в файле theme-roller.css	Пользователь изменил значение токена, который уже есть в файле	Откат к значению из файла theme-roller.css
Красный	Токен будет удален из файла theme-roller.css	Пользователь явно удалил определение токена через интерфейс	Восстановление удаленного определения из файла theme-roller.css
Зеленый	Токен уже определен в текущем файле theme-roller.css	Токен присутствует в файле и не был изменен	Токен будет помечен как «следует удалить» (красный)
Круг с обводкой	Токен не изменялся и не определен в текущей цветовой схеме	Токена нет в файле, и пользователь его не менял	Определение токена с базовым значением

Примечание

Мы сделали поведение индикаторов максимально интуитивно понятным: цвет сразу отражает состояние токена, а нажатие на индикатор позволяет отменить или откатить изменение.

Описание токенов

При наведении курсора на первую букву в названии токена появляется тултип с описанием его назначения.

Цветные плашки состояний

Для токенов состояния (с названием, оканчивающимся на hover, active, muted, disabled, focus, checked, await, expand) отображается специальная плашка, подчеркивающая, что это токен состояния. Это позволяет удобно найти нужный токен и визуально отделять обычный токен от токена состояния.

Например, токен --color-brand-muted будет отображен как «Color Brand» с серой плашкой и белым текстом «muted» внутри нее.

Состояние	Цвет плашки	Что означает
hover	Синий	Состояние при наведении курсора
active	Красный	Активное состояние (например, при нажатии)
muted	Серый	Приглушенная версия основного цвета
expand	Темно-зеленый	Развернутое состояние
disabled	Серый	Недоступное состояние
focus	Мятно-зеленый	Состояние фокуса (например, при навигации с клавиатуры)
checked	Золотисто-желтый	Отмеченное или выбранное состояние (чекбоксы, переключатели)
await	Голубой	Состояние ожидания (например, во время загрузки)

Редактирование токенов

Для разных типов токенов предусмотрены разные типы полей ввода:

Тип токена	Поле ввода
Color	Цветовая палитра (color picker) + отображение уровня контрастности
Pixels	Числовое поле + единица измерения (px)
Number	Числовое поле
Scale	Ползунок (range) с настраиваемым диапазоном
Options	Выпадающий список (select)
String / Background / Url / AspectRatio	Текстовое поле с поддержкой валидации значения
Shadow	Текстовое поле с поддержкой валидации значения
Font	Текстовое поле

Индикатор контрастности

Для цветовых токенов DevTools автоматически рассчитывает уровень контрастности между цветом фона и текста.

Уровень контрастности вычисляется как соотношение контраста (contrast ratio) по стандарту WCAG 2.1. Это число показывает, насколько легко текст отделяется от фона, и как система оценивает читаемость текущей пары «цвет текста — цвет фона»:

Значение contrast ratio	Цвет индикатора	Оценка
7.0 и выше (уровень AAA)	Зеленый	Лучшая практика. Текст легко читается, даже людьми с нарушениями зрения
4.5 – 6.9 (уровень AA)	Синий	Веб-стандарт. Требуется для основного контента
3.0 – 4.4	Желтый	Допустимо, но может вызывать утомление и снижение внимательности
Ниже 3.0	Красный	Критическая ошибка. Текст будет плохо читаться многими пользователями

Обращайте внимание на значения индикатора контрастности, особенно для текстовых токенов (Text on *). Это поможет обеспечить читаемость интерфейса для всех пользователей.

Предупреждение

Функция расчета может некорректно обрабатывать цвета с альфа-каналом (прозрачностью) и цвета, указанные через ссылку на другой токен. В таких случаях полагайтесь на визуальную оценку.

Редактирование сложных значений (значок замка)

Если значение токена слишком сложное для стандартного поля ввода (например, ссылка на другой токен: var(--color-brand)), рядом с полем отображается значок замка.

Чтобы отредактировать такое значение:

1. Нажмите на название токена или на иконку замка

2. Откроется окно ручного редактирования

3. Введите новое значение в текстовое поле

Примечание

Режим ручного редактирования доступен даже для «простых» значений. Это полезно, если вы хотите указать в качестве значения ссылку на другой токен (var(--another-token)) или использовать сложные CSS-функции (calc, color-mix, clamp).

Определение нового токена

Если токен не определен в текущей теме, рядом с его названием отображается кружок с обводкой. При нажатии на название токена или кружок токен будет определен с актуальным или базовым значением. После определения токена вы сможете отредактировать его значение.

Редактор логотипа

В разделе Logo предусмотрен специальный редактор для удобной настройки логотипа.

Способы установки логотипа:

• Загрузка SVG-файла

  Выберите SVG-файл на вашем компьютере. Система автоматически преобразует его в base64 и встроит непосредственно в CSS. Учтите, что этот метод поместит логотип прямо в файл theme-roller.css. Поэтому размер логотипа имеет критическое значение. Рекомендуем использовать векторные SVG-логотипы размером не более 3–6 килобайт.

• Указание ссылки

  Введите относительный путь к файлу логотипа на сервере. Система проверит ссылку и постарается получить информацию о файле.

  Примечание

  Для тёмной темы часто необходимо указать инверсированную версию логотипа.

  

  При загрузке или указании логотипа система автоматически:

  • рассчитывает и заполняет соотношение сторон (aspect ratio) на основе размеров изображения;

  • определяет оптимальный размер области для отображения логотипа;

  • при необходимости настраивает положение логотипа в отведенной области.

  Вам не нужно вручную вычислять пропорции — достаточно выбрать файл или указать ссылку.

Кнопки управления темой

Кнопка	Действие
Импорт (Import)	Загрузить CSS-файл с темой и «примерить» ее. Изменения применяются к странице, но не сохраняются на сервер. Подробнее см. подраздел «Кнопка Импорт».
Выбрать (Pick)	Включить режим «прицела» для поиска нужных токенов. Подробнее см. подраздел «Кнопка Выбрать элемент».
Отмена (Discard)	Отменить все несохраненные изменения и вернуться к состоянию, которое соответствует файлу theme-roller.css на сервере.
Скачать (Download)	Скачать файл theme-roller.css со всеми внесенными изменениями.

Кнопка «Импорт»

Кнопка Импорт позволяет загрузить в DevTools CSS-файл с темой. Это может быть ваша собственная тема theme-roller.css — для продолжения редактирования, или любая готовая тема: сторонняя или одна из тем-примеров с нашего сайта.

Чтобы загрузить тему:

1. Нажмите кнопку Импорт (Import).

2. Выберите файл theme-roller.css на вашем компьютере.

DevTools загрузит все значения из файла и сразу применит их к странице. Так вы можете «примерить» тему, прежде чем применять, а также внести в нее дополнительные изменения.

Применение темы происходит в режиме «примерки»:

• изменения применяются к странице в реальном времени, но не сохраняются на сервер;

• загруженную тему можно доработать: изменить любые токены через визуальный интерфейс;

• после доработки нажмите Скачать (Download), чтобы получить готовый файл theme-roller.css и разместить его на сервере.

Кнопка «Выбрать элемент»

Кнопка Выбрать элемент (Pick) включает режим «прицела» — инструмент для быстрого поиска токенов компонента.

При наведении на элементы страницы система выделяет их визуально (затемняет остальное) и показывает, какой компонент будет выбран. При клике DevTools автоматически прокручивает до нужного компонента во вкладке Темизация.

Пример работы «режима прицела». Пользователь навёл на элемент формы «радиокнопки».

После выбора элемента DevTools автоматически прокрутит к нужному разделу темизации, отвечающему за настройку внешнего вида этого компонента.

Режим прицела особенно полезен, когда нужно быстро найти, какой токен отвечает за внешний вид конкретного элемента: вместо поиска по названиям достаточно навести на элемент и кликнуть.

Светлая и темная тема

В DevTools можно переключаться между светлой и темной темой. Система автоматически определяет предпочтительную тему на основе настроек устройства.

Разработчики могут добавить в приложение кнопку смены темы и управлять цветовой схемой через интерфейс jsAPI.colorScheme и его методы.

Примечание

Создание темы следует начинать именно со светлой темы: сначала задаются базовые значения всех токенов, а затем для темной темы переопределяются только те токены, которые должны в ней отличаться. Подробнее см. в разделе 4. Темная тема.

Мониторинг сети

Вкладка Мониторинг сети (Network requests) отображает все сетевые запросы, которые выполняет ваше приложение. Это полезно для отладки, особенно на мобильных устройствах, где нет прямого доступа к стандартным инструментам разработчика.

Функциональность

Для каждого запроса отображается:

Поле	Описание
Name	Путь или имя запроса
Status	HTTP-статус ответа (200, 401, 404 и т.д.)
Type	HTTP-метод (GET, POST, PUT, DELETE)
Time (XRAD+JS)	Время выполнения запроса

Детальный просмотр

Каждый запрос можно развернуть для просмотра дополнительной информации.

Это позволяет детально анализировать обмен данными между клиентом и сервером.

Поле	Описание
Request headers	Заголовки запроса
Request body	Тело запроса в формате JSON
Response headers	Заголовки ответа
Response body	Тело ответа в формате JSON

Консоль

Вкладка Консоль (System logs) отображает системные логи вашего приложения. Инструмент особенно полезен для отладки на мобильных устройствах, где доступ к консоли разработчика ограничен.

Логи помогают отслеживать ошибки выполнения JavaScript-кода в реальном времени. Фильтрация по типу позволяет быстро находить нужные сообщения, не отвлекаясь на второстепенную информацию.

Совет

Счетчик ошибок консоли и сетевых запросов отображается даже при свёрнутом DevTools. Это позволяет своевременно выявлять ошибки и реагировать на них.