Chrome Developer rīki: atslēga uz fragmentiem un laika mērīšanu

Šajā rokasgrāmatā būs sniegts visaptverošs pārskats par fragmentu un laika noteikšanas funkcijas izmantošanu pārlūkprogrammā Chrome Izstrādātāja rīki. Īsraksti ļauj jums izveidot atkārtoti lietojamus koda fragmentus, kas var būt noderīgi, programmējot un testējot kodu. Mēs arī parādīsim, kā varat izmērīt JavaScript koda izpildes laiku, lai optimizētu lietojumprogrammu veiktspēju. Šādas funkcijas var būt ļoti svarīgas, lai gūtu labāku priekšstatu par JavaScript izstrādes vidi.

Galvenās atziņas

• Snippets ir atkārtoti lietojami koda fragmenti, kas tiek glabāti pārlūkprogrammā Chrome Izstrādātāja rīki.
• Varat izveidot, rediģēt un izpildīt fragmentus, lai automatizētu parastus uzdevumus.
• Lai noteiktu koda fragmentu izpildes laiku, varat izmantot funkcijas console.time() un console.timeEnd().
• Lai iegūtu pareizas mērījumu vērtības, ir svarīgi pareizi apstrādāt time un time end izsaukumus.

Soli pa solim

Izveidot un pārvaldīt fragmentus

Vispirms aplūkosim, kā varat izveidot un pārvaldīt fragmentus pārlūkprogrammā Chrome Izstrādātāja rīki.

Lai piekļūtu fragmentiem, atveriet Chrome Developer Tools, noklikšķiniet uz cilnes "Avoti" un atrodiet paneli Snippets. Panelis snippets ir pieejams, pielāgojot skatu vai izmantojot izvēlni.

Šeit varat izveidot jaunus fragmentus. Lai izveidotu jaunu fragmentu, noklikšķiniet uz "New Snippet". Jums tiks lūgts ievadīt sava fragmenta nosaukumu, piemēram, nosauciet to par "Test".

Tiklīdz esat nosaucis fragmentu, varat to uzreiz rediģēt. Šeit varat ievadīt vajadzīgo JavaScript kodu, kas tiks izpildīts, kad palaižat fragmentu.

Izmaiņas tiek saglabātas uz laiku, līdz tās tiek saglabātas, nospiežot taustiņus Ctrl + S (vai Command + S operētājsistēmā Mac). Ņemiet vērā, ka fragmenti tiek saglabāti neatkarīgi no apmeklētās vietnes, kas nozīmē, ka fragmentus varat izmantot jebkurā lapā.

Lai izpildītu fragmentu, varat vienkārši noklikšķināt uz atskaņošanas ikonas vai izmantot taustiņu kombināciju Ctrl + Enter (vai Command + Enter operētājsistēmā Mac).

Kad izpildīsiet fragmentu, izvades rezultāti tiks parādīti tieši Izstrādātāja rīku konsoles zonā.

Laika mērīšana ar console.time() un console.timeEnd()

Tagad, kad esat veiksmīgi izveidojis fragmentus, aplūkosim, kā varat izmērīt savu JavaScript kodu veiktspēju, izmantojot funkcijas console.time() un console.timeEnd().

Laika mērījumu var sākt, ievietojot console.time('Loop') vēlamā izmērāmā koda sākumā. Pārliecinieties, ka console.timeEnd('Loop') izmanto to pašu virkni attiecīgā koda beigās. Tad starpposma laiks tiek izvadīts milisekundēs.

Ja abas virknes nesakrīt vai ja esat aizmirsis izsaukt timeEnd funkciju, saņemsiet brīdinājumu.

Laika mērīšanas piemērs

Izvēlēsimies vienkāršu piemēru, kurā jūs cilpā pārcilpojat 100 000 elementu un ierakstāt tos masīvā.

Iestatiet console.time('Loop') pirms cilpas un console.timeEnd('Loop') pēc cilpas. Tas ļauj izmērīt cik ilgā laikā tiek izpildīta cilpa.

Kad būsiet izmēģinājuši šo funkcionalitāti, redzēsiet, ka laika mērīšana palīdz noteikt un optimizēt vājās vietas.

Svarīgas lietošanas piezīmes

Ņemiet vērā, ka console.time() un console.timeEnd() nav ieteicams izmantot ražošanas vidēs. Šīs funkcijas jāizmanto tikai testēšanai, jo dažādās JavaScript vidēs tās var tikt atbalstītas atšķirīgi.

Secinājumi

Tagad esat apguvis fragmentu un console.time() un console.timeEnd() metožu lietošanas pamatus pārlūkprogrammā Chrome Izstrādātāja rīki. Šīs funkcijas ir ļoti noderīgas, lai strādātu efektīvāk un labāk izprastu jūsu lietojumprogrammu veiktspēju.

Apkopojot

Rezumējot, fragmentu un laika noteikšanas funkciju izmantošana pārlūkprogrammā Chrome Developer Tools sniedz vērtīgus rīkus, lai palielinātu izstrādes efektivitāti un gūtu dziļāku ieskatu par JavaScript kodu izpildes laiku.