Ответ
Для эмуляции сетевых условий используется вкладка Network в инструментах разработчика (DevTools).
Пошаговая инструкция:
- Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I).
- Перейдите на вкладку Network.
- Найдите выпадающий список Throttling (обычно в верхней панели, рядом с кнопкой записи). По умолчанию стоит No throttling.
- Выберите предустановленный профиль:
- Slow 3G
- Fast 3G
- Online (сброс эмуляции)
- Для тонкой настройки выберите Add... или Custom > Add custom profile....
Пример создания кастомного профиля:
Profile Name: "Very Slow Edge"
Download: 100 Kbps
Upload: 50 Kbps
Latency: 500 msПрименение: Эта функция критически важна для тестирования:
- Времени загрузки страницы и ресурсов.
- Поведения лоадеров и скелетонов.
- Логики таймаутов и повторных запросов в приложении.
- Работы Service Workers и кэширования в условиях плохого соединения.
Ответ 18+ 🔞
Да ты посмотри, какая полезная штука-то есть, а многие про неё нихуя не знают! Речь про вкладку Network в девтулзах. Это ж прям как симулятор дерьмового интернета у тебя в браузере, блядь. Для тех, у кого дома оптоволокно, а в приложении всё летает, а потом приезжает дядя Вася в деревню и у него всё ебётся.
Короче, делай так, не ёби мозги:
- Открываешь инструменты разработчика. Клацаешь F12 или что там у тебя. Ctrl+Shift+I для нормальных людей, Cmd+Opt+I для этих, с яблоками.
- Тыкаешь на вкладку Network. Там сразу все запросы посыпятся, как мухи на говно.
- Ищешь глазками выпадающий список Throttling (это «троттлинг», если по-русски — «искусственное замедление»). Обычно он рядом с кружочком записи. Стоит там No throttling — значит, всё летает как у всех.
- Жмёшь на него и выбираешь готовый профиль, чтоб не париться:
- Slow 3G — это когда интернет как в 2005-м, через модем Dial-up, только хуже. Картинки грузятся по пикселю в час.
- Fast 3G — уже терпимо, но всё равно ощущение, что ты в поезде едешь.
- Online — это чтоб всё сбросить и опять летать.
А если тебе мало и ты хочешь почувствовать себя на краю земли, где интернет дают по талонам, делай кастомный профиль: Жми Add... или Custom > Add custom profile... и вводи свои ебуччие параметры. Например, назови его «У бабушки в деревне»:
Profile Name: "У бабушки в деревне"
Download: 100 Kbps // Скачивание, как через дырявое ведро
Upload: 50 Kbps // Отправка — вообще пиздец, одно мучение
Latency: 500 ms // Задержка, будто сигнал на Луну и обратноЗачем это всё, спросишь? Да затем, сука, чтобы не выглядеть идиотом!
- Увидишь, как твоя «супер-пупер» страница на самом деле грузится десять минут и пользователь уже успел сходить, пообедать и вернуться.
- Проверишь, не разъедутся ли твои красивые скелетоны или лоадеры в разные стороны, пока данные плетутся.
- Поймёшь, не отвалится ли твое приложение по таймауту, когда запрос идёт дольше, чем ожидание студента в очереди за стипендией.
- Убедишься, что Service Workers и кэш не обосрутся в условиях, когда связь есть, но её как бы и нет. Вот это вот — критически важно, ёпта!