#инструмент дня
Пожалуй, только лишь карась на дне не слышал аббревиатур LCP, TTFB, BPP, CLS и так далее. Что их всех объединяет?
А это все метрики производительности веб-проектов. Если вы запускали тот же самый Lighthouse, то наверняка знаете, что на получение 100% влияет очень и очень многое. Так вот.
Сегодняшний инструмент дня это набор сниппетов для Chrome DevTools для визуализации и считывания влияющих на параметры производительности показателей:
https://webperf-snippets.nucliweb.net/
Что забавно, там даже есть сниппет чтобы искать изображения за пределами экрана, у которых не включена ленивая загрузка! Сомнительно, но почему бы и нет...
И, например, имеется код для анализа скорости подгрузки сторонних скриптов и их влияния на ваш сайт.
Прекрасная штука, в общем.
#performance #devtools #бородач
Пожалуй, только лишь карась на дне не слышал аббревиатур LCP, TTFB, BPP, CLS и так далее. Что их всех объединяет?
А это все метрики производительности веб-проектов. Если вы запускали тот же самый Lighthouse, то наверняка знаете, что на получение 100% влияет очень и очень многое. Так вот.
Сегодняшний инструмент дня это набор сниппетов для Chrome DevTools для визуализации и считывания влияющих на параметры производительности показателей:
https://webperf-snippets.nucliweb.net/
Что забавно, там даже есть сниппет чтобы искать изображения за пределами экрана, у которых не включена ленивая загрузка! Сомнительно, но почему бы и нет...
И, например, имеется код для анализа скорости подгрузки сторонних скриптов и их влияния на ваш сайт.
Прекрасная штука, в общем.
#performance #devtools #бородач
❤12👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
👍17🤩4🤡1
#статья дня
Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.
А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.
Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.
А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.
Итак, статья: https://sia.codes/posts/lighthouse-treemap/
TL;DR
Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.
Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.
Пользуемся, наслаждаемся.
#devtools #chrome #бородач
Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.
А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.
Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.
А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.
Итак, статья: https://sia.codes/posts/lighthouse-treemap/
TL;DR
Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.
Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.
Пользуемся, наслаждаемся.
#devtools #chrome #бородач
👍10❤4
Media is too big
VIEW IN TELEGRAM
#фишка дня
Эмулируем различные особенности зрения легко и просто!
Если залезть в 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 #бородач
Эмулируем различные особенности зрения легко и просто!
Если залезть в 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 #бородач
👍13❤3🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
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
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
❤20👍6
#фишка дня
Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!
Поднимите руку те, кто дебажит через console.log(var) 🙋
А надо не так.
Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.
#debug #devtools
Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!
Поднимите руку те, кто дебажит через console.log(var) 🙋
А надо не так.
Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.
#debug #devtools
👍27
#заметка дня
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов 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 #бородач
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов 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 #бородач
👍22❤3
#фишка дня
Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!
Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)
Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.
#devtools #chrome #performance
Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!
Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)
Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.
#devtools #chrome #performance
👍15❤3🤩3
#инструмент дня
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
👍10
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Отладка в Chrome только что стала проще, а вы и не знали!
Чтобы отладить нечто появляющееся по фокусу на элементе, не надо ставить весь рендеринг на паузу, вызывая дебаггер. И не надо ставить точку останова на изменение атрибутов.
Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.
Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page
Очень уютно!
#chrome #devtools
Отладка в Chrome только что стала проще, а вы и не знали!
Чтобы отладить нечто появляющееся по фокусу на элементе, не надо ставить весь рендеринг на паузу, вызывая дебаггер. И не надо ставить точку останова на изменение атрибутов.
Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.
Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page
Очень уютно!
#chrome #devtools
👍24❤3