Chrome'i arendaja tööriistad: Võtmed killukeste ja ajamõõtmiste juurde

Selles juhendis saate põhjaliku ülevaate näidistest ja ajamõõtmisfunktsioonidest Chrome'i arendajate tööriistades. Näidised võimaldavad luua taaskasutatavaid koodilõike, mis võivad olla programmeerimisel ja koodi testimisel väga kasulikud. Lisaks näitame teile, kuidas mõõta JavaScript koodi täitmisaega, et optimeerida rakenduste jõudlust. Sellised funktsioonid võivad olla olulised parema ülevaate saamiseks oma JavaScripti arenduskeskkonnast.

Peamised teadmised

• Näidised on taaskasutatavad koodilõigud, mis salvestatakse Chrome'i arendajate tööriistadesse.
• Saate luua, muuta ja käivitada näidiseid, et automatiseerida tavapäraseid ülesandeid.
• Konsooli funktsioonide console.time() ja console.timeEnd() abil saate mõõta koodilõikude täitmise aega.
• Õige time ja timeEnd kõnede käsitlemine on oluline, et saada õigeid mõõtmisväärtusi.

Juhis samm-sammult

Näidiste loomine ja haldamine

Kõigepealt vaatame, kuidas Chrome'i arendajate tööriistades saate luua ja hallata näidiseid.

Näidiseid saate juurde pääseda, avades Chrome'i arendajate tööriistad, klõpsates vahekaardil „Allikad“ ja otsides näidise paneeli. Näidise paneeli saate avada kas vaate kohandamise teel või menüü kaudu.

Siin saate luua uusi näidiseid. Klõpsake nuppu „Uus näidis“, et luua uus näidis. Teilt küsitakse, et sisestaksite oma näidisele nime; näiteks nimetage see "Testiks".

Kui olete näidise nime pannud, saate seda kohe redigeerida. Siin saate sisestada soovitud JavaScripti koodi, mis käivitatakse siis, kui näidist käivitatakse.

Muudatused salvestatakse ajutiselt, kuni salvestate need, vajutades Ctrl + S (või Macil käsku + S). Pidage meeles, et näidised salvestatakse sõltumata külastatud veebisaidist, mis tähendab, et saate näidiseid kasutada igal lehel.

Näidise käivitamiseks klõpsake lihtsalt esitusnuppu või kasutage kiirklahvi Ctrl + Enter (või Macil käsku + Enter).

Kui näidist käivitate, saate väljundi otse arendajate tööriistade konsoolialasse.

Ajamõõtmine kasutades console.time() ja console.timeEnd()

Nüüd, kui olete edukalt loonud näidised, vaatleme, kuidas saate JavaScripti koodi jõudlust mõõta konsoolis funktsioonide console.time() ja console.timeEnd() abil.

Aja mõõtmise saate käivitada, lisades console.time('Loop') koodiosa algusesse, mida soovite mõõta. Veenduge, et kasutaksite sama stringi ka console.timeEnd('Loop') koodi lõpus. Ajaline vahe antakse seejärel millisekundites.

Kui mõlemad stringid ei ühti või unustate timeEnd-funktsiooni kutsuda, saate hoiatuse.

Ajamõõtmise näide

Võtame lihtsa näite, kus tehakse tsükkel üle 100 000 elemendi ja kirjutatakse need massiivi.

Enne tsüklit määrake console.time('Loop') ja pärast tsüklit console.timeEnd('Loop'). See võimaldab teil mõõta tsükli täitmise aega.

Kui oled seda funktsionaalsust korra proovinud, märkad, et ajamõõtmine aitab sul tuvastada ja optimeerida kitsaskohti.

Kasutamise olulised märkused

Pead meeles pidama, et console.time() ja console.timeEnd() kasutamine ei ole soovitatav tootmiskeskkondades. Neid funktsioone tuleks kasutada ainult testimise eesmärgil, kuna erinevates JavaScripti keskkondades võib toetatus olla erinev.

Kokkuvõte Snippetsi ja aja mõõtmise kasutamisest

Oled nüüd õppinud Chrome'i arendajate tööriistade snippetsite ja console.time() ning console.timeEnd() meetodite kasutamise põhimõtted. Need funktsioonid on võimsad, et töötada tõhusamalt ja paremini mõista oma rakenduste jõudlust.

Kokkuvõte

Kokkuvõtvalt võib öelda, et Snippetsi ja aja mõõtmise Chrome'i arendaja tööriistades kasutamine annab sulle väärtuslikud vahendid, et suurendada oma arendustõhusust ja saada sügavam arusaam oma JavaScripti koodide käivitusaegadest.