- Kehittäjätyökalujen käyttö ja konfigurointi pikakuvakkeiden ja kontekstivalikoiden avulla.
- DOM- ja CSS-tyylien perusteellinen analyysi esteettömyyden ja responsiivisen suunnittelun parantamiseksi.
- Suorituskyvyn tarkastus ja resurssien kuormituksen seuranta Network and Lighthouse -paneelin kautta.
- WPO-virheenkorjaus- ja optimointitekniikat SEO-sijoituksen parantamiseksi.
Jos työskentelet verkkoalalla, olitpa sitten suunnittelun, ohjelmoinnin tai sivustosi näkyvyyden varmistamisen parissa, olet luultavasti törmännyt " tarkista elementti" -painikkeeseen jossain vaiheessa . Se on yksinkertaisesti portti Chrome DevToolsiin, työkaluarsenaaliin, jonka avulla voit perehtyä minkä tahansa verkkosivuston toimintaan ja ymmärtää, miten se toimii, korjata virheitä lennossa tai yksinkertaisesti tutkia, mitä visuaalisen julkisivun takana on.
Parasta on, että sinun ei tarvitse asentaa mitään epätavallista; selaimessa on se jo sisäänrakennettuna. Chrome DevTools on korvaamaton työkalu kaikille, jotka haluavat optimoida projektinsa käyttökokemuksen ja teknisen suorituskyvyn, olipa kyse sitten kuvan latautumisen keston analysoinnista tai CSS:n muokkaamisesta reaaliajassa, jotta näet, miltä punainen painike näyttäisi koskematta palvelinpuolen koodiin.
Kuinka päästä DevToolsin ytimeen
Ohjauspaneelin voi avata useilla tavoilla riippuen siitä, mikä on kätevin tapa. Intuitiivisin tapa on napsauttaa hiiren kakkospainikkeella mitä tahansa verkkosivun kohtaa ja valita "Tarkasta". Jos haluat nopeuden lisäämiseksi pikanäppäimiä, Windowsissa ja Linuxissa voit painaa Ctrl + Shift + I , kun taas Macissa yhdistelmä on Cmd + Option + I. Voit myös painaa F12-näppäintä, joka usein toimii paneelin avaamiseen ja sulkemiseen tarkoitettuna vaihtopainikkeena.
Kun olet sisällä, voit valita, mihin haluat ikkunan sijoittuvan: telakoituna oikealle, vasemmalle, alareunaan tai jopa erilliseen ikkunaan , mikä on kätevää, jos sinulla on useita näyttöjä ja haluat katsella verkkosivustoa yhdellä ja koodia toisella.
Elementtipaneeli: Verkon luuranko ja kuori
Elementit-välilehti on DOM:n (Document Object Model) taian ydin. Täällä et näe palvelimelta lähetettyä staattista HTML-koodia, vaan sivun todellisen, dynaamisen esityksen , mukaan lukien kaiken, mitä JavaScript on luonut lennossa. Se on ihanteellinen paikka tarkistaa semanttisen merkinnän oikeellisuus, mikä on olennaista sivun sisäisen hakukoneoptimoinnin kannalta.
Jos aktivoit tarkastustilan (nuolikuvake vasemmassa yläkulmassa), voit viedä hiiren osoittimen verkkosivuston päälle ja nähdä tarkat tiedot: pikselimitat, taustavärit, marginaalit ja täyttö. Se jopa hälyttää, jos värikontrasti on riittämätön, mikä on kriittistä verkkosivuston saavutettavuuden kannalta . Lisäksi voit poistaa häiritseviä elementtejä, kuten evästebannereita, tai muokata tekstiä suoraan suunnittelutilassa konsolin kautta.
Verkko-välilehden hallinta
Kun verkkosivusto on hidas, verkkopaneeli on ensimmäinen paikka, josta kannattaa tarkistaa tiedot. Tämä työkalu kirjaa kaikki ladatut tiedostot: kuvat, skriptit, fontit ja itse HTML-koodin. Kun lataat sivun uudelleen, näet aikajärjestyksessä olevan luettelon, joka näyttää HTTP-vastauksen tilan , resurssin tyypin ja tiedostokoon.
Sivujen latausaikojen ammattimaiseen analysointiin on tärkeää käyttää "tyhjennä välimuisti ja lataa uudelleen" -vaihtoehtoa , koska se simuloi uuden käyttäjän kokemusta. Lisäksi Chrome mahdollistaa hitaiden yhteyksien (kuten 3G) simuloinnin , mikä on olennaista sen määrittämiseksi, onko verkkosivustosi käytettävissä mobiililaitteilla, joilla on heikko kuuluvuus. Jos haluat mennä vielä pidemmälle, voit ottaa käyttöön kuvakaappauksia nähdäksesi tarkalleen, miten sivu renderöityy sekunti sekunnilta resurssien latauksen aikana.
WPO-optimointi ja suorituskyky Lighthousen avulla
Verkkosivujen suorituskyvyn optimointi (WPO) on taito saada verkkosivusto lentämään. DevTools-työkaluista löytyy Lighthouse , auditointityökalu, joka analysoi nopeutta, saavutettavuutta ja parhaita käytäntöjä. Toisin kuin muut ulkoiset työkalut, Lighthouse antaa konkreettisia ehdotuksia latausajan ja renderöinnin parantamiseksi.
Suorituskyvyn optimoimiseksi on suositeltavaa tarkistaa Lähteet- ja Verkko-välilehdet, jotta voit tunnistaa suuret CSS- tai JS-tiedostot, jotka tulisi minimoida tai yhdistää . Voit myös selvittää, lataatko liikaa resursseja ulkoisista verkkotunnuksista (kuten Google Fonts), ja harkita, olisiko niiden isännöinti omalla palvelimella tehokkaampaa HTTP-pyyntöjen vähentämisen kannalta.
Edistyneitä temppuja kehittäjille ja hakukoneoptimoijille
Jos sinun täytyy debugata JavaScript-virheitä, konsoli on paras ystäväsi. Hyvin hyödyllinen kikka on käyttää konsolin `$0`-muuttujaa , joka viittaa suoraan viimeksi valitsemaasi elementtiin Elementit-paneelissa. Toisaalta, jos haluat tietää, mitä tapahtuu, kun resurssi epäonnistuu, voit käyttää pyyntöjen estotoimintoa simuloidaksesi, että CSS-tiedosto tai API ei ole käytettävissä, ja tarkistaaksesi, toimiiko verkkosivusto edelleen.
Niille, jotka haluavat poimia tietoja, "Kopioi elementti" -toiminnolla voit viedä koko taulukon tai listan rakenteen koodieditoriin tai jopa käyttää sitä ImportXML:n kanssa Google Sheetsissä. Kaikki tämä yhdistettynä responsiiviseen suunnitteluun , joka emuloi eri mobiililaitteita, tekee DevToolsista täydellisen teknisen analyysin työkalupakin.
Näiden työkalujen älykäs käyttö mahdollistaa hitaan ja huonosti jäsennellyn verkkosivuston muuttamisen optimoiduksi alustaksi, jonka Google palkitsee sijoituksissaan. Elementtitarkastusten, verkkoanalyysin ja suorituskykytarkastusten hallitseminen ei ole vain ohjelmoijille, vaan kaikille, jotka haluavat varmistaa saumattoman käyttökokemuksen ja vahvan sijoituksen hakukoneissa.
Intohimoinen kirjoittaja tavujen maailmasta ja tekniikasta yleensä. Rakastan jakaa tietämykseni kirjoittamalla, ja sen aion tehdä tässä blogissa, näyttää sinulle kaikki mielenkiintoisimmat asiat vempaimista, ohjelmistoista, laitteistoista, teknologisista trendeistä ja muusta. Tavoitteeni on auttaa sinua navigoimaan digitaalisessa maailmassa yksinkertaisella ja viihdyttävällä tavalla.