Efektyvus „Chrome Developer Tools“ naudojimas: Naudingos Console metodai

Chrome Developer Tools yra neatsiejamas įrankis. Svarbu suprasti įvairias funkcijas ir metodus, kurie gali padėti efektyviai derinti jūsų kodą ir pateikti naudingą informaciją. Šiame vadove noriu pristatyti keletą mažiau naudojamų, bet labai naudingų Konsolės metodų, kurie padės jums optimizuoti darbą.

Svarbiausi išvados

• assert(): Patikrinkite, ar sąlyga yra teisinga, ir gaukite klaidos pranešimą, jei taip nėra.
• count(): Suskaičiuokite, kiek kartų buvo iškviesta tam tikra funkcija, ir atlikite nustatytoje vietoje nustatytą skaičiavimą.
• time() ir timeEnd(): Matuokite laiką, kurį tam tikras jūsų kodo blokas užtruko.
• trace(): Sekite, kur jūsų kodas buvo vykdomas, kad palengvintumėte derinimo procesą.

Etapais instrukcija

Pirmiausiai turėtumėte atidaryti „Chrome Developer Tools“. Tai galite padaryti, spustelėję dešinįjį pele ant svetainės ir pasirinkę „Tirti“ (arba paspaudę F12). Atidarius konsolę, galime išbandyti įvairius Konsolės metodus.

Naudoti assert()

Labai naudingas įrankis - „assert()“ metodas. Šis metodas naudojamas patikrinti, ar tam tikras išraiška yra teisinga. Jei perduodate neteisingą išraišką, konsolėje matysite klaidos pranešimą. Išbandykime tai.

Čia pateikiau paprastą „assert()“ pavyzdį. Perduodu išraišką, ir jei ji netinka, konsolėje matysite „Assertion Failed“ klaidą. Tai gali būti naudinga užtikrinant, kad kintamieji ar būsenos būtų jūsų norimo elgesio.

Ypatinga tai, kad pelės užvedus ant klaidos konsolėje, galite gauti daugiau informacijos apie tai, kur įvyko klaida. Tai ypač naudinga sudėtingesnėse programose.

Skaičiuoti naudojant count()

Kitas metodas yra „count()“. Šiuo metodu galite suskaičiuoti, kiek kartų buvo iškviesta tam tikra funkcija ar kodavimo eilutė. Tai gali būti naudinga, pvz., stebint funkcijų iškvietimus. Pažiūrėkime į tai išsamiau.

Čia aš naudoju „count“ su ID, kad galėčiau pamatyti, kiek kartų buvo iškviesta funkcija. Kiekvieną kartą, kai aktyvuoju funkciją, skaičius automatiškai padidėja. Jei norite žinoti, kiek dažnai esate konkretaus kodo vietoje, „count()“ yra labai naudingas.

Papildomai yra ir „countReset()“, kuris leidžia nustatyti skaičiavimą iš naujo. „Count()“ ir „countReset()“ naudojimas gali jums suteikti daug privalumų, ypač jei turite derinti sudėtingą loginę.

Laiko matavimas naudojant time() ir timeEnd()

Kitas svarbus įrankis yra funkcijos „time()“ ir „timeEnd()“. Su „time()“ galite nurodyti laiko matavimo pradžią, o su „timeEnd()“ galite nurodyti pabaigos tašką norėdami sužinoti, kiek laiko praėjo. Pažiūrėkime čia į pavyzdį.

Aš naudoju „time()“ kodo pradžioje ir tada po tam tikro skyriaus, norėdamas sužinoti, kiek laiko užtruko šis kodo skyrius. Laikas pateikiamas milisekundėmis, kas padės jums analizuoti kodo veiksmingumą.

Šie laiko matavimo metodai yra ypač naudingi, norint identifikuoti ir analizuoti optimizuotino kodo.

Stebėti naudojant trace()

Paskutinis, bet ne mažiau svarbus metodas yra „trace()“. Šis metodas leidžia jums peržiūrėti visus atvejus, kai buvo iškviesta „trace()“ kodo fragmente. Jis padeda jums geriau suprasti jūsų kodo srautą ir nustatyti sritis, kurios gali sukelti daug skambučių.

Čia matote, kaip naudojau „trace()“, kad stebėčiau, kur esu kode. Atidarius skambučių sąrašą, galiu iš karto pereiti prie susijusių kodų vietų. Tai ypač naudinga derinant.

Pabaigoje svarbu paminėti, kad šiuos iškėlimo metodai turėtų būti vengiami jūsų gamybos kodo, siekiant optimizuoti našumą ir sumažinti nepageidaujamus konsolės išvestis.

Santrauka

Šiame vadove aptarėme kelias galingas „Chrome Developer Tools“ konsolės metodus, kurie gali labai padėti kasdieninėje interneto plėtros veikloje. Su funkcijomis, tokiomis kaip assert(), count(), time() ir trace(), jūs esate gerai pasiruošę stebėti savo kodą efektyviai, identifikuoti klaidas ir optimizuoti našumą. Atminkite, kad efektyvus iškėlimas yra svarbi kiekvienos programinės įrangos kūrimo dalis.