„Chrome DevTools“: išsamus vadovas, kaip išnaudoti visas kūrėjo įrankių galimybes

„Chrome DevTools“ tapo nepakeičiamu pagalbininku bet kuriam žiniatinklio kūrėjui, dizaineriui ar SEO specialistui, norinčiam pagerinti svetainės našumą, prieinamumą ir paieškos sistemų reitingą. Šie įrankiai, integruoti į „Google Chrome“, suteikia išsamių įžvalgų ir leidžia valdyti svetainės funkcionalumą, pradedant HTML ir CSS tikrinimu, baigiant išsamia tinklo veiklos analize, našumo testavimu ir mobiliųjų įrenginių optimizavimu.

Ar norėtumėte įvaldyti „Chrome DevTools“ ir išnaudoti visas jo funkcijas, kad galėtumėte derinti, optimizuoti ir diagnozuoti problemas bet kurioje svetainėje? Šiame straipsnyje aiškiai, pateikdami pavyzdžių ir patarimų, paaiškinsime viską, ką reikia žinoti, kad pradėtumėte išnaudoti visas šių įrankių galimybes, įskaitant tai, kaip juos greitai atidaryti, ką galite analizuoti naudodami kiekvieną skydelį, kam skirta kiekviena funkcija ir kaip jas taikyti tiek kūrimo, tiek SEO srityse.

Kas yra „Chrome DevTools“ ir kodėl jie tokie galingi?

„Chrome DevTools“ kūrėjo įrankių rinkinys yra integruotas „Google Chrome“ skydelis, skirtas bet kuriam vartotojui analizuoti, derinti ir optimizuoti bet kurios svetainės kodą bei našumą neįdiegiant papildomų papildinių . Naudodami daugybę skirtukų ir funkcijų, galite tikrinti elementus, keisti stilius realiuoju laiku, stebėti tinklo veiklą, derinti scenarijus, vertinti našumą ir net imituoti svetainės elgseną mobiliuosiuose įrenginiuose . Jo taikymo sritis yra daug platesnė nei vien „šaltinio kodo peržiūra“: jis leidžia patirti, kaip svetainė sąveikauja, kaip „Google“ jį interpretuoja ir kaip vartotojas joje naršo iš skirtingų įrenginių ar ryšių.

Kaip pasiekti „Chrome DevTools“: spartieji klavišai ir kontekstinis meniu

Pasiekti „Chrome DevTools“ yra neįtikėtinai paprasta ir yra keletas būdų, kaip tai padaryti, priklausomai nuo jūsų operacinės sistemos ir nuostatų:

• Dešiniuoju pelės mygtuku spustelėkite puslapį, kurį norite analizuoti. ir pasirinkite „Apžiūrėti“. Tai vizualiausias ir dažniausiai naudojamas metodas.
• Naudokite spartieji klavišai konkrečiai jūsų operacinei sistemai:
  Windows / Linux: Ctrl + Shift + I
  "Mac": „Cmd“ + „Option“ + I
• Taip pat galite eiti į „Chrome“ meniu (trys vertikalūs taškai dešinėje nuo adreso juostos) ir pasirinkti Daugiau įrankių > Kūrėjo įrankiai.
• Norėdami atidaryti konkrečius skydelius tiesiogiai naudodami klaviatūrą:
  • Elementų skydelis (HTML/CSS): Ctrl + Shift + C (Windows/Linux) arba Cmd + Option + C („Mac“)
  • Konsolė: Ctrl + Shift + J (Windows/Linux) arba Cmd + Option + J („Mac“)
  • Paskutinis naudotas skydelis: F12 (daugumoje sistemų) arba Ctrl + Shift + I / Cmd + Option + I
• Automatiškai atidaryti „DevTools“ kiekviename naujame skirtuke (labai naudinga tiems, kurie laiką skiria derinimui): paleiskite „Chrome“ su parinktimi --auto-open-devtools-for-tabs iš komandinės eilutės.

Nepamirškite: atidarę „DevTools“, galite nuspręsti, ar norite juos prisegti lango dešinėje, kairėje, apačioje ar net atskirame lange – tai ypač patogu, jei dirbate su keliais ekranais.

Ką galite daryti su „Chrome DevTools“? Apžvelkite pagrindines funkcijas.

„Chrome DevTools“ yra padalintas į kelias paneles. Kiekviena iš jų apima esminį žiniatinklio analizės ir optimizavimo aspektą. Čia pateikiami dažniausiai naudojami skydeliai ir jų svarbiausios funkcijos:

Elementų skydas: DOM ir CSS tiesioginė apžiūra ir redagavimas

Šis skydelis yra daugelio derinimo ir vizualinės analizės užduočių atspirties taškas. Jis leidžia jums:

• Patikrinkite tikslią DOM (dokumento objektų modelio) struktūrą ką naršyklė pateikia, t. y. ką „Google“ iš tikrųjų mato paleidusi scenarijus ir įkėlusi stilius.
• HTML ir CSS modifikavimas akimirksniu, akimirksniu patikrinant, kaip pakeitimai atrodo svetainėje (puikiai tinka prototipų kūrimui arba naujų stiliaus taisyklių testavimui nepaveikiant tikrojo šaltinio kodo).
• Tvarkyti klases ir stilius elementų: galite aktyvuoti, deaktyvuoti arba išbandyti naujas klases ir redaguoti vizualines detales, kad dizainas būtų pritaikomas pagal poreikius.
• Peržiūrėkite ir manipuliuokite specialiais atributais (pvz., „data-nosnippet“), kurie yra esminiai SEO optimizavimui, nes galite patikrinti, ar „Google“ galės indeksuoti tam tikrą turinį.
• Patikrinkite, ar yra elementų ar blokų, kurie matomi tik po vartotojo veiksmo (pvz., skirtukai ar išskleidžiamieji meniu, kuriems rodyti reikalinga „JavaScript“).
• Greita prieiga prie patikrinto elemento konsolėje kaip $0, leidžiančią ja tiesiogiai manipuliuoti naudojant „JavaScript“.

Patarimas! Šiame skydelyje taip pat galite imituoti skirtingus ekranų dydžius ir mobiliuosius įrenginius, užtikrindami, kad jūsų svetainė tikrai prisitaikytų prie skirtingų poreikių.

Tinklo skydas: analizuoja išteklių apkrovą, diagnozuoja delsą ir imituoja lėtą ryšį

Vienas iš esminių našumo analizės ataskaitų suvestinių . Čia galite jį pamatyti chronologine tvarka ir išsamiai:

• Visi ištekliai, kurių buvo prašoma įkeliant puslapį (HTML, paveikslėliai, CSS, JS, vaizdo įrašai, šriftai ir kt.).
• Kokia tvarka jie atsisiunčiami, koks įkėlimo laikas ir dydis kiekvieno ištekliaus: tai labai svarbu nustatant kliūtis arba nereikalingus išteklius.
• Paspaudę ant kiekvieno šaltinio, galite patikrinti HTTP antraštės, talpyklos politikos, atsakymo laikasir netgi pažiūrėti, ar yra sumažintų failų.
• Lėtų ryšių modeliavimas (3G, 4G ir kt.), kad matytumėte tikrąjį našumą savo naudotojų įrenginiuose, o ne tik savo kompiuteryje.
• Funkcija Išvalyti talpyklą ir įkelti iš naujo, naudinga norint patikrinti naujo vartotojo patirtį.
• Užklausų blokavimas: analizuoja tam tikrų išteklių atsisakymo poveikį (pavyzdžiui, main.css išjungimas ir puslapio konfigūracijos sutrikimo stebėjimas).
• Išplėstinis filtravimas: paieška pagal failo tipą, šaltinio domeną, reguliariąsias išraiškas arba konkrečius atributus, idealiai tinka išorinių atsisiuntimų auditui arba saugumo stebėjimui.
• Ekrano kopijų darymas įvairiuose puslapio įkėlimo etapuose, todėl galite žingsnis po žingsnio matyti, kas rodoma vartotojui.

Konkrečiai SEO ir WPO: išanalizuokite, kas įkeliama pirmiausia ir kaip tai veikia našumą bei „Web Vitals“ , suprasdami, kaip optimizuoti „Google“ ir jūsų lankytojų patirtį.

Konsolės skydelis: derinkite, paleiskite scenarijus ir gaukite įspėjimus realiuoju laiku

Konsolėje galite realiuoju laiku peržiūrėti svetainės siunčiamus žurnalus, „JavaScript“ klaidas ir saugos įspėjimus . Taip pat galite:

• Tiesiogiai vykdyti „JavaScript“ komandas atidarytame puslapyje, idealiai tinka greitiems testams ar automatizavimui.
• Sąveikaukite su paskutiniu patikrintu elementu naudodami kintamąjį $0 (ir $1, $2 ir t. t.), pagreitindami sudėtingesnį derinimą.
• Spustelėkite klaidas arba įspėjimus, kad pereitumėte tiesiai į netinkamo JS failo eilutę.

Šaltinių skydas: peržiūrėkite ir derinkite statinius failus ir išorinius išteklius

Šiame skyriuje rodoma į svetainę įkeltų failų struktūra : scenarijai, stiliai, vaizdai ir kt., suskirstyti pagal domenus:

• Pasidomėkite, ar naudojate išorinius išteklius, pvz., „Google Fonts“.ir svarsto galimybę juos talpinti vietoje, kad padidintų greitį.
• Tai leidžia atidaryti, redaguoti ir išsaugoti šaltinio failus testavimui.
• Analizuokite sutrumpintus scenarijus, išplėskite kodą, kad jis būtų lengviau skaitomas, ir patikrinkite, ar nėra paslėptų priklausomybių.

Įrašymo įrenginys: imituoja vartotojo kelionę ir matuoja jo tikrąją patirtį

Įrašymo funkcija leidžia imituoti tikrąjį vartotojo naršymą ir nustatyti konkrečias problemas:

• Galite įrašyti naršymo srautą (pvz., spustelėjimus meniu, formų pildymą, perėjimą iš vieno puslapio į kitą), patikrinti, kaip svetainė reaguoja, ir analizuoti kiekvieno veiksmo įkėlimo laiką.
• Idealiai tinka aptikti kliūtis kritiniuose konversijų ar UX keliuose.

Švyturys: išsamus našumo, prieinamumo ir geriausios praktikos auditas

„Lighthouse“, integruota į „Chrome DevTools“ ir taip pat prieinama kaip papildinys , yra pagrindinė funkcija:

• Atlikk automatiniai auditai našumas (WPO), prieinamumas, geriausia praktika, SEO ir PWA (progresyviosios žiniatinklio programos).
• Pateikia a Bendras rezultatas ir praktines rekomendacijas kiekvienam skyriui, tiek jau paskelbtoms, tiek kuriamoms svetainėms.
• Tai leidžia analizuoti svetainę darbalaukio ir mobiliajame režime, todėl labai naudinga nustatant mobiliesiems įrenginiams pritaikytas problemas.

Praktinis pritaikymas: kaip panaudoti „DevTools“ WPO ir SEO sritims

„Chrome DevTools“ yra pagrindinė svetainių optimizavimo priemonė visais lygmenimis: nuo pradinio dizaino iki skelbimų užklausų analizės ir SEO audito puslapyje. Kai kurie pagrindiniai jų panaudojimo būdai:

Našumo optimizavimas (WPO)

• Atpažįsta vaizdus ir didelius failus iš skirtuko „Tinklas“ ir nustatykite jo optimizavimo prioritetus (glaudinimas, nauji formatai, vėlyvas įkėlimas).
• Įvertinkite išorinių išteklių apkrovąJei laikas ilgas, apsvarstykite galimybę juos atsisiųsti iš savo serverio.
• Pakeiskite įkėlimo prioritetą taip, kad pirmiausia būtų pateikiami svarbiausi elementai (Kritinis kelias).
• Išjunkite talpyklą tinklo skydelyje Analizuodami pakeitimus, įsitikinkite, kad informacija nėra saugoma lokaliai.
• Norėdami patikrinti mobiliojo vartotojo patirtį, naudokite lėto ryšio simuliatorių.

Išteklių mažinimas (CSS ir „JavaScript“)

• Skirtuke „Šriftai“ randa per didelius, nesumažintus arba pasikartojančius failus.
• Suvienodinkite ir sumažinkite CSS ir JS, kad sumažintumėte užklausų skaičių ir pagerintumėte įkėlimo laiką.

Struktūrinė analizė, prieinamumas ir SEO

• Peržiūrėkite antraščių, atributų ir HTML semantikos struktūrą: įsitikinkite, kad loginė struktūra (h2, h3, ALT žymos, vaidmenys) yra optimali „Google“.
• Pasitikrinkite su „Lighthouse“ būtinų etikečių ir duomenų buvimas SEO, prieinamumo ir PWA sistemoms.
• Išanalizuokite „JavaScript“ poveikį atvaizdavimui ir nepamirškite, kad „Google“ gali neinterpretuoti, kas priklauso nuo vartotojo sąveikos, jei tai nematoma įkeliant.
• Stebi slapukų, vietinės saugyklos ir kitų naršyklės išteklių naudojimą.

Turinio išgavimas ir manipuliavimas siekiant jį išgauti arba eksportuoti

• Galite naudoti funkciją „Kopijuoti elementą“, norėdami tiesiogiai eksportuoti dideles lenteles ar sąrašus į skaičiuokles arba kodo redaktorius.
• Norėdami efektyviai redaguoti ekrano turinį, paruošti vaizdus arba eksportuoti aktualią informaciją, naudokite konsolę ir dizaino režimą.

Realiojo laiko pritaikymas ir derinimas

• Paslėpkite reklaminius skydelius ar erzinančius elementus tiesiogiai, taikydami ekranas: nėra per inspektorių.
• Naudokite „JavaScript“ iš konsolės, kad vykdytumėte komandas pasirinktuose elementuose arba net įjungtumėte ir išjungtumėte puslapio redagavimo režimą.

„Chrome DevTools“ apribojimai mobiliuosiuose įrenginiuose

Nors „Inspect Element“ ir visi „Chrome DevTools“ visada pasiekiami darbalaukio versijose, „DevTools“ nėra tiesiogiai pasiekiami išmaniuosiuose telefonuose ir planšetiniuose kompiuteriuose . Tam yra dvi priežastys: sąsaja būtų nepraktiška mažuose ekranuose ir pelės tikslumas būtų sumažintas. Laimei, galite imituoti mobiliojo įrenginio patirtį iš savo darbalaukio arba net prijungti fizinį įrenginį prie kompiuterio, kad galėtumėte derinti svetaines realiuoju laiku, o tai ypač vertinga mobiliųjų programėlių kūrėjams. „Mac“ kompiuteryje su „iOS“ turėsite įjungti atitinkamą parinktį skiltyje „Nustatymai > Išplėstiniai“ ir naudoti tą pačią „iCloud“ paskyrą abiejuose įrenginiuose.

Išplėstiniai naudojimo atvejai: nuo derinimo iki ekrano kopijų darymo

Be klasikinių SEO kūrimo ir analizės panaudojimo būdų, „Chrome DevTools“ siūlo labai praktiškas išplėstines funkcijas:

• Blokuoja konkrečių failų (pvz.: main.css) įkėlimą, kad imituotų tinklo gedimų scenarijus ir patikrinkite, kaip svetainė veikia gedimų atveju.
• Norėdami žingsnis po žingsnio matyti vaizdavimo procesą ir geriau suprasti, kaip ir kada atsiranda tam tikri pagrindiniai elementai, naudokite ekrano kopijos funkciją tinklo skydelyje.
• Ieškokite konkrečių HTTP antraščių arba atsakymų (pvz., norėdami sužinoti, kurie ištekliai naudoja optimalias talpyklos politikas) naudodami visuotinės paieškos funkciją.
• Filtruokite užklausas pagal tipą, domeną arba šabloną, kad galėtumėte išsamiai analizuoti išorinį srautą arba svarbiausius išteklius.
• Greitai kurkite HTML ir CSS pakeitimų prototipus ir lengvai jais dalinkitės su savo komanda, nekeisdami originalių šaltinio failų.

„Chrome DevTools“ tapo žiniatinklio kūrimo ir analizės šveicarišku peiliu, vienodai gerai tinkančiu tiek asmeniniams projektams, tiek didelėms platformoms ir profesionaliems projektams. Nuo greito dizaino detalės patikrinimo iki visiško visų jūsų svetainės išteklių, įskaitant WPO, SEO ir pritaikymo neįgaliesiems užduočių, audito, jo integravimas su tokiais įrankiais kaip „Lighthouse“ paverčia jį būtinu ištekliumi optimizuojant puslapius ne tik „Google“, bet ir jūsų vartotojams.