- Pristup i konfiguracija alata za razvojne programere pomoću prečaca i kontekstnih izbornika.
- Dubinska analiza DOM i CSS stilova za poboljšanje pristupačnosti i responzivnog dizajna.
- Revizija performansi i praćenje opterećenja resursa putem panela Network i Lighthouse.
- Tehnike otklanjanja pogrešaka i optimizacije WPO-a za poboljšanje SEO pozicioniranja.
Ako radite u web industriji, bilo da se bavite dizajnom, programiranjem ili pokušavate osigurati da vaša stranica nije nevidljiva na Googleu, vjerojatno ste u nekom trenutku naišli na gumb " pregledaj element" . To je jednostavno ulaz u Chrome DevTools, arsenal alata koji vam omogućuje da zaronite u unutarnje funkcioniranje bilo koje web stranice kako biste razumjeli kako funkcionira, ispravili greške u hodu ili jednostavno istražili što se krije iza vizualne fasade.
Najbolje od svega je što ne morate instalirati ništa neobično; preglednik to već ima ugrađeno. Od analize zašto se slika predugo učitava do mijenjanja CSS-a u stvarnom vremenu kako bi se vidjelo kako bi crveni gumb izgledao bez dodirivanja koda na strani poslužitelja, Chrome DevTools je neprocjenjiv alat za sve koji žele optimizirati korisničko iskustvo i tehničke performanse svog projekta.
Kako ući u srce DevToolsa
Postoji nekoliko načina za otvaranje ove upravljačke ploče, ovisno o tome što vam je najpraktičnije. Najintuitivniji je kliknuti desnom tipkom miša bilo gdje na web stranici i odabrati "Pregledaj". Ako radije koristite tipkovničke prečace, na Windowsima i Linuxu možete pritisnuti Ctrl + Shift + I , dok je na Macu kombinacija Cmd + Option + I. Također možete pritisnuti tipku F12, koja često služi kao prekidač za otvaranje i zatvaranje ploče.
Jednom kada uđete unutra, možete odabrati gdje želite da se prozor nalazi: usidren desno, lijevo, na dnu ili čak u zasebnom prozoru , što je izvrsno ako imate više monitora i želite web-stranicu vidjeti na jednom, a kod na drugom.
Panel Elementi: Kostur i koža weba
Kartica Elementi je mjesto gdje se događa magija DOM-a (Document Object Model). Ovdje ne vidite statički HTML kod poslan s poslužitelja, već stvarni , dinamički prikaz stranice, uključujući sve što je JavaScript generirao u hodu. To je idealno mjesto za provjeru ispravnosti semantičkog označavanja, što je temeljno za SEO optimizaciju na stranici.
Ako aktivirate Način pregleda (ikona strelice u gornjem lijevom kutu), možete zadržati pokazivač miša iznad web stranice i vidjeti precizne detalje: dimenzije piksela, boje pozadine, margine i ispunu. Čak vas upozorava ako je kontrast boja nedovoljan, što je ključno za pristupačnost weba . Nadalje, možete ukloniti elemente koji odvlače pažnju, poput bannera kolačića, ili izravno urediti tekst pomoću Načina dizajna putem konzole.
Savladavanje kartice Mreža
Kada je web stranica spora, prvo mjesto koje treba provjeriti je Mrežna ploča. Ovaj alat bilježi svaku preuzetu datoteku: slike, skripte, fontove i sam HTML. Kada ponovno učitate stranicu, vidjet ćete kronološki popis koji prikazuje status HTTP odgovora , vrstu resursa i veličinu datoteke.
Za profesionalnu analizu vremena učitavanja stranice, ključno je koristiti opciju "izbriši predmemoriju i ponovno učitaj" , jer to simulira iskustvo novog korisnika. Osim toga, Chrome vam omogućuje simuliranje sporih veza (poput 3G), što je bitno za određivanje je li vaša web stranica upotrebljiva na mobilnim uređajima sa slabom pokrivenošću. Ako želite ići još dalje, možete omogućiti snimke zaslona kako biste točno vidjeli kako se stranica prikazuje sekundu po sekundu kako se resursi preuzimaju.
Optimizacija i performanse WPO-a s Lighthouseom
Optimizacija web performansi (WPO) je umjetnost stvaranja web stranice. Među DevToolsima nalazimo Lighthouse , alat za reviziju koji analizira brzinu, pristupačnost i najbolje prakse. Za razliku od drugih vanjskih alata, Lighthouse vam daje konkretne prijedloge za poboljšanje vremena učitavanja i renderiranja.
Za optimizaciju performansi preporučuje se pregled kartica Izvori i Mreža kako biste identificirali sve pretjerano velike CSS ili JS datoteke koje treba minimizirati ili kombinirati . Također možete utvrditi učitavate li previše resursa s vanjskih domena (kao što su Google Fontovi) i razmotriti bi li njihovo hostiranje na vlastitom poslužitelju bilo učinkovitije u smanjenju HTTP zahtjeva.
Napredni trikovi za developere i SEO stručnjake
Ako trebate otkloniti pogreške u JavaScriptu, konzola vam je najbolji prijatelj. Vrlo koristan trik je korištenje varijable `$0` u konzoli , koja izravno referencira zadnji element koji ste odabrali u ploči Elementi. S druge strane, ako želite znati što se događa kada resurs zakaže, možete upotrijebiti značajku blokiranja zahtjeva kako biste simulirali da CSS datoteka ili API nisu dostupni i vidjeli je li web stranica i dalje funkcionalna.
Za one koji žele izdvojiti podatke, funkcija "Kopiraj element" omogućuje izvoz strukture cijele tablice ili popisa u uređivač koda ili čak korištenje s ImportXML-om u Google tablicama. Sve to, u kombinaciji s responzivnim dizajnom koji emulira različite mobilne uređaje, čini DevTools cjelovitim paketom za tehničku analizu.
Inteligentna upotreba ovih alata omogućuje vam transformaciju spore, loše strukturirane web stranice u optimiziranu platformu koju Google nagrađuje u svojim rangiranjima. Savladavanje inspekcije elemenata, analize mreže i revizija performansi nije samo za programere, već za sve koji žele osigurati besprijekorno korisničko iskustvo i snažan rang na tražilicama.
Strastveni pisac o svijetu bajtova i tehnologije općenito. Volim dijeliti svoje znanje pisanjem, a to je ono što ću učiniti na ovom blogu, pokazati vam sve najzanimljivije stvari o gadgetima, softveru, hardveru, tehnološkim trendovima i još mnogo toga. Moj cilj je pomoći vam da se snađete u digitalnom svijetu na jednostavan i zabavan način.