- Arendajatööriistadele juurdepääs ja nende seadistamine otseteede ja kontekstimenüüde abil.
- DOM- ja CSS-stiilide põhjalik analüüs ligipääsetavuse ja reageeriva disaini parandamiseks.
- Toimivusaudit ja ressursikoormuse jälgimine võrgu ja tuletorni paneeli kaudu.
- WPO silumis- ja optimeerimistehnikad SEO positsioneerimise parandamiseks.
Kui töötate veebitööstuses, olgu selleks siis disainimine, programmeerimine või teie saidi Google'is nähtamatuks muutmine, olete ilmselt mingil hetkel kokku puutunud nupuga „ Kontrolli elementi“ . See on lihtsalt värav Chrome DevToolsi, tööriistade arsenali, mis võimaldab teil süveneda mis tahes veebisaidi sisemusse, et mõista, kuidas see toimib, parandada vigu lennult või lihtsalt uurida, mis peitub visuaalse fassaadi taga.
Parim osa on see, et sa ei pea midagi ebatavalist installima; see on brauseris juba sisse ehitatud. Alates pildi laadimise igavikulise aja analüüsimisest kuni CSS-i reaalajas muutmiseni, et näha, kuidas punane nupp välja näeks ilma serveripoolset koodi puudutamata, on Chrome DevTools hindamatu tööriist kõigile, kes soovivad oma projekti kasutajakogemust ja tehnilist jõudlust optimeerida.
Kuidas jõuda DevToolsi tuumani
Selle juhtpaneeli avamiseks on mitu võimalust, olenevalt sellest, kuidas teile kõige mugavam on. Kõige intuitiivsem on paremklõpsata veebilehel ja valida „Kontrolli”. Kui eelistate kiiruse huvides kiirklahve, võite Windowsis ja Linuxis vajutada Ctrl + Shift + I , Macis aga Cmd + Option + I. Samuti võite vajutada klahvi F12, mis sageli toimib paneeli avamise ja sulgemise lülitina.
Kui olete sees, saate valida, kuhu soovite akna paigutada: dokitud paremale, vasakule, alla või isegi eraldi aknasse , mis on suurepärane, kui teil on mitu monitori ja soovite veebisaiti vaadata ühel ja koodi teisel.
Elementide paneel: veebi skelett ja nahk
Elementide vahekaart on koht, kus toimub DOM-i (dokumendiobjektimudeli) võlujõud. Siin ei näe sa serverist saadetud staatilist HTML-koodi, vaid lehe tegelikku dünaamilist esitust , sealhulgas kõike, mida JavaScript on lennult genereerinud. See on ideaalne koht semantilise märgistuse õigsuse kontrollimiseks, mis on lehesisese SEO jaoks ülioluline.
Kui aktiveerite kontrollirežiimi (nooleikoon vasakus ülanurgas), saate hiirekursori veebisaidi kohal hõljutada ja näha täpseid üksikasju: pikslite mõõtmed, taustavärvid, veerised ja täited. See annab teile isegi märku, kui värvikontrast on ebapiisav, mis on veebi ligipääsetavuse jaoks kriitilise tähtsusega . Lisaks saate konsooli kaudu kujundusrežiimi abil eemaldada segavaid elemente, näiteks küpsiste ribareklaame, või teksti otse redigeerida.
Võrgu vahekaardi valdamine
Kui veebisait on aeglane, on esimene koht, kust otsida võrgupaneeli. See tööriist logib iga allalaaditud faili: pildid, skriptid, fondid ja HTML-i enda. Lehe uuesti laadimisel näete kronoloogilist loendit, mis näitab HTTP-vastuse olekut , ressursi tüüpi ja faili suurust.
Lehe laadimisaegade professionaalseks analüüsimiseks on oluline kasutada valikut „tühjenda vahemälu ja laadi uuesti” , kuna see simuleerib uue kasutaja kogemust. Lisaks võimaldab Chrome simuleerida aeglaseid ühendusi (nagu 3G), mis on oluline selle kindlakstegemiseks, kas teie veebisait on kasutatav halva levialaga mobiilseadmetes. Kui soovite veelgi kaugemale minna, saate lubada ekraanipiltide tegemise, et näha täpselt, kuidas leht sekund-sekundilt ressursside allalaadimise ajal kuvatakse.
WPO optimeerimine ja jõudlus Lighthouse'iga
Veebijõudluse optimeerimine (WPO) on veebisaidi lennukaks muutmise kunst. DevToolsi hulgast leiame Lighthouse'i , auditeerimistööriista, mis analüüsib kiirust, ligipääsetavust ja parimaid tavasid. Erinevalt teistest välistest tööriistadest annab Lighthouse konkreetseid soovitusi laadimisaja ja renderdamise parandamiseks.
Jõudluse optimeerimiseks on soovitatav üle vaadata vahekaardid Allikad ja Võrk, et tuvastada kõik liiga suured CSS- või JS-failid, mis tuleks minimeerida või ühendada . Samuti saate kindlaks teha, kas laadite liiga palju ressursse välistest domeenidest (nt Google Fonts) ja kaaluda, kas nende majutamine oma serveris oleks HTTP-päringute vähendamisel tõhusam.
Täiustatud nipid arendajatele ja SEO-dele
Kui teil on vaja JavaScripti vigu siluda, on konsool teie parim sõber. Väga kasulik nipp on kasutada konsoolis muutujat `$0` , mis viitab otse viimasele elemendile, mille elementide paneelil valisite. Teisest küljest, kui soovite teada, mis juhtub ressursi rikke korral, saate päringute blokeerimise funktsiooni abil simuleerida, et CSS-fail või API pole saadaval, ja vaadata, kas veebisait on endiselt funktsionaalne.
Andmete ekstraheerimist soovivatele inimestele võimaldab funktsioon „Kopeeri element” eksportida terve tabeli või loendi struktuuri koodiredaktorisse või kasutada seda isegi Google Sheetsi ImportXML-iga. Kõik see koos reageeriva disainiga , mis emuleerib erinevaid mobiilseadmeid, muudab DevToolsi täielikuks tehnilise analüüsi komplektiks.
Nende tööriistade nutikas kasutamine võimaldab teil muuta aeglase ja halvasti struktureeritud veebisaidi optimeeritud platvormiks, mida Google oma edetabelis premeerib. Elementide kontrolli, võrguanalüüsi ja jõudlusauditite valdamine pole mõeldud ainult programmeerijatele, vaid kõigile, kes soovivad tagada sujuva kasutajakogemuse ja tugeva otsingumootori edetabeli.
Kirglik kirjanik baitide maailmast ja üldse tehnoloogiast. Mulle meeldib jagada oma teadmisi kirjutamise kaudu ja just seda ma selles ajaveebis teengi, näitan teile kõike kõige huvitavamat vidinate, tarkvara, riistvara, tehnoloogiliste suundumuste ja muu kohta. Minu eesmärk on aidata teil digimaailmas lihtsal ja meelelahutuslikul viisil navigeerida.