Čemu služe Chrome DevTools?

Chrome DevTools je set alata za izradu web stranica i uklanjanje grešaka ugrađenih u Google Chrome. Naravno, možemo ih i koristiti u svojoj verziji otvorenog koda; Krom.

Chromeovim alatima za programere moguće je pristupiti pritiskom kombinacije tipki Ctrl + Shift + I, također tako što ćete lebdjeti iznad elementa i desnim klikom na Inspect.

Komponente

Kada otvorimo Chrome DevTools vidimo da se pojavljuje un ploča desno od stranice koju pregledavamo. Sa svoje strane, ovaj panel ePodijeljen je na kartice koje odgovaraju svakom od alata. Zauzvrat, alati su podijeljeni u odjeljke.
Odjeljci su:

• Elementi: Prikazuje različite komponente stranice.
• Konzola: Omogućuje vam pokretanje dijagnostike tijekom razvoja ili interakciju s Javascript kodom kao što biste to radili s Linux terminalom.
• Izvori: Olakšava otklanjanje pogrešaka u Javascript kodu i rad s lokalnim datotekama.
• Mreža: pomaže u praćenju i poboljšanju performansi stranice.
• Vremenska crta: omogućava snimanje i istraživanje različitih događaja koji se dešavaju tokom posete web lokaciji.
• Aplikacija: Istražuje sve resurse koji su učitani; između ostalog, IndexedDB ili Web SQL baze podataka, lokalno i sjedište, kolačići, predmemorija aplikacija, slike, fontovi i listovi stilova.
• Sigurnost: Otkriva sigurnosne probleme u kodu.

Pogledajmo za šta možemo koristiti Chrome DevTools

Popravite ono što ne radi

To se dogodilo svakom programeru. Napišite kôd, provjerite nema li grešaka, a opet u trenutku istine stranica ne radi kako bi trebala. Alat za konzolu pokazuje koja se greška događa u vrijeme izvršenja.

Smanjite vrijeme učitavanja

Ako se stranici treba puno vremena za učitavanje, korisnik se umori i pređe na drugu stranicu. Srećom, era Flash web lokacija i njihovih animiranih uvoda je gotova. U svakom slučaju, kartica Mreže Chrome DevTools olakšava otkrivanje koji elementi odgađaju opterećenje. Možemo ponoviti test za različite brzine veze.

Izmijenite kod

Na kartici Elementi možemo pogledajte elemente stranice, srodni html kod i css svojstva. Možemo ih i promijeniti.

Pomoću naredbe možemo uređivati ​​tekst stranice

document.designMode = 'on';

Isprobajte različite veličine ekrana

Tableti, pametni telefoni, pametni televizori, stolni računari. Lista uređaja s kojima surfamo Internetom raste. Sa Chrome DevTools možemo testirajte izgleda li stranica dobro u različitim veličinama.

benchmarking

U menadžmentu pojam benčmarkinga znači učenje iz najboljih praksi onih koji rade isto što i mi. Uz Chrome DevTolls, ako nam se sviđa dizajn web stranice, možemo pogledajte html kod i css tabele stilova i kopirajte ih na našu stranicu.

Dobivanje Chrome DevTools

Chrome DevTools dostupan je u preglednicima Google Chrome i Chromium. Krom se nalazi u spremištima glavnih distribucija. Može se instalirati i iz trgovina puckanje. Što se tiče Google chromea, možete dođi ovamo. u DEB i RPM formatu