Tīkla ierobežojumi un galvenes analīze Chrome Developer Tools

Šajā rokasgrāmatā uzzināsiet, kā izmantot Chrome izstrādātāja rīkus , lai ierobežotu tīkla savienojumus, analizētu HTTP galvenes un priekšskatītu atbildes. Šīs funkcijas ir īpaši noderīgas, lai pārbaudītu vietnes veiktspēju dažādos tīkla apstākļos un izprastu atgriezto datu struktūru. Tīkla savienojumu slāpēšana ļauj simulēt lietotāja pieredzi mobilajās ierīcēs, savukārt galvenu analīze sniedz norādes par iespējamām problēmām.

Galvenie secinājumi

• Ierobežojumi ļauj simulēt lēnus tīkla ātrumus, lai pārbaudītu lietotāju uzvedību šādos apstākļos.
• HTTP galvenes sniedz informāciju par to, kā dati tiek atgriezti klientam.
• Izstrādātāja rīku priekšskatījuma funkcija ļauj viegli pārbaudīt JSON datu un citu formātu struktūru.

Soli pa solim

Tīkla ātruma regulēšana

Lai simulētu lēnus tīkla savienojumus, atveriet Chrome izstrādātāja rīkus un pārejiet uz cilni Tīkls. Tur varat izvēlēties dažādus ātrumus, piemēram, "ātrs 3G". Tas ļauj pārbaudīt vietnes ielādes laiku reālos apstākļos.

Pārlādējot lapu, varat tieši redzēt, kāda ir veiktspēja, izmantojot šo iestatījumu. Ņemiet vērā, ka ielādes laiks ir ievērojami lēnāks nekā parastos apstākļos.

Ja vēlaties, lai tas būtu vēl lēnāks, varat izvēlēties opciju "lēns 3G". Šajā gadījumā ir nepieciešama pacietība, jo satura ielādei ir nepieciešams ievērojami ilgāks laiks.

Varat arī aktivizēt funkciju "bezsaistē". Šī opcija ir īpaši interesanta, lai pārbaudītu, kā darbojas jūsu tīmekļa lietojumprogramma, ja nav interneta savienojuma.

Bezsaistes tests ar pakalpojumu darbiniekiem

Pakalpojumu strādnieki nodrošina iespēju padarīt vietnes pieejamas bezsaistē. Ja jums ir lapa, kurai paredzēts darboties bezsaistē, varat pārbaudīt, vai attiecīgais saturs ir pieejams arī bezsaistē, aktivizējot bezsaistes funkciju izstrādātāja rīkos.

Varat arī pārbaudīt, vai navigācija darbojas bezsaistē vai tiešsaistē, skatoties logā "Navigators". Tas ir svarīgi, lai nodrošinātu, ka jūsu lietojumprogrammu var izmantot arī bez interneta savienojuma.

Darbs ar galvenēm

Lai pārbaudītu HTTP galvenes, pārlādējiet savu tīmekļa vietni no jauna un aplūkojiet atgrieztos datus. Cilnē "Tīkls" varat apskatīt sīkāku informāciju par atbildes galvenēm, piemēram, Content-Type un Content-Length.

Šeit atradīsiet arī informāciju par to, vai attiecīgajam failam ir vai nav aktivizēta kešēšana. Tas ir svarīgi, lai optimizētu vietnes veiktspēju.

Skatīt JSON datu struktūru

Ja saņemat atpakaļ JSON datus, varat viegli pārbaudīt šo datu priekšskatījumu. Izstrādātāja izvēlnē varat izvērst un pārbaudīt datu struktūru. Jūs redzēsiet datus ne tikai neapstrādātā tekstā, bet arī izceltus krāsā, kas uzlabo lasāmību.

Liela priekšskatījuma priekšrocība ir tā, ka varat vienkārši kopēt datus, lai tos izmantotu, piemēram, kodu redaktorā.

Darbs ar attēliem

Attēlu datiem var piekļūt arī, izmantojot Izstrādātāja rīkus. Ja, piemēram, aplūkojat SVG failus, tos varat apskatīt cilnē "Priekšskatījums".

Attiecībā uz citiem formātiem, piemēram, PNG vai JPEG, varat izmantot opcijas "Kopēt attēla URL" vai "Saglabāt attēlu kā", lai saglabātu attēlus lokāli vai vienkārši kopētu URL.

Problēmu identificēšana

Īpaši noderīga izstrādātāja rīku funkcija ir iespēja analizēt statusa kodus. Ja statusa kods ir lielāks par 400, tas norāda uz problēmu, kas jāizpēta sīkāk.

Pievērsieties pieprasījuma galvenēm, lai identificētu iespējamos kļūdas avotus, vai tā būtu autentifikācijas kļūda vai citas problēmas, kas radušās lapas ielādes laikā.

Kopsavilkums

Šajā rokasgrāmatā uzzinājāt, kā slāpēt tīkla ātrumu, analizēt HTTP galvenes un labāk izmantot priekšskatījuma informāciju. Izmantojot šos rīkus, varat vēl vairāk optimizēt lietotāja pieredzi savā vietnē un identificēt iespējamos kļūdu avotus.