This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Разработчики браузеров, даже те, что пишут на движке Blink от Chrome, очень хотят, чтобы их работу заметили на их продукт в итоге обратили внимание. И достигают они этого разными способами.
Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагаетзакладки перевод и озвучание видео в реальном времени, Opera — встраивает VPN.
А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.
И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.
Речь там, как правило, о микросекундах в худшем случае, но вдруг...
И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge
#css #performance #devtools
Разработчики браузеров, даже те, что пишут на движке Blink от Chrome, очень хотят, чтобы их работу заметили на их продукт в итоге обратили внимание. И достигают они этого разными способами.
Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагает
А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.
И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.
Речь там, как правило, о микросекундах в худшем случае, но вдруг...
И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge
#css #performance #devtools
👍18🤩4❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun
❤19👍3
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
На видео — не высокохудожественный глитч, а результат работыочередного нового рендер-трекера для React: React Scan.
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
Естественно, это не всегда нужно. Как только нашли проблемный компонент на большой картине — обернули его в withScan и дебажьте себе на здоровье.
Хороший инструмент, хоть и в начале своего пути. Мне бы очень хотелось видеть расширение для Chrome, чтобы вообще ничего не настраивать.
#react #render #devtools
На видео — не высокохудожественный глитч, а результат работы
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
import { scan } from 'react-scan'; // import this BEFORE react
import React from 'react';
scan({
enabled: true,
log: true, // logs render info to console (default: false)
clearLog: false, // clears the console per group of renders (default: false)
});
Естественно, это не всегда нужно. Как только нашли проблемный компонент на большой картине — обернули его в withScan и дебажьте себе на здоровье.
Хороший инструмент, хоть и в начале своего пути. Мне бы очень хотелось видеть расширение для Chrome, чтобы вообще ничего не настраивать.
#react #render #devtools
👍19❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://xn--r1a.website/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://xn--r1a.website/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
npx react-scan@latest <URL>
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
👍13❤1
#devtools дня
Одна из моих любимых фишек современного CSS — это функция clamp.
В переводе — зажим. И это буквально то, что она делает: зажимает некое значение в пределах двух других.
Ну, например, выражение:
...задаст по-умолчанию ширину блока в половину ширины экрана, но не меньше 250 пикселей и не больше шестиста.
Удобно? Ну, не то слово. Со шрифтами вообще великолепно выходит! Вот инструмент, например: https://xn--r1a.website/htmlshit/902
Ну и пример с шириной: https://codepen.io/Ekaterina_Vu/pen/QWjxJvm
Но собрал я вас не совсем за этим. К сожалению, в средствах разработчика Chrome никак не возможно понять, какое же значение используется в данный момент.
Но уже в Chrome Canary и скоро и в стабильных DevTools 134 нас ждёт адекватная нотация! С зачёркнутыми неиспользуемыми значениями:
width: clamp(250px, 50vw, 600px);
Счастье есть, котаны!
#css #clamp #chrome
Одна из моих любимых фишек современного CSS — это функция clamp.
В переводе — зажим. И это буквально то, что она делает: зажимает некое значение в пределах двух других.
Ну, например, выражение:
width: clamp(250px, 50vw, 600px);
...задаст по-умолчанию ширину блока в половину ширины экрана, но не меньше 250 пикселей и не больше шестиста.
Удобно? Ну, не то слово. Со шрифтами вообще великолепно выходит! Вот инструмент, например: https://xn--r1a.website/htmlshit/902
Ну и пример с шириной: https://codepen.io/Ekaterina_Vu/pen/QWjxJvm
Но собрал я вас не совсем за этим. К сожалению, в средствах разработчика Chrome никак не возможно понять, какое же значение используется в данный момент.
Но уже в Chrome Canary и скоро и в стабильных DevTools 134 нас ждёт адекватная нотация! С зачёркнутыми неиспользуемыми значениями:
width: clamp(
Счастье есть, котаны!
#css #clamp #chrome
👍28❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
👍18❤5🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.
Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).
Короче говоря, можно редактировать код своего проекта прямо в девтулзах. А учитывая, что девтулзы — штука мощная, да ещё и отладчик под рукой — идея становится весьма привлекательной.
Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...
Так можно же! Ну или вот, чуть более подробная дока из сорсов.
Короче, суть в чём. Создаём файл
Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.
Особенно если ты умеешь пользоваться отладчиком.
Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.
А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.
В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.
#devtools #workspace
Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.
Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).
Короче говоря, можно редактировать код своего проекта прямо в девтулзах. А учитывая, что девтулзы — штука мощная, да ещё и отладчик под рукой — идея становится весьма привлекательной.
Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...
Так можно же! Ну или вот, чуть более подробная дока из сорсов.
Короче, суть в чём. Создаём файл
.well-known/appspecific/com.chrome.devtools.json:{
"workspace": {
"root": "/home/user/awesome-project",
"uuid": "53b029bb-c989-4dca-969b-835fecec3717"
}
}
Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.
Особенно если ты умеешь пользоваться отладчиком.
Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.
А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.
В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.
#devtools #workspace
5👍18❤1
Media is too big
VIEW IN TELEGRAM
#фишка дня
Вроде как, я постоянно пользуюсь девтулзами хрома. Дебаггер, сеть, редактирование кук и стораджей, просмотр данных производительности... а о такой простой и эффективной штуке не знал.
Итак, выделяете какой-то элемент на вкладке Elements, потом идёте в консоль — и этот элемент становится доступен под алиасом
Более того, в
Есть ещё
А есть $$ — это querySelectorAll...
В общем, вот документация: https://developer.chrome.com/docs/devtools/console/utilities
Из очень удобных штук — шортхенд
Да, документации и фишкам сто лет в обед, но я как-то туда не особо заглядывал. А стоило бы!
И да, для чистоты эксперимента: в Firefox тоже есть подобное, но сильно поменьше: https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html
#chrome #devtools
Вроде как, я постоянно пользуюсь девтулзами хрома. Дебаггер, сеть, редактирование кук и стораджей, просмотр данных производительности... а о такой простой и эффективной штуке не знал.
Итак, выделяете какой-то элемент на вкладке Elements, потом идёте в консоль — и этот элемент становится доступен под алиасом
$0!Более того, в
$0-$4 по порядку хранится история этих выделений! А в $_ — последнее вычисленное в консоли выражение.Есть ещё
$(selector) — это шортхенд для querySelector, косящий под jQuery.А есть $$ — это querySelectorAll...
В общем, вот документация: https://developer.chrome.com/docs/devtools/console/utilities
Из очень удобных штук — шортхенд
keys() для получения ключей объекта. И monitorEvents() — чтобы узнать обо всех слушателях переданного события без ковыряния в UI.Да, документации и фишкам сто лет в обед, но я как-то туда не особо заглядывал. А стоило бы!
И да, для чистоты эксперимента: в Firefox тоже есть подобное, но сильно поменьше: https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html
$0 там есть, а $1 уже нет. keys() есть, а monitor() — нет. В общем, сойдёт. #chrome #devtools
1👍27❤2🤩2
#инструмент дня
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile #бородач
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile #бородач
👍13🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.
Вот как выделить объект, который не слушается мыши?
Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.
#devtools #tips #chrome #firefox #бородач
Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.
Вот как выделить объект, который не слушается мыши?
Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.
#devtools #tips #chrome #firefox #бородач
1👍24❤5🤩1
#статья дня
Яндекс подвёл итоги грантовой программы Yandex Open Source — и там неожиданно много не просто «полезных тулз», а вполне серьёзной AI- и developer-инфраструктуры.
Например, среди победителей есть AI Router — прокси для маршрутизации запросов между OpenAI, Gemini, Anthropic и другими LLM. С балансировкой нагрузки, rate limiting и даже встроенным аналогом Fail2Ban для защиты от подозрительных запросов. По сути, единая точка входа для работы с разными моделями.
Ещё из интересного — RAGU. Это GraphRAG-движок, который строит графы знаний по документам: вытаскивает сущности, связи, дедуплицирует узлы и позволяет комбинировать локальный, глобальный и векторный поиск. То есть уже не просто «чатик поверх PDF», а полноценная retrieval-инфраструктура.
Ну и отдельно понравился langchain-localai — пакет для тех, кто гоняет LLM локально или в закрытом контуре. Авторы переписали коннекторы на новый OpenAI SDK, добавили нормальную асинхронность и ускорили batch-обработку эмбеддингов.
Вообще, по статье хорошо видно, как open source вокруг AI постепенно смещается от «очередной модели» к инфраструктуре: routing, observability, retrieval, orchestration и tooling.
Короче, AI-native DevOps уже наступает.
#opensource #ai #llm #rag #devtools
Яндекс подвёл итоги грантовой программы Yandex Open Source — и там неожиданно много не просто «полезных тулз», а вполне серьёзной AI- и developer-инфраструктуры.
Например, среди победителей есть AI Router — прокси для маршрутизации запросов между OpenAI, Gemini, Anthropic и другими LLM. С балансировкой нагрузки, rate limiting и даже встроенным аналогом Fail2Ban для защиты от подозрительных запросов. По сути, единая точка входа для работы с разными моделями.
Ещё из интересного — RAGU. Это GraphRAG-движок, который строит графы знаний по документам: вытаскивает сущности, связи, дедуплицирует узлы и позволяет комбинировать локальный, глобальный и векторный поиск. То есть уже не просто «чатик поверх PDF», а полноценная retrieval-инфраструктура.
Ну и отдельно понравился langchain-localai — пакет для тех, кто гоняет LLM локально или в закрытом контуре. Авторы переписали коннекторы на новый OpenAI SDK, добавили нормальную асинхронность и ускорили batch-обработку эмбеддингов.
Вообще, по статье хорошо видно, как open source вокруг AI постепенно смещается от «очередной модели» к инфраструктуре: routing, observability, retrieval, orchestration и tooling.
Короче, AI-native DevOps уже наступает.
#opensource #ai #llm #rag #devtools
👍3🤡2❤1
#статья дня
Chrome DevTools умеет включать условный Slow 3G, и очень легко забыть, что это не совсем эмуляция реальной сети.
Throttling в DevTools работает на уровне HTTP-запросов, а настоящая сеть — на уровне пакетов. Из-за этого Chrome не очень точно воспроизводит TCP slow start, handshakes, приоритизацию трафика и вообще не умеет нормально симулировать packet loss. В итоге вполне реальна ситуация, когда 20 КБ картинка в DevTools грузится 12 секунд, а на близком к реальному 3G — 300–500 мс.
То есть для быстрого «а как оно будет на медленной сети» DevTools годится. Для замеров, на основании которых вы собираетесь что-то оптимизировать, — уже не очень.
У Ивана Акулова хороший короткий разбор, почему так происходит и чем тестировать вместо этого: WebPageTest, Network Link Conditioner,
https://3perf.com/blog/chrome-throttling/
#devtools
Chrome DevTools умеет включать условный Slow 3G, и очень легко забыть, что это не совсем эмуляция реальной сети.
Throttling в DevTools работает на уровне HTTP-запросов, а настоящая сеть — на уровне пакетов. Из-за этого Chrome не очень точно воспроизводит TCP slow start, handshakes, приоритизацию трафика и вообще не умеет нормально симулировать packet loss. В итоге вполне реальна ситуация, когда 20 КБ картинка в DevTools грузится 12 секунд, а на близком к реальному 3G — 300–500 мс.
То есть для быстрого «а как оно будет на медленной сети» DevTools годится. Для замеров, на основании которых вы собираетесь что-то оптимизировать, — уже не очень.
У Ивана Акулова хороший короткий разбор, почему так происходит и чем тестировать вместо этого: WebPageTest, Network Link Conditioner,
@sitespeed.io/throttle и другие инструменты с packet-level throttling.https://3perf.com/blog/chrome-throttling/
#devtools
1❤12👍2