Chrome DevTools, það sem þú þarft að vita um þetta tól

Við þekkjum öll helstu verkfæri Google fyrir forritara sem miða að því að fínstilla vefsíðu. Pagespeed Insight , til dæmis, er einn af þeim þekktustu ásamt Search Console með hinum ýmsu prófunum og gögnum um Core Web Vitals. En hversu margir nota og nýta sér einnig Chrome DevTools ?

Í raun og veru er þetta dæmigert vandamál Mountain View: það nær að útvega frábært fjármagn en kemur ekki alltaf hinum ýmsu verkfærum fram á sjónarsviðið með sömu áherslum. Kannski vegna þess að sumir, eins og áðurnefnd Search Console og nauðsynleg Google Analytics , eru ómissandi og afgerandi fyrir alla.

Aðrir tákna sterkar hliðar eingöngu fyrir sérfræðinga. En það er líka rétt að í dag getum við ekki látið neitt eftir okkur ef við viljum hagræða vefsíðu með tilliti til árangurs á vefnum . Þess vegna er mikilvægt að komast að því til hvers Chrome DevTool er, hvenær þú ættir að nota það og hvernig.

Hvað er Chrome DevTools: skilgreining

Chrome DevTool er sett af villuleitarverkfærum á vefsíðum sem eru samþætt í Google vafranum. Þau eru notuð til að breyta samstundis úrræðum sem þú vilt fínstilla til að bera kennsl á vandamál og finna punkta til úrbóta. Chrome DevTools er hluti af gagnlegum auðlindum til að greina og bæta Core Web Vitals , þ.e. röð af afgerandi vísbendingum til að tryggja notendaupplifun vefsíðu.

Í raun og veru styðja öll Google verkfæri fyrir forritara mælingu á Core Web Vitals , en þau hafa mismunandi hlutverk og hlutverk. Reyndar getur Chrome DevTool einnig greint og leyst vandamál notendaupplifunar auðveldara ef þú notar það ásamt Lighthouse , PageSpeed ​​​​Insights, Search Console og öllum verkfærunum sem skráð eru á web.dev/vitals-tools síðunni .

Til hvers er Chrome DevTool?

Það er notað til að hafa áhrif á færibreytur vefsíðu í eins konar rannsóknarstofu, eftir að hafa fundið vandamál . Sem gæti tengst CSS kembiforrit, JavaScript endurbótum og frammistöðugreiningu til að flýta fyrir hleðslu vefsíðu.

Með þessari föruneyti starfar þú á síðu en aðeins til að skilja hvort þessi íhlutun getur hjálpað þér að ná því sem þú þarft. Þannig að þú getur strax fundið út hverju þú á að breyta og gert lausnina sem þú hefur valið starfhæfa. Í stuttu máli, án Chrome DevTools, væri allt lengur og erfiðara að þróa.

Til að lesa: hvað athugar áður en þú birtir netverslunarsíðu

Hvernig á að opna þetta tól

Til að byrja að nota Chrome DevTool farðu bara á síðuna sem þú vilt greina og ýttu á hægri músarhnappinn. Smelltu síðan á Athugaðu þátt atriðið: stjórnborð opnast hægra megin til að greina DOM og CSS. Viltu frekar vinna með hnappa? Þú getur notað nokkrar samsetningar.

Command + Option + C (Mac) eða Control + Shift + C (Windows, Linux) opnaðu aðalgluggann. Þegar þú vilt skoða skráð skilaboð eða keyra JavaScript skaltu ýta á Command + Option + J (Mac) eða Ctrl + Shift + J (Windows, Linux). Svo þú getur skipt yfir í stjórnborðið.

Hvernig á að nota Chrome DevTools

Það er auðvelt, ókeypis og tafarlaust að virkja fínstillingarvinnu þína í gegnum Google Crome DevTools. Notaðu bara Mountain View vafrann til að fá það sem þú þarft. En hvaða atriði þarf að fylgjast með ? Hver er tilgangurinn með þessu tóli sem hannað er fyrir reyndari hönnuði og vefstjóra?

Vinna með JavaScript, DOM og CSS

Með Chrome DevTools geturðu fínstillt nokkur mikilvæg atriði vefsíðunnar. Svo sem eins og JavaScript , stílblöð (CSS) og DOM. Það er að segja Document Object Models sem eru, samkvæmt Wikipedia :

Þessar aðgerðir gera þér kleift að skoða og greina lykilþætti vefsíðunnar. Þessi áfangi getur skipt sköpum til að leiðrétta villur sem erfitt væri að bæta án DevTool.

Fínstilltu heildarlokunartíma

TBT – eða heildarlokunartími – er rannsóknarstofumælikvarði sem skilgreinir tímann sem vefsíða er gagnvirk áður en hún verður gagnvirk . Lágt TBT jafngildir góðri notendaupplifun af auðlindinni þar sem hún mælir tíma milli hleðslu og samskipta.

En hvernig mælir maður TBT á skýran og einfaldan hátt? Í Chrome DevTools er heildarlokunartíminn – þar af leiðandi fjarlægðin milli First Contentful Paint (FCP) og Time to Interactive (TTI) – sýndur í síðufæti á árangursspjaldinu þegar þú mælir árangur síðunnar á internetinu.