Chrome Developer Tools: Išsamus apžvalgas apie funkcijas

Šioje pamokoje išsamiai apžvelgsite " Chrome" programuotojo įrankius. Šie įrankiai yra labai svarbūs žiniatinklio kūrėjams, nes jie siūlo daugybę vertingų funkcijų, padedančių analizuoti ir derinti svetaines. Pradėsime nuo pagrindų ir žingsnis po žingsnio supažindinsime su įvairiais skydeliais ir jų funkcijomis.

Pagrindinės išvados

• Programavimo įrankiuose "Chrome Developer Tools" siūlomi įvairūs skydeliai, padedantys tikrinti ir derinti svetainės HTML, CSS ir "JavaScript".
• Kiekvienas skydelis turi konkrečių funkcijų, kurios labai palengvina svetainių analizę.
• Galite pasirinkti ir redaguoti elementus tiesiai iš rodinio, kad iš karto pamatytumėte pakeitimus.

Žingsnis po žingsnio vadovas

1 veiksmas: atidarykite "Chrome" programuotojo įrankius

Pirmiausia turite atidaryti "Chrome" naršyklę. Yra keli būdai, kaip paleisti "Developer Tools". Tiesiog paspauskite klaviatūros klavišą F12. Kitas būdas - naudoti klavišų kombinaciją Command + Shift + C (Mac) arba Ctrl + Shift + C (Windows). Įrankius taip pat galite atidaryti dešiniuoju pelės klavišu spustelėję interneto svetainę ir pasirinkę "Explore" (tyrinėti).

2 veiksmas: Pritaikykite vaizdą

Atidarę programuotojo įrankius, galite pritaikyti lango vaizdą. Naudodamiesi trimis taškais viršutiniame dešiniajame "Developer Tools" kampe, galite pritaikyti ekrano rodinį padalytame ekrane arba atskirame lange. Jei įrankius atidarote atskirame lange, galite lengvai perkelti juos į antrąjį monitorių, kad atsirastų daugiau vietos.

3 veiksmas: skydelis "Elementai"

Skydelis "Elementai" yra skyrius, kuriame galite matyti savo svetainės HTML struktūrą. Visi DOM elementai čia rodomi hierarchine struktūra. Galite pervesti pelę ant atskirų elementų ir jų matmenys bei padėtis svetainėje bus paryškinti. Elementų hierarchiją galite išplėsti arba suardyti spustelėję rodykles.

4 veiksmas: patikrinkite stilius

Jei rodinyje "Elementai" pasirinkote HTML elementą, dešinėje pusėje galite matyti susijusius CSS stilius. Šie stiliai suskirstyti į skirtingus skyrius: deklaruoti stiliai ir apskaičiuoti stiliai. Galite net pridėti savo CSS taisykles ir matyti pakeitimus realiuoju laiku. Skirtuke "Layout" (išdėstymas) galite pasiekti informaciją apie matmenis, paddingą ir paraštes.

5 veiksmas: naudojimasis konsolės skydeliu

Skydelis "Console" yra labai universalus ir reikalingas daugeliui kūrimo scenarijų. Čia galite rankiniu būdu vykdyti "JavaScript" komandas, stebėti žurnalo išvestis ir peržiūrėti klaidų žurnalus. Atidarę konsolę, automatiškai matysite visus žurnalo išvestis, kurias generuoja jūsų svetainė. Jei reikia, norėdami parodyti arba paslėpti konsolę, paspauskite Escape klavišą.

6 veiksmas: šaltinio kodo derinimas naudojant "Sources" (Šaltiniai)

Skydelyje "Sources" (Šaltiniai) galite peržiūrėti savo projekto šaltinio kodo failus ir prireikus atlikti derinimą. Galite nustatyti nutraukimo taškus, kad galėtumėte žingsnis po žingsnio pereiti per savo programą. Tai ypač naudinga tikrinant kodo srautą ir ieškant klaidų. Čia esančių failų struktūra taip pat panaši į integruoto kūrimo redaktoriaus struktūrą.

7 veiksmas: stebėkite tinklo veiklą

Skydelyje "Tinklas" rodomi visi ištekliai, kurie yra gaunami per tinklą, kai įkeliama jūsų svetainė. Perkrovus puslapį, galite matyti atskiras užklausas, jų įkėlimo laiką ir atitinkamus atsakymo kodus. Čia taip pat galite išjungti spartinančiąją atmintinę, kad užtikrintumėte, jog matysite naujausius ir nekešuotus duomenis.

8 veiksmas: našumas ir atminties našumas

Skirtuke "Performance" (našumas) galite analizuoti savo programos našumą ir atlikti profilio įrašus, kad išanalizuotumėte scenarijaus greitį ir atvaizdavimo laiką. Skydelis "Atmintis" leidžia susipažinti su svetainės atminties naudojimu ir padeda nustatyti atminties nutekėjimą darant momentines nuotraukas ir lyginant jų naudojimą.

9 veiksmas: patikrinkite programos atmintį

Skydelis "Application" ("Programa") svarbus norint stebėti įvairias žiniatinklio programos atminties parinktis, įskaitant "vietinę atmintį", "sesijos atmintį" ir slapukus. Čia galite peržiūrėti visą naršyklės taikomosios programos atmintį, ypač tai, kas saugoma kliento vietinėje atmintyje.

10 veiksmas: Saugumo ir optimizavimo patarimai

Galiausiai skydelyje "Saugumas" apžvelgiami jūsų svetainės saugumo aspektai, o skydelyje "Našumo įžvalgos" pateikiami patarimai, kaip optimizuoti svetainę, kad padidėtų krovimo greitis ir patogumas naudotojui.

Santrauka

Šiame vadove išsamiai apžvelgtos svarbiausios "Chrome" programuotojo įrankių funkcijos. Dabar jau žinote, kaip atidaryti įrankius, naudotis įvairiais skydeliais ir atlikti konkrečius metodus, pavyzdžiui, derinimą ir našumo analizę. Čia įgytos žinios yra būtinos norint efektyviai kurti žiniatinklius.