Chrome Developer Tools: Avain Snippetsiin ja ajoittamiseen

Tässä oppaassa saat kattavan yleiskatsauksen snippettien käyttöön ja ajoitustoimintoon Chrome Developer Toolsissa. Snippettien avulla voit luoda uudelleenkäytettäviä koodinpätkiä, joista voi olla hyötyä ohjelmoitaessa ja testattaessa koodia. Näytämme myös, miten voit mitata JavaScript-koodin suoritusaikaa sovellusten suorituskyvyn optimoimiseksi. Tällaiset ominaisuudet voivat olla ratkaisevia, kun haluat saada paremman käsityksen JavaScript-kehitysympäristöstäsi.

Tärkeimmät opit

• Snippetit ovat uudelleenkäytettäviä koodinpätkiä, jotka on tallennettu Chrome Developer Tools -työkaluihin.
• Voit luoda, muokata ja suorittaa snippettejä automatisoidaksesi yleisiä tehtäviä.
• Voit käyttää console.time()- ja console.timeEnd()-funktioita koodinpätkien suoritusajan mittaamiseen.
• Oikeiden mittausarvojen saamiseksi on ratkaisevan tärkeää, että time- ja time end -kutsuja käsitellään oikein.

Vaiheittainen opas

Koodinpätkien luominen ja hallinta

Katsotaan ensin, miten snippettejä luodaan ja hallitaan Chrome Developer Toolsissa.

Pääset snippetteihin käsiksi avaamalla Chrome Developer Tools, napsauttamalla "Sources"-välilehteä ja etsimällä Snippets-paneelin. Pääset snippets-paneeliin joko mukauttamalla näkymää tai valikon kautta.

Täällä voit luoda uusia snippettejä. Klikkaa "New Snippet" luodaksesi uuden snippetin. Sinua pyydetään kirjoittamaan nimesi snippetillesi; voit esimerkiksi kutsua sitä nimellä "Test".

Kun olet nimennyt snippetin, voit muokata sitä heti. Tässä voit kirjoittaa haluamasi JavaScript-koodin, joka suoritetaan, kun suoritat pätkän.

Muutokset tallentuvat väliaikaisesti, kunnes tallennat ne painamalla Ctrl + S (tai Macissa Command + S). Huomaa, että snippetit tallentuvat riippumatta siitä, millä sivustolla olet käynyt, eli voit käyttää snippettejä millä tahansa sivulla.

Voit suorittaa pätkän yksinkertaisesti napsauttamalla toistokuvaketta tai käyttämällä näppäinyhdistelmää Ctrl + Enter (tai Command + Enter Macissa).

Kun suoritat pätkän, saat tulosteen suoraan Developer Toolsin konsolialueelle.

Ajan mittaus console.time() ja console.timeEnd() -ohjelmilla.

Nyt kun olet onnistuneesti luonut pätkiä, katsotaanpa, miten voit mitata JavaScript-koodisi suorituskykyä console.time()- ja console.timeEnd()-funktioiden avulla.

Voit aloittaa aikamittauksen lisäämällä console.time('Loop') mitattavan koodinpätkän alkuun. Varmista, että käytät samaa merkkijonoa console.timeEnd('Loop') -komennossa kyseisen koodin lopussa. Tämän jälkeen välissä oleva aika tulostetaan millisekunteina.

Jos nämä kaksi merkkijonoa eivät täsmää tai unohdat kutsua timeEnd-funktiota, saat varoituksen.

Esimerkki ajan mittaamisesta

Otetaan yksinkertainen esimerkki, jossa silmukoidaan 100 000 elementtiä ja kirjoitetaan ne matriisiin.

Aseta console.time('Loop') ennen silmukkaa ja console.timeEnd('Loop') silmukan jälkeen. Näin voit mitata silmukan suorittamiseen kuluvan ajan.

Kun olet kokeillut tätä toimintoa, huomaat, että ajan mittaaminen auttaa sinua tunnistamaan ja optimoimaan pullonkauloja.

Tärkeitä huomautuksia käytöstä

Huomaa, että console.time()- ja console.timeEnd()-toimintojen käyttöä ei suositella tuotantoympäristöihin. Näitä funktioita tulisi käyttää vain testaukseen, sillä niitä saatetaan tukea eri tavoin eri JavaScript-ympäristöissä.

Johtopäätös

Olet nyt oppinut perusasiat snippettien sekä console.time()- ja console.timeEnd()-metodien käytöstä Chromen kehittäjätyökaluissa. Nämä toiminnot ovat tehokkaita, kun haluat työskennellä tehokkaammin ja ymmärtää paremmin sovellustesi suorituskykyä.

Yhteenveto

Yhteenvetona voidaan todeta, että Chrome Developer Toolsissa olevien snippettien ja ajoituksen käyttö antaa arvokkaita työkaluja, joiden avulla voit tehostaa kehitystyötäsi ja saada syvällisempää tietoa JavaScript-koodiesi suoritusajoista.