Selles õpetuses saate põhjaliku ülevaate Chrome'i arendajatööriistadest. Need tööriistad on veebiarendajatele hädavajalikud, sest need pakuvad mitmesuguseid väärtuslikke funktsioone, mis aitavad teil oma veebisaite analüüsida ja siluda. Alustame põhitõdedest ja juhatame teid samm-sammult läbi erinevate paneelide ja nende funktsioonide.
Peamised järeldused
- Chrome'i arendajatööriistad pakuvad mitmesuguseid paneele, mis aitavad teil kontrollida ja siluda oma veebisaidi HTML-i, CSS-i ja JavaScripti.
- Igal paneelil on spetsiifilised funktsioonid, mis muudavad veebisaitide analüüsimise palju lihtsamaks.
- Saate valida ja muuta elemente otse vaates, et näha koheseid muudatusi.
Samm-sammult juhend
Samm 1: Avage Chrome'i arendajatööriistad
Kõigepealt peate avama oma Chrome'i brauseri. Arendustööriistade käivitamiseks on mitu võimalust. Vajutage lihtsalt klaviatuuril klahvi F12. Teine meetod on kasutada klahvikombinatsiooni Command + Shift + C (Mac) või Ctrl + Shift + C (Windows). Tööriistad saate avada ka, tehes veebilehel paremklõpsu ja valides "Explore".
2. samm: Vaate kohandamine
Kui olete avanud Developer Tools'i, saate akna vaate kohandada. Kasutades Developer Tools'i paremas ülemises nurgas olevaid kolme punkti, saate kohandada kuvamist kas jagatud ekraani režiimis või eraldi aknas. Kui avate tööriistad eraldi aknas, saate need hõlpsasti teise monitorile üle viia, et luua rohkem ruumi.
3. samm: paneel "Elements"
Paneel "Elements" on osa, kus näete oma veebisaidi HTML-struktuuri. Kõik DOM-elemendid kuvatakse siin hierarhilises struktuuris. Saate liikuda hiirega üksikute elementide kohal ning nende mõõtmed ja asukohad tõstetakse veebilehel esile. Elementide hierarhiat saate laiendada või kokku tõmmata, klõpsates nooltele.
4. samm: Stiilide kontrollimine
Kui olete vaates "Elements" valinud HTML-elemendi, näete paremal pool sellega seotud CSS-stiile. Need stiilid on jaotatud erinevatesse osadesse: deklareeritud stiilid ja arvutatud stiilid. Saate isegi lisada oma CSS-reegleid ja näha muutusi reaalajas. Vahekaardil "Layout" saate juurdepääsu teabele mõõtmete, polstrite ja marginaalide kohta.
Samm 5: Konsooli paneeli kasutamine
Paneel "Console" on äärmiselt mitmekülgne ja seda on vaja paljudes arendusstsenaariumides. Siin saate käsitsi JavaScript-käske käivitada, jälgida logiväljundit ja vaadata vealogisid. Kui avate konsooli, näete automaatselt kõiki veebisaidi poolt genereeritud logiväljundeid. Vajutage Escape-klahvi, et konsooli vajadusel näidata või peita.
6. samm: lähtekoodi silumine "Sources" abil
Paneelis "Sources" saate vaadata oma projekti lähtekoodifaile ja vajadusel teostada silumist. Saate seadistada katkestuspunkte, et minna oma rakendust samm-sammult läbi. See on eriti kasulik teie koodi liikumise kontrollimiseks ja vigade leidmiseks. Ka siinsete failide struktuur on sarnane integreeritud arendusredaktori omaga.
Samm 7: Jälgige võrguaktiivsust
Paneel "Network" näitab teile kõiki ressursse, mida teie veebisaidi laadimisel võrgu kaudu hangitakse. Pärast lehe uuesti laadimist näete üksikuid päringuid, nende laadimisaega ja vastavaid vastusekoode. Siin saate ka vahemälu deaktiveerida, et näha kõige värskemaid ja mitte vahemällu salvestatud andmeid.
8. samm: jõudlus ja mälu jõudlus
Vahekaardil "Performance" saate analüüsida oma rakenduse jõudlust ja teha profiili salvestusi, et analüüsida skriptide kiirust ja renderdusaega. Paneel "Memory" annab teile ülevaate veebisaidi mälukasutusest ja aitab teil tuvastada mälulekkeid, tehes hetkeseansse ja võrreldes nende kasutust.
Samm 9: Kontrollige rakenduse mälu
Paneel "Application" on oluline veebirakenduse erinevate mäluvõimaluste, sealhulgas "kohaliku mälu", "seansimälu" ja küpsiste jälgimiseks. Siin saate vaadata kogu oma rakenduse brauseri mälu, eriti seda, mis on kliendil lokaalselt salvestatud.
10. samm: Turvalisuse ja optimeerimise nõuanded
Lõpuks annab paneel "Security" ülevaate teie veebisaidi turvaaspektidest, samas kui paneel "Performance Insights" annab teile nõuandeid, kuidas optimeerida oma veebisaiti, et parandada laadimiskiirust ja kasutajasõbralikkust.
Kokkuvõte
See juhend andis teile põhjaliku ülevaate Chrome'i arendajatööriistade kõige olulisematest funktsioonidest. Te teate nüüd, kuidas tööriistu avada, kasutada erinevaid paneele ja teostada konkreetseid tehnikaid, nagu näiteks silumine ja jõudlusanalüüsid. Siin omandatud teadmised on tõhusa veebiarenduse jaoks hädavajalikud.
Korduma kippuvad küsimused
Kuidas avada Chrome'i arendajatööriistad? Chrome'i arendajatööriistad saab avada, vajutades F12, Command + Shift + C (Mac) või Ctrl + Shift + C (Windows).
Mida näitab paneel "Konsool"?Paneel "Konsool" näitab logiväljundit, vealogisid ja võimaldab teil käsitsi JavaScript-käske täita.
Kuidas saab Developer Tools'i vaadet kohandada?Developer Tools'i vaadet saab kohandada jagatud ekraani režiimis või eraldi aknas ja teisel monitoril.
Mida pakub paneel "Network" (võrk)? Paneel "Network" (võrk) näitab kõiki võrgutegevusi, laadimisaegu ja vastusekoode serveriga suhtlemisel.
Kuidas ma saan kontrollida oma veebisaidi jõudlust? Vahekaardil "Performance" saate salvestada ja analüüsida jõudlusprofiile ning paneel "Memory" aitab teil tuvastada mäluprobleeme.
