← Nazad na funkcije
Pro

Resource Waterfall

Resource Waterfall црта сваки захтев који је страница упутила на временској линији, сваку траку разбијену на своје стварне фазе — у реду чекања, ДНС, ТЦП, ТЛС, чекање и преузимање — са маркерима за ФЦП, ЛЦП, ДОМЦонтентЛоадед и учитавање.

Када је страница спора, питање је увек исто: шта чека? Сопствени одговор претраживача се налази на панелу Мрежа, што значи отварање ДевТоолс-а, спајање фиоке преко странице коју прегледавате и поновно учитавање да бисте ухватили почетак учитавања.

Resource Waterfall поставља ту временску линију у плутајућу плочу поред странице. Сваки захтев се појављује као трака позиционирана према томе када је покренута и сегментирана према томе где је његово време заправо прошло: чекање у реду или застој, ДНС претрага, ТЦП конекција, ТЛС руковање, чекање сервера, затим преузимање. Дугачак плави сегмент је спор сервер; дуга зелена је дебела датотека; дуга сива значи да је захтев чекао свој ред. Разлика одлучује шта треба да поправите.

Испрекидани маркери на временској линији показују Фирст Цонтентфул Паинт, Ларгест Цонтентфул Паинт, ДОМЦонтентЛоадед и учитавају, тако да можете да видите који захтеви се завршавају пре него што корисник нешто види, а који се још увек извршавају. Ресурси који блокирају приказивање и погоци у кеш меморији су означени у сваком реду, а један филтер за блокирање смањује листу на оно што заправо одлаже прво фарбање.

Филтрирајте по типу, претражујте по УРЛ-у или сортирајте по најспоријем или највећем да бисте брзо пронашли најгорег преступника. Кликните на било који ред за његову пуну УРЛ адресу, протокол, преносне и декодиране величине, статус и потпуну фазу. Захтеви који стигну док је панел отворен стримују се директно, а Екпорт ЈСОН копира целу временску линију, укључујући прекретнице, тако да се налаз учинка може предати неком другом без снимка екрана.

Pregled uživo
example.com
Resource Waterfall 42 захтева · 2.4 MB · 5 блокирање приказивања
све блокирање css js img xhr
0ms 600ms 1.20s FCP LCP
■ /products doc 38 KB 562ms
■ theme.min.css css 214 KB 341ms
■ vendor.js js 684 KB 712ms
hero.webp img 312 KB 604ms
▪ app.css css цацхе 3ms
analytics.js js 46 KB 488ms
У реду чекања ДНС ТЦП / ТЛС Чекање (ТТФБ) Преузми
Ključne karakteristike

Реал Пхасе Бреакдовн

Свака трака је подељена на ред чекања, ДНС, ТЦП, ТЛС, чекање и преузимање, тако да се спор сервер, дебели фајл и захтев у реду одмах могу разликовати.

Обојите и означите оптерећење

Испрекидане линије за ФЦП, ЛЦП, ДОМЦонтентЛоадед и лоад показују који захтеви се завршавају пре него што корисник види садржај, а који се још извршавају након њега.

Филтер који блокира приказивање

Један клик смањује листу на ресурсе који заправо држе прву боју, са укупним бројем блокирања у траци са резимеом.

Кеш хитови су означени

Ресурси који се служе из кеша су означени и означени уместо да се појављују као мистериозни редови од нула бајта, тако да можете да проверите да ваше кеширање заиста функционише.

Филтрирајте, претражите и сортирајте

Сузите према типу — документ, ЦСС, ЈС, слике, фонтови, КСХР, медији — претражујте према УРЛ-у или сортирајте по најспоријем или највећем да бисте дошли до најгорег преступника за неколико секунди.

Извозна временска линија

Копирајте цео водопад као ЈСОН, укључујући прекретнице, укупне вредности и фазе по захтеву, да бисте их приложили тикету или упоредили са каснијим покретањем.

Uobičajeni slučajevi upotrebe

Проналажење онога што одлаже прву фарбу

Филтрирајте ресурсе који блокирају приказивање и видите тачне стилове и скрипте који стоје између вашег посетиоца и видљивог садржаја.

Хватање споре треће стране

Сортирајте по најспоријим и гледајте како се добављач аналитике, фонта или ћаскања појављује на врху са дугом фазом чекања која нема никакве везе са вашим кодом.

Препознавање спорог сервера из велике датотеке

Прочитајте боје фазе: време проведено на чекању је проблем са позадином или ЦДН-ом, време проведено на преузимању је проблем величине датотеке. Поправка је различита за сваку.

Провера кеширања и компресије

Поново учитајте и потврдите да средства долазе из кеша и да су величине преноса далеко мање од декодираних величина, што доказује да је компресија заиста укључена.

Предајући налаз неком другом

Извезите временску линију као ЈСОН и приложите је тикету тако да следећа особа види исте бројеве уместо да покушава да репродукује вашу сесију.

Kako se koristi
1

Отворите Resource Waterfall

Кликните на икону Resource Waterfall у DevSuite Pro доку. Све што је страница до сада учитала се одмах појављује на временској линији.

2

Учитајте поново за пуну слику

Поново учитајте са отвореним панелом да бисте ухватили оптерећење од првог захтева, укључујући сам документ и прекретнице за фарбање.

3

Смањите то на оно што је важно

Притисните блок за блокирање да бисте видели само ресурсе који блокирају приказивање или изаберите тип као што је јс или имг. Сортирајте по најспоријим да бисте најгорег преступника поставили на врх.

4

Прегледајте један захтев

Кликните на било који ред за његову пуну УРЛ адресу, протокол, величине, статус и детаљну анализу у милисекундама — и копирајте УРЛ ако вам је потребан.

5

Извезите доказе

Извоз ЈСОН копира пуну временску линију са прекретницама и укупним вредностима, спреман за лепљење у тикет или чување као запис пре и после.

Spremni da probate?

Instalirajte DevSuite Pro besplatno i otključajte 71+ alata za programere za svoj pretraživač.

Dodaj u Chrome Додај у Edge Dodaj u FireFox