Chrome DevToolsi abil näeme kohe koodi muudatuste mõju
Chrome DevTools on a Google Chrome'i sisseehitatud veebisaitide loomise ja silumise tööriistade komplekt. Muidugi saame neid ka kasutada selle avatud lähtekoodiga versioonis; Kroom.
Arendajate Chrome'i tööriistadele on võimalik juurde pääseda, vajutades klahvikombinatsiooni Ctrl + Shift + I, hõljutades kursorit elemendi kohal ja paremklõpsates nupul Inspect.
Komponendid
Chrome DevToolsi avamisel näeme, et kuvatakse un paneel sirvitavast lehest paremal. Omalt poolt on see paneel eSee on jagatud vahelehtedele, mis vastavad igale tööriistale. Omakorda on tööriistad jagatud osadeks.
Jaotised on:
- Elemendid: näitab lehe erinevaid komponente.
- Konsool: võimaldab teil diagnostika käivitada arenduse ajal või suhelda Javascripti koodiga nagu Linuxi terminaliga.
- Allikad: hõlbustab Javascripti koodi silumist ja kohalike failidega töötamist.
- Võrk: aitab jälgida ja parandada lehe jõudlust.
- Ajaskaala: võimaldab salvestada ja uurida erinevaid sündmusi, mis toimuvad saidi külastamise ajal.
- Rakendus: uurib kõiki laaditud ressursse; teiste hulgas IndexedDB või Web SQL andmebaasid, kohalik ja seansimälu, küpsised, rakenduste vahemälu, pildid, fondid ja stiililehed.
- Turvalisus: tuvastab koodis turbeprobleemid.
Vaatame, milleks saame Chrome DevToolsi kasutada
Parandage see, mis ei tööta
Seda on juhtunud iga arendajaga. Kirjutage kood, kontrollige, kas pole vigu, ja tõsihetkel ei tööta leht siiski nii, nagu peaks. Konsooli tööriist näitab, mis viga täitmise ajal ilmneb.
Vähendage laadimisaega
Kui lehe laadimine võtab kaua aega, siis kasutaja väsib ja läheb teisele saidile. Õnneks on Flash-veebi ja selle animeeritud introde ajastu möödas. Igatahes Chrome DevToolsi vahekaart Võrgustikud hõlbustab välja selgitada, millised elemendid koormust edasi lükkavad. Testi saame korrata erinevate ühenduse kiiruste korral.
Muutke koodi
Vahekaardil Elements saame vaadake lehe elemente, seotud HTML-koodi ja atribuute css. Saame neid ka muuta.
Saame käsu abil lehe teksti redigeerida
document.designMode = 'on';
Proovige erinevaid ekraanisuurusi
Tahvelarvutid, nutitelefonid, nutitelerid, lauaarvutid. Nimekiri seadmetest, millega me Internetis surfame, kasvab. Chrome DevToolsi abil saame testige, kas leht näeb erineva suurusega hea välja.
Benchmarking
Juhtimises tähendab termin benchmarking õppimist parimate tavade järgi nendelt, kes teevad samamoodi nagu meie. Chrome DevTollsi abil saate meile sobiva veebisaidi kujunduse meeldida vaadake HTML-koodi ja css-stiililehti ja kopeerige need meie saidile.
Chrome'i DevToolsi hankimine
Chrome DevTools on saadaval Google Chrome'i ja Chromiumi brauserites. Kroom on suuremate jaotuste hoidlates. Seda saab paigaldada ka Tõmme. Mis puutub Google Chrome'i, siis saate seda teha tule siia. DEB ja RPM vormingus