#фишка дня

Короче, рассказываю.

Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.

И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.

А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome

Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.

#devtools #chrome #бородач

#статья дня

Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.

А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.

Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.

А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.

Итак, статья: https://sia.codes/posts/lighthouse-treemap/

TL;DR

Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.

Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.

Пользуемся, наслаждаемся.

#devtools #chrome #бородач

#фишка дня

Эмулируем различные особенности зрения легко и просто!

Если залезть в Chrome DevTools, нажать на меню "три точки", выбрать Rendering и найти раздел Emulate vision deficiencies, можно легко понять, как видят ваш сайт, например, люди с искажённым цветовосприятием. Дальтоники.

Список эмулируемых особенностей:
1. Нечёткое зрение (тут и близорукость, и дальнозоркость подойдёт)
2. Протанопия (нет красного)
3. Дейтеранопия (нет зелёного)
4. Тританопия (нет синего)
5. Ахроматопсия (нет цвета)

Начиная с Chrome 112 есть возможность имитировать пониженную контрастность (для имитации катаракты, например): https://developer.chrome.com/blog/new-in-devtools-112/#reduced-contrast

#a11y #chrome #devtools #бородач

#инструмент дня

Google Chrome на днях достиг версии 124. Что это значит? Что у нас очередные обновления в DevTools!

Из наиболее интересного — инспектор анимаций теперь поддерживает нативные анимации по скроллу (на видео).

Если вы ещё не в курсе, что это, рекомендую посмотреть это демо: https://scroll-driven-animations.style/

К слову, автор демо — Брамус Ван Дамм — заодно представил расширение, позволяющее удобно эти самые анимации визуализировать и отлаживать. Есть и полифилл для ScrollTimeline.

Следующая фишка, которая будет, внезапно, полезна не только разработчикам — это отладка контента для автоподстановки в формах — Autofill! То есть теперь можно открыть форму и посмотреть, как и чем она будет заполняться. С точки зрения разработчика это значит, что появился шанс подогнать названия полей под соответствие системе распознавания.

А ещё в DevTools теперь нормальная поддержка нативного нестинга aka вложенности!

Ну и раз такое дело, пусть на всякий случай тут полежит ссылка на список изменений в Chrome 124: https://developer.chrome.com/release-notes/124

#css #chrome #devtools

#фишка дня

Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!

Поднимите руку те, кто дебажит через console.log(var) 🙋

А надо не так.

Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.

#debug #devtools

#заметка дня

Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?

А надо чаще!

Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.

В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?

Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).

Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.

Рекомендую туда почаще заглядывать, котаны.

#devtools #ignore #sourcemaps #бородач

#фишка дня

Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!

Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)

Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.

#devtools #chrome #performance

#инструмент дня

Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.

React Switchboard: https://github.com/coryhouse/react-switchboard

Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.

Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos

Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.

#react #devtools

#фишка дня

Отладка в Chrome только что стала проще, а вы и не знали!

Чтобы отладить нечто появляющееся по фокусу на элементе, не надо ставить весь рендеринг на паузу, вызывая дебаггер. И не надо ставить точку останова на изменение атрибутов.

Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.

Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page

Очень уютно!

#chrome #devtools

#фишка дня

Да неужели! Да ну наконец-то!

Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от focus :)

Теперь же можно не только использовать тот же :user-valid, но и форсить его в девтулзах!

А ещё есть юзер-инвалид: https://xn--r1a.website/htmlshit/2760

Начиная с Chrome 129.

Вообще, секция про девтулзы — буквально моя самая любимая в блоге разработчиков Chrome: https://developer.chrome.com/blog/new-in-devtools-129

#chrome #devtools