Čemu služe Chrome DevTools?

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

Chromeovim alatima za programere moguće je pristupiti pritiskom na kombinaciju tipki Ctrl + Shift + I, također tako da zadržite pokazivač iznad elementa i desnim klikom na Inspect (Provjeri).

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 vašem Javascript kodu i rad s lokalnim datotekama.
• Mreža: pomaže u praćenju i poboljšanju performansi stranice.
• Vremenska crta: omogućuje snimanje i istraživanje različitih događaja koji se događaju tijekom posjeta web mjestu.
• Primjena: istražuje sve resurse koji su učitani; između ostalog, IndexedDB ili Web SQL baze podataka, lokalna pohrana i pohrana sesija, kolačići, predmemorija aplikacija, slike, fontovi i tablice stilova.
• Sigurnost: otkriva sigurnosne probleme u kodu.

Pogledajmo za što možemo koristiti Chrome DevTools

Popravite ono što ne radi

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

Smanjite vrijeme učitavanja

Ako se stranici treba puno vremena za učitavanje, korisnik se umori i ode na drugo mjesto. Srećom, prošlo je doba Flash weba i njegovih animiranih uvoda. 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 spajanja.

Izmijenite kod

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

Tekst stranice možemo uređivati ​​pomoću naredbe

document.designMode = 'on';

Isprobajte različite veličine zaslona

Tableti, pametni telefoni, pametni televizori, stolna računala. Popis uređaja s kojima surfamo Internetom raste. Pomoću 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. S Chrome DevTolls, ako nam se sviđa dizajn web stranice, možemo pregledajte 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. Također se može instalirati iz trgovina Puckanje. Što se tiče Google chromea, možete dođi ovamo. u DEB i RPM formatu