Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Kanalga Telegram’da o‘tish
Все самое полезное для фронтенда в одном канале. Наши курсы: https://clc.to/WV2U4g По рекламе: @tproger_sales_bot Для обратной связи: @proglibrary_feeedback_bot РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Ko'proq ko'rsatish
📈 Telegram kanali Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js analitikasi
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js (@frontendproglib) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 20 622 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 398-o'rinni va Rossiya mintaqasida 31 770-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 20 622 obunachiga ega bo‘ldi.
06 Noyabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -180 ga, so‘nggi 24 soatda esa -2 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 8.18% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.14% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 686 marta ko‘riladi; birinchi sutkada odatda 853 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent фронтендера, навигация, css, javascript, api kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Все самое полезное для фронтенда в одном канале.
Наши курсы: https://clc.to/WV2U4g
По рекламе: @tproger_sales_bot
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 07 Noyabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
20 622
Obunachilar
-224 soatlar
-417 kun
-18030 kun
Ma'lumotlar yuklanmoqda
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Noyabr '26Noy '26
Noyabr '26
+6
1 kanalda
Oktabr '26
+45
2 kanalda
Get PRO
Sentabr '26
+59
1 kanalda
Get PRO
Avgust '26
+63
2 kanalda
Get PRO
Iyul '26
+81
1 kanalda
Get PRO
Iyun '26
+212
3 kanalda
Get PRO
May '26
+202
4 kanalda
Get PRO
Aprel '26
+240
10 kanalda
Get PRO
Mart '26
+93
2 kanalda
Get PRO
Fevral '26
+208
4 kanalda
Get PRO
Yanvar '26
+229
2 kanalda
Get PRO
Dekabr '25
+210
5 kanalda
Get PRO
Noyabr '25
+116
3 kanalda
Get PRO
Oktabr '25
+118
1 kanalda
Get PRO
Sentabr '25
+97
1 kanalda
Get PRO
Avgust '25
+94
3 kanalda
Get PRO
Iyul '25
+116
3 kanalda
Get PRO
Iyun '25
+146
2 kanalda
Get PRO
May '25
+138
0 kanalda
Get PRO
Aprel '25
+197
7 kanalda
Get PRO
Mart '25
+317
52 kanalda
Get PRO
Fevral '25
+207
34 kanalda
Get PRO
Yanvar '25
+256
39 kanalda
Get PRO
Dekabr '24
+257
39 kanalda
Get PRO
Noyabr '24
+213
43 kanalda
Get PRO
Oktabr '24
+273
38 kanalda
Get PRO
Sentabr '24
+240
39 kanalda
Get PRO
Avgust '24
+363
37 kanalda
Get PRO
Iyul '24
+215
37 kanalda
Get PRO
Iyun '24
+244
31 kanalda
Get PRO
May '24
+366
35 kanalda
Get PRO
Aprel '24
+378
36 kanalda
Get PRO
Mart '24
+406
30 kanalda
Get PRO
Fevral '24
+402
31 kanalda
Get PRO
Yanvar '24
+509
24 kanalda
Get PRO
Dekabr '23
+493
24 kanalda
Get PRO
Noyabr '23
+401
8 kanalda
Get PRO
Oktabr '23
+553
23 kanalda
Get PRO
Sentabr '23
+801
0 kanalda
Get PRO
Avgust '23
+613
0 kanalda
Get PRO
Iyul '23
+462
0 kanalda
Get PRO
Iyun '23
+295
0 kanalda
Get PRO
May '23
+454
0 kanalda
Get PRO
Aprel '23
+230
0 kanalda
Get PRO
Mart '23
+771
0 kanalda
Get PRO
Fevral '23
+282
0 kanalda
Get PRO
Yanvar '23
+422
0 kanalda
Get PRO
Dekabr '22
+372
0 kanalda
Get PRO
Noyabr '22
+495
0 kanalda
Get PRO
Oktabr '22
+256
0 kanalda
Get PRO
Sentabr '22
+262
0 kanalda
Get PRO
Avgust '22
+383
0 kanalda
Get PRO
Iyul '22
+514
0 kanalda
Get PRO
Iyun '22
+545
0 kanalda
Get PRO
May '22
+232
0 kanalda
Get PRO
Aprel '22
+231
0 kanalda
Get PRO
Mart '22
+261
0 kanalda
Get PRO
Fevral '22
+170
0 kanalda
Get PRO
Yanvar '22
+226
0 kanalda
Get PRO
Dekabr '21
+217
0 kanalda
Get PRO
Noyabr '21
+222
0 kanalda
Get PRO
Oktabr '21
+348
0 kanalda
Get PRO
Sentabr '21
+337
0 kanalda
Get PRO
Avgust '21
+355
0 kanalda
Get PRO
Iyul '21
+304
0 kanalda
Get PRO
Iyun '21
+234
0 kanalda
Get PRO
May '21
+492
0 kanalda
Get PRO
Aprel '21
+404
0 kanalda
Get PRO
Mart '21
+509
0 kanalda
Get PRO
Fevral '21
+500
0 kanalda
Get PRO
Yanvar '21
+514
0 kanalda
Get PRO
Dekabr '20
+17 917
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 07 Noyabr | +1 | |||
| 06 Noyabr | +3 | |||
| 05 Noyabr | 0 | |||
| 04 Noyabr | 0 | |||
| 03 Noyabr | +2 | |||
| 02 Noyabr | 0 | |||
| 01 Noyabr | 0 |
Kanal postlari
💡 modern-web-types добавляет TypeScript-типы для новых браузерных API
Браузер уже поддерживает API, а TypeScript сообщает, что такого свойства нет. Стандартный набор DOM-типов может отставать: он ориентируется на возможности, доступные как минимум в двух движках.
Пакет modern-web-types использует порог в один движок и добавляет типы для более новых возможностей платформы.
Пригодится, если проект использует свежие браузерные API. После подключения типов сохраните проверку доступности функции во время выполнения: она определяет, какой код запустится у пользователя.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера
| 2 | 💡 iframe может менять высоту вслед за содержимым
Встроенная форма стала длиннее, а рамка осталась прежней — появилась лишняя прокрутка. Для такого сценария в Chromium есть механизм подстройки размера:
iframe {
frame-sizing: content-height;
}
В разборе адаптивных iframe показаны разрешающий метатег на встроенной странице и вызов window.requestResize() после изменения содержимого.
Подойдёт для форм, виджетов и других встраиваемых страниц. Добавьте проверку через @supports и сохраните вариант с postMessage для браузеров без поддержки.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера | 1 058 |
| 3 | 💡 Base UI позволяет добавить поиск по пунктам меню
Для фильтрации меню используются Menu.FilterProvider, поле Menu.Input и список Menu.List. Провайдер хранит поисковый запрос и связывает части компонента.
В документации с примерами разобраны фильтрация, управление состоянием и вложенные меню. Для каждого подменю с поиском нужен свой провайдер.
При внедрении пройдите весь сценарий с клавиатуры: открыть меню, набрать запрос, выбрать пункт и закрыть список. Проверьте также очистку запроса при повторном открытии.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера | 1 200 |
| 4 | 💡 Доступность компонента можно проверять по готовым сценариям
В библиотеке TetraLogical собраны восемь компонентов, включая аккордеон, диалог, вкладки и текстовое поле. У каждого есть код, документация и проверки, связанные с критериями WCAG 2.2.
В разборе библиотеки показано, как сценарии запускают в браузере через Cucumber и Playwright. Около 97% сценариев автоматизированы, остальные собраны в список ручных проверок.
Возьмите компонент из своего проекта и сравните поведение: клавиатуру, фокус, состояния и сообщения. Подходящие сценарии можно добавить в тесты дизайн-системы.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера | 1 312 |
| 5 | 💡 Единица lh помогает выровнять иконку по первой строке текста
Иконка рядом с короткой подписью выглядит ровно. Подпись переносится на три строки — и при align-items: center иконка оказывается посередине всего абзаца.
В разборе выравнивания иконок предлагается привязать смещение к высоте строки:
.item {
display: flex;
align-items: start;
gap: 0.5rem;
}
.icon {
--size: 20px;
width: var(--size);
height: var(--size);
flex-shrink: 0;
transform: translateY(calc((1lh - var(--size)) / 2));
}
Единица lh берёт значение line-height самого элемента. При одинаковой высоте строки у иконки и подписи формула центрирует иконку относительно первой строки текста. flex-shrink: 0 сохраняет её ширину в тесном контейнере.
Проверьте компонент с длинной подписью, увеличенным шрифтом и узкой шириной. В статье есть интерактивные примеры для SVG и иконок через псевдоэлемент.
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста | 1 383 |
| 6 | 💡 calc-size() подгоняет высоту секции под целые плитки фона
У секции повторяющийся фоновый узор. Текст меняется, высота блока тоже, и нижний ряд рисунка обрезается посередине.
Связка calc-size() и round() позволяет округлить естественную высоту секции до размера целой плитки:
.section {
--tile-height: 44px;
height: calc-size(
auto,
round(up, size, var(--tile-height))
);
}
Здесь size — высота, рассчитанная по содержимому. round(up, ...) увеличивает её до ближайшего значения, кратного 44 пикселям. Размер самого фонового рисунка сохраняется.
В статье есть примеры с разной длиной текста и вертикальными отступами. На момент публикации решение работает в Chrome. Подключайте его через @supports, сохраняя обычную автоматическую высоту для остальных браузеров.
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста | 1 315 |
| 7 | 💡 Grid Lanes раскладывает карточки разной высоты средствами CSS
У карточек в галерее разная высота: где-то длиннее подпись, где-то крупнее изображение. Для плотной раскладки можно использовать masonry — размещать следующую карточку в подходящей колонке.
В разборе CSS Grid Lanes показан новый режим такой вёрстки:
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
Колонки задаются знакомыми свойствами Grid. Браузер сам размещает элементы по мере заполнения колонок, поэтому вычислять высоту каждой карточки в JavaScript не требуется.
По данным статьи, Grid Lanes работает в Safari 26.4 и новее. Спецификация ещё находится в статусе Editor’s Draft. Для проекта с широкой аудиторией подготовьте обычную Grid-сетку и включайте новый режим через @supports (display: grid-lanes).
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста | 1 296 |
| 8 | 🔍 DevTools позволяет выбрать положение всплывающего элемента на сетке
Подсказку или меню привязали к кнопке через CSS Anchor Positioning. Теперь нужно выбрать, с какой стороны от кнопки появится элемент и как он выровняется.
В Chrome DevTools появился визуальный редактор position-area. Он открывает сетку, на которой можно выбрать область относительно якоря. Значение CSS обновляется при выборе, поэтому результат сразу виден на странице.
Откройте Elements → Styles и нажмите значок рядом с объявлением position-area. Выберите область целиком или настройте оси по отдельности. Для подробной проверки доступна подсветка границ области позиционирования.
Инструмент пригодится при настройке подсказок, меню и других привязанных элементов. Подберите положение в DevTools, затем перенесите значение в стили компонента и проверьте его у краёв экрана.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера | 1 354 |
| 9 | 💡 touch-action убирает случайный зум при быстрых нажатиях на кнопку
Быстро нажимаете «плюс» в счётчике товара — браузер увеличивает страницу. На телефоне два последовательных нажатия могут распознаться как жест масштабирования.
Для таких кнопок есть короткое CSS-правило:
.quantity-button {
touch-action: manipulation;
}
Оно отключает масштабирование по двойному касанию на элементе. Прокрутка и увеличение двумя пальцами сохраняются.
Приём пригодится для счётчиков, переключателей и управления плеером — везде, где пользователь часто нажимает одну кнопку подряд.
Добавьте правило нужным кнопкам и проверьте поведение на телефоне: быстрые нажатия, прокрутку и масштабирование двумя пальцами.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера | 1 525 |
| 10 | 🔍 CrUX показывает метрики переходов между экранами SPA
Пользователь открыл приложение, перешёл в каталог, затем в карточку товара. Для оценки скорости каждого экрана важно учитывать переходы внутри приложения.
В CrUX появились экспериментальные версии LCP, INP и CLS с учётом soft navigation. Они учитывают переходы, при которых JavaScript меняет содержимое страницы и URL. INP и CLS разделяются по отдельным просмотрам, а данные в CrUX API можно получить для адреса, на который перешёл пользователь.
Это поможет найти медленные экраны в SPA и сравнить их с первой загрузкой. Новые показатели доступны в CrUX API, History API, BigQuery и CrUX Vis. Основные оценки Core Web Vitals и данные Search Console пока рассчитываются по прежним правилам.
Начните с CrUX Vis: откройте адрес своего приложения и сравните обычные показатели с экспериментальными. Выберите экран с проблемной метрикой и запишите переход на него в Performance.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера | 1 647 |
| 11 |  🔍 У Warp утекли логи ИИ-агентов и телеметрия
Атака на стороннего поставщика могла затронуть около 1% пользователей — это предварительная оценка главы Warp.
Используете Warp как терминал и ИИ-помощника для фронтенда? В статье объяснили, какие данные собирает приложение и как через Network Log посмотреть его сетевые запросы. Точный состав утечки пока не раскрыт.
Что известно об инциденте и какие настройки есть в Warp
#readme #инструменты
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 726 |
| 12 | 💡 Свой чекбокс можно оформить поверх нативного input
Чекбоксу нужны фирменная рамка и своя галочка. За выбор значения, фокус и работу с клавиатурой продолжает отвечать обычный input.
В разборе кастомного чекбокса показан такой подход: input помещают в label, рядом добавляют декоративный SVG. Стандартный внешний вид убирают через appearance: none, а галочку показывают по состоянию :checked. SVG скрывают от скринридера с помощью aria-hidden="true".
Часть CSS для переключения галочки:
.checkbox input:checked + svg {
display: block;
}
Приём пригодится для форм и дизайн-систем. В статье есть полная разметка, стили и демо, в котором размер компонента меняется вместе со шрифтом.
Перед добавлением в проект пройдите форму клавишей Tab, переключите чекбокс пробелом и нажмите на его подпись. Проверьте, что фокус хорошо виден.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера | 1 649 |
| 13 | 💡 Ответ fetch можно читать порциями через for await...of
Чтобы обработать большой ответ, не обязательно сначала целиком превращать его в строку через response.text(). Тело ответа — ReadableStream, который можно читать по мере поступления данных.
Например, посчитать полученные байты:
const response = await fetch("/api/export");
if (!response.ok || !response.body) {
throw new Error("Не удалось получить данные");
}
let bytes = 0;
for await (const chunk of response.body) {
bytes += chunk.byteLength;
console.log(bytes);
}
В сентябре асинхронная итерация ReadableStream получила поддержку Safari 27 и стала Baseline Newly available. Старые версии браузеров всё ещё нужно учитывать.
Порция данных — не обязательно целая строка или JSON-объект. Для текста понадобится потоковое декодирование, а для записей — буферизация до границы сообщения.
Ещё нюанс: выход из цикла через break по умолчанию отменяет поток. Если планируете продолжить чтение позже, у values() есть опция preventCancel.
🔗 Обновление поддержки Streams API
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 686 |
| 14 | ⚡ Долгую задачу в Web Worker можно измерить отдельно от основного потока
Основной поток свободен, INP выглядит хорошо, а поиск всё равно долго не показывает результат. Возможно, интерфейс ждёт вычисление в Worker.
Перенос работы в Worker защищает от блокировки отрисовки, но не делает само вычисление быстрым. Большой фильтр или обработка изображения могут надолго занять уже его цикл событий.
Chrome 153 расширил Long Animation Frames API на dedicated Workers. Проверять поддержку и создавать наблюдатель нужно внутри Worker:
if (PerformanceObserver.supportedEntryTypes
.includes("long-animation-frame")) {
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.duration);
}
}).observe({ type: "long-animation-frame" });
}
Наблюдатель на странице не собирает эти записи автоматически. Чтобы связать задержку с действием пользователя, добавьте к задаче свой идентификатор и сопоставьте измерения.
Есть и ограничение: первая реализация замечает отдельную долгую задачу, а не любую очередь из множества коротких. Проверяйте поддержку API в целевом браузере.
🔗 Гарри Робертс о задержках внутри Workers
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 637 |
| 15 |  📌 Один курс — хорошее вложение в себя. Два по той же цене — ещё лучше.
В Proglib Academy действует акция: покупаешь один курс, а второй получаешь в подарок.
Например, можно совместить два направления по работе с ИИ:
💥 ИИ для разработчиков — применение нейросетей в повседневной разработке: работа с кодом, тестирование и ревью.
💥 Разработка ИИ-агентов — архитектура агентов и создание собственных AI-решений.
📍 Разница в цене — почти 50 тысяч рублей. Можно освоить больше, не выходя за рамки запланированного бюджета.
А если тебе интереснее Python, алгоритмы, backend или DevOps — выбирай другую пару курсов из каталога.
Акция действует до 31 октября включительно ⏳
⏮️ Пора прокачать свой стек | 1 583 |
| 16 | 💡 W3C упростил дизайн-систему, убрав лишние обёртки и жёсткие правила отступов
Карточка хорошо выглядит в своём списке, но ломается внутри другой карточки. Тексту обязательно нужна специальная обёртка. Отступы завязаны на конкретного родителя.
С такими ограничениями столкнулись пользователи дизайн-системы W3C. В сентябрьском обновлении команда пересмотрела эти зависимости.
Что изменилось:
— карточки получили больше собственных стилей вместо зависимости от контейнера списка;
— ограничение длины строки перенесли с текстовой обёртки на сами элементы;
— убрали жёсткие правила вертикальных отступов, мешавшие использовать компоненты вне CMS;
— девять размеров текста оформили как CSS-переменные;
— где уместно, перешли на логические свойства для разных направлений письма.
Это полезный кейс для ревью своей библиотеки: можно ли вложить компонент в другое окружение без копирования контейнеров и дополнительных исключений?
Убирать все обёртки подряд не требуется. Здесь команда устраняла конкретные зависимости, которые мешали повторному использованию.
🔗 Что и почему изменили в W3C
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 587 |
| 17 | 💡 SvelteKit 3 можно обновить через CLI, но адаптеры стоит проверить вручную
Вместе со SvelteKit 3 вышел CLI sv 1.0. Для существующего приложения есть команда миграции:
npx sv migrate sveltekit-3
Она берёт на себя значительную часть изменений, но не заменяет проверку приложения и руководства по миграции.
Например, у Cloudflare убрали объект platform: доступ к bindings теперь идёт через cloudflare:workers. У Node-адаптера изменилось обслуживание статики: учитываются файлы, существовавшие на момент сборки, а для проверки кеша используются ETag на основе хеша содержимого.
Если приложение создавало статические файлы уже после сборки или зависело от старого API адаптера, эти места нужно разобрать отдельно.
Ещё одно изменение — официальный API дополнений для sv. Поддержка enhanced-img тоже доступна через дополнение:
npx sv add enhanced-img
🔗 Октябрьский разбор SvelteKit 3 и sv 1.0
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 602 |
| 18 | 🔍 Chrome 155 поддерживает JPEG XL для фотографий и изображений без потерь
JPEG XL снова стоит включить в сравнение форматов изображений. Chrome 155 получил декодирование .jxl через реализацию jxl-rs на Rust.
Команда Chrome выделяет несколько сценариев: фотографии с высоким качеством, сжатие без потерь, HDR и постепенное появление изображения по мере загрузки.
Это не повод конвертировать весь сайт одним скриптом. Авторы рекомендуют пробовать и JPEG XL, и AVIF: результат зависит от картинки и нужного качества.
Для совместимости можно оставить запасной вариант:
<picture>
<source srcset="photo.jxl" type="image/jxl">
<img src="photo.jpg" alt="Горное озеро">
</picture>
Браузер без поддержки JPEG XL возьмёт JPEG. Сравнивайте размер файлов, качество и скорость декодирования на своих изображениях и целевых устройствах.
🔗 Как JPEG XL появился в Chrome
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 651 |
| 19 |  😎 Выбираешь один курс, второй получаешь бесплатно. Баг? Нет, акция!
До 31 октября в Proglib Academy можно выбрать два курса и заплатить только за один.
Например, можно совместить:
💥 ИИ для разработчиков — применение нейросетей в повседневной разработке: работа с кодом, тестирование и ревью.
💥 Разработка ИИ-агентов — архитектура агентов и создание собственных AI-решений.
Вместе курсы стоят 108 000 ₽, но по акции оба обойдутся в 59 000 ₽. Экономия — 49 000 ₽ 🔥
Интересуют Python и ИИ или алгоритмы и архитектура? Можно выбрать любые два курса из каталога.
Акция действует до 31 октября включительно ⏳
⏬ Собрать свой учебный билд | 1 716 |
| 20 | ⚡ Vitest 5 позволяет посмотреть браузерный тест по шагам после падения
Тест нажал кнопку, интерфейс изменился, проверка упала. К моменту разбора страница уже находится в другом состоянии — и одного сообщения об ошибке мало.
Trace View в Vitest 5 сохраняет DOM-снимки действий и проверок. Можно выбрать шаг и увидеть, как выглядела страница в тот момент, с подсветкой нужного элемента.
Для настроенного Browser Mode включите:
export default defineConfig({
test: {
browser: {
traceView: true,
},
},
});
Просмотр доступен в браузерном интерфейсе, Vitest UI и HTML-отчёте. Это помогает разбирать и локальные ошибки, и падения в CI.
Опция относится к Browser Mode: обычные тесты в Node.js от неё не получают историю DOM. И сам браузерный провайдер всё равно нужно настроить — показан только фрагмент конфигурации.
🔗 Trace View и другие изменения Vitest 5
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера | 1 847 |
