Efektīva Chrome Developer rīku izmantošana: Tīkls

Šajā pamācībā parādīšu, kā efektīvi izmantot Google Chrome tīkla rīkus, lai analizētu tīkla pieprasījumus un atbildes. Tīkla analīze palīdz izprast vietņu ielādes laiku, identificēt datu pārraides problēmas un uzlabot lietojumprogrammu veiktspēju. Tas ir īpaši noderīgi izstrādātājiem, kuri vēlas saprast un optimizēt savu vietņu darbību.

Galvenie secinājumi

• Deaktivizējiet kešatmiņu, lai iegūtu reālu pieprasījumu analīzi.
• Izmantojiet pieprasījumu un atbilžu galvenes informāciju, lai izprastu saziņu starp klientu un serveri.
• Pārraugiet pieprasījumu laika secību ūdenskrituma diagrammā.
• Filtrējiet un šķirojiet pieprasījumus, lai ātri atrastu attiecīgo informāciju.
• Izmantojiet konsoli problēmu novēršanai un pārraudzīt saziņu, izmantojot WebSockets.

Soli pa solim

Vispirms atveriet Chrome izstrādātāja rīkus. To var izdarīt, noklikšķinot uz lapas ar peles labo pogu un izvēloties "Izpētīt" vai nospiežot taustiņu kombināciju F12 (Windows) vai Command + Option + I (Mac).

Aktivizējiet izvēles rūtiņu "Atslēgt kešatmiņu" cilnē Tīkls. Tas ir svarīgi, jo tiek ignorēta pārlūkprogrammas kešatmiņa. Pēc tam pārlūkprogramma no jauna ielādēs visus failus no servera. Tas nodrošina, ka saņemat jaunākos failus, un atvieglo to analīzi.

Pārlādējiet lapu no jauna. To var izdarīt, nospiežot F5 vai izmantojot "Ctrl + R" (Windows) vai "Command + R" (Mac). Pēc atkārtotas ielādēšanas redzēsiet no lapas veikto pieprasījumu sarakstu.

Sīkāku informāciju varat apskatīt, noklikšķinot uz ieraksta sarakstā. Pieprasījumu galvenes ir īpaši svarīgas, jo tās satur informāciju par nosūtītajiem datiem. Varat pārslēgties starp neapstrādātu (RAW) formu un formatētu skatu.

Tas pats attiecas uz atbildes galvenēm. Pēc tam, kad serveris ir apstrādājis pieprasījumu, tas nosūta atpakaļ atbildi. Arī šeit varat apskatīt galvenes informāciju, lai saprastu, kā notikusi saziņa.

Ūdenskrituma diagramma ir svarīgs rīks, lai redzētu pieprasījumu ilgumu un secību. Stabiņi parāda, kad pieprasījums tika sākts un kad tas tika pabeigts. Lai vizualizētu laika secību, noklikšķiniet uz slejas "Waterfall" (ūdenskritums).

Analizējot ielādes laiku, ir lietderīgi zināt precīzu laiku, kas izmantots katram pieprasījumam. Piemēram, indeksa HTML faila ielādes laiks var būt ievērojami ātrāks nekā ārējo skriptu vai CSS failu ielādes laiks. To visu var redzēt ūdenskrituma skatā.

WebSocket savienojumi ir svarīgs punkts. Tie bieži paliek atvērti, tāpēc ūdenskrituma diagrammā nav apzīmēti kā pabeigti. Ir svarīgi saprast, ka WebSockets tiek izmantoti reāllaika saziņai un ne vienmēr tiek ielādēti vai izbeigti normāli.

Noklikšķinot uz pieprasījuma, redzēsiet arī atbildes priekšskatījumu. Piemēram, HTML pieprasījumam varat redzēt atveidoto HTML priekšskatījumu. Tas ir īpaši noderīgi, ja vēlaties analizēt, kādu HTML saturu atgrieza serveris.

Cilnē "Iniciators" varat redzēt, kādi skripti vai faili ir izraisījuši pieprasījumu. Tas sniedz priekšstatu par to, kā darbojas visa jūsu vietnes struktūra un kuri elementi mijiedarbojas savā starpā.

Vēl viens svarīgs aspekts ir laiks. Varat analizēt, kuri pieprasījumi aizņēma vairāk laika, nekā bija paredzēts. Iekraušanas laika analīze ir ļoti svarīga, lai noteiktu tīkla vājās vietas. Šeit īpaši noderīga ir ūdenskrituma diagramma.

Ja strādājat ar lapu, kas ģenerē vairākus pieprasījumus, varat pielāgot pieprasījumu sakārtošanu, lai uzlabotu pārskatāmību. Piemēram, pieprasījumus var sakārtot pēc izveides laika, nosaukuma vai lieluma.

Izmantojiet filtra lauku, lai ātri atrastu konkrētus pieprasījumus. Lai iegūtu mērķtiecīgu informāciju, varat meklēt konkrētus terminus vai tipus, piemēram, CSS vai JavaScript.

Izmantojot izvēles rūtiņu "Saglabāt žurnālu", varat nodrošināt, ka visi pieprasījumi tiek reģistrēti, pat pārslēdzoties starp lapām. Bez šīs funkcijas saraksts tiek atiestatīts, kad pārslēdzat lapas.

Ja aizverat DevTools un pārlādējat lapu no jauna, neviens jauns pieprasījums netiks reģistrēts, līdz atkal atvērsiet DevTools. Tāpēc ir svarīgi iepriekš iedarbināt programmu Developer Tools, lai iegūtu pilnīgus datus.

Pēc nodaļas jūs tagad esat guvuši ieskatu Chrome tīkla rīka funkcijās. Šīs prasmes ir ļoti svarīgas, lai padziļinātu izpratni par tīkla komunikāciju starp klientu un serveri.

Kopsavilkums

Šajā pamācībā jūs uzzinājāt, kā izmantot Chrome izstrādātāja rīkus, lai analizētu tīkla pieprasījumus. Jūs varat pārraudzīt datus reāllaikā, identificēt problēmas un uzlabot tīmekļa vietņu veiktspēju. Cilne Tīkls sniedz vērtīgu ieskatu pārlūkprogrammas un servera mijiedarbībā, kas ir būtiska optimizācijai un problēmu novēršanai.