- Qasja dhe konfigurimi i mjeteve të zhvilluesit duke përdorur shkurtore dhe menu kontekstuale.
- Analizë e thelluar e stileve DOM dhe CSS për të përmirësuar aksesueshmërinë dhe dizajnin responsiv.
- Auditimi i performancës dhe monitorimi i ngarkesës së burimeve nëpërmjet panelit të Rrjetit dhe Farit.
- Teknikat e debuggingut dhe optimizimit të WPO për të rritur pozicionimin SEO.
Nëse punoni në industrinë e uebit, qoftë duke dizajnuar, programuar apo duke u përpjekur të siguroheni që faqja juaj e internetit nuk është e padukshme në Google, ndoshta keni hasur në butonin " inspect element" në një moment të caktuar . Është thjesht porta hyrëse për Chrome DevTools, një arsenal mjetesh që ju lejon të zhyteni në funksionimin e brendshëm të çdo faqeje interneti për të kuptuar se si funksionon, për të rregulluar gabimet menjëherë ose thjesht për të eksploruar se çfarë fshihet pas fasadës vizuale.
Pjesa më e mirë është se nuk keni nevojë të instaloni asgjë të pazakontë; shfletuesi e ka tashmë të integruar. Nga analizimi i arsyes pse një imazh vonohet shumë për t'u ngarkuar deri te modifikimi i CSS në kohë reale për të parë se si do të dukej një buton i kuq pa prekur kodin e serverit, Chrome DevTools janë një mjet i paçmuar për këdo që kërkon të optimizojë përvojën e përdoruesit dhe performancën teknike të projektit të tij.
Si të hyni në zemër të DevTools
Ka disa mënyra për të hapur këtë panel kontrolli, varësisht nga ajo që ju duket më e përshtatshme. Më intuitivja është të klikoni me të djathtën kudo në faqen e internetit dhe të zgjidhni "Inspekto". Nëse preferoni shkurtoret e tastierës për shpejtësi, në Windows dhe Linux mund të shtypni Ctrl + Shift + I , ndërsa në Mac kombinimi është Cmd + Option + I. Gjithashtu mund të shtypni tastin F12, i cili shpesh vepron si një buton për të hapur dhe mbyllur panelin.
Pasi të jeni brenda, mund të zgjidhni se ku dëshironi të pozicionohet dritarja: e ankoruar në të djathtë, në të majtë, në fund ose edhe në një dritare të veçantë , gjë që është shumë mirë nëse keni monitorë të shumtë dhe dëshironi ta shikoni faqen e internetit në njërin dhe kodin në tjetrin.
Paneli i Elementeve: Skeleti dhe lëkura e uebit
Skeda Elementet është vendi ku ndodh magjia e DOM-it (Modelit të Objektit të Dokumentit). Këtu nuk shihni kodin statik HTML të dërguar nga serveri, por përkundrazi përfaqësimin aktual dhe dinamik të faqes, duke përfshirë çdo gjë që JavaScript ka gjeneruar menjëherë. Është vendi ideal për të kontrolluar nëse shënimi juaj semantik është i saktë, gjë që është thelbësore për SEO-në në faqe.
Nëse aktivizoni Modalitetin e Inspektimit (ikona e shigjetës në këndin e sipërm të majtë), mund ta mbani miun mbi faqen e internetit dhe të shihni detaje të sakta: dimensionet e pikselëve, ngjyrat e sfondit, kufijtë dhe mbushjen. Madje ju njofton nëse kontrasti i ngjyrave është i pamjaftueshëm, gjë që është kritike për aksesueshmërinë në internet . Për më tepër, mund të hiqni elementët shpërqendrues, siç janë banderolat e cookie-ve, ose të modifikoni tekstin direkt duke përdorur Modalitetin e Dizajnit përmes konsolës.
Zotërimi i skedës së Rrjetit
Kur një faqe interneti është e ngadaltë, Paneli i Rrjetit është vendi i parë për të parë. Ky mjet regjistron çdo skedar që shkarkohet: imazhe, skripte, fonte dhe vetë HTML-në. Kur ringarkoni faqen, do të shihni një listë kronologjike që tregon statusin e përgjigjes HTTP , llojin e burimit dhe madhësinë e skedarit.
Për të analizuar profesionalisht kohën e ngarkimit të faqes, është thelbësore të përdorni opsionin "fshij memorien e përkohshme dhe ringarkoj" , pasi kjo simulon përvojën e një përdoruesi të ri. Përveç kësaj, Chrome ju lejon të simuloni lidhje të ngadalta (si 3G), gjë që është thelbësore për të përcaktuar nëse faqja juaj e internetit është e përdorshme në pajisjet mobile me mbulim të dobët. Nëse doni të shkoni edhe më tej, mund të aktivizoni pamjet e ekranit për të parë saktësisht se si paraqitet faqja sekondë pas sekonde ndërsa shkarkohen burimet.
Optimizimi dhe Performanca e WPO-së me Lighthouse
Optimizimi i Performancës së Uebit (WPO) është arti i bërjes së një faqeje interneti të suksesshme. Ndër DevTools, gjejmë Lighthouse , një mjet auditimi që analizon shpejtësinë, aksesueshmërinë dhe praktikat më të mira. Ndryshe nga mjetet e tjera të jashtme, Lighthouse ju jep sugjerime konkrete për përmirësimin e kohës së ngarkimit dhe renderimit.
Për të optimizuar performancën, rekomandohet të rishikoni skedat Burimet dhe Rrjeti për të identifikuar çdo skedar CSS ose JS tepër të madh që duhet të minimizohet ose kombinohet . Gjithashtu mund të përcaktoni nëse po ngarkoni shumë burime nga domene të jashtme (siç janë Google Fonts) dhe të merrni në konsideratë nëse strehimi i tyre në serverin tuaj do të ishte më efikas në reduktimin e kërkesave HTTP.
Truke të avancuara për zhvilluesit dhe SEO-të
Nëse keni nevojë të korrigjoni gabimet në JavaScript, Konsola është miku juaj më i mirë. Një truk shumë i dobishëm është të përdorni variablin `$0` në konzolë , i cili i referohet drejtpërdrejt elementit të fundit që zgjodhët në panelin Elementet. Nga ana tjetër, nëse doni të dini se çfarë ndodh kur një burim dështon, mund të përdorni funksionin e bllokimit të kërkesave për të simuluar që një skedar CSS ose API nuk është i disponueshëm dhe për të parë nëse faqja e internetit mbetet funksionale.
Për ata që kërkojnë të nxjerrin të dhëna, funksioni "Copy element" ju lejon të eksportoni strukturën e një tabele ose liste të tërë në një redaktues kodi ose edhe ta përdorni atë me ImportXML në Google Sheets. E gjithë kjo, e kombinuar me dizajnin responsiv që imiton pajisje të ndryshme mobile, e bën DevTools një suitë të plotë analizash teknike.
Përdorimi inteligjent i këtyre mjeteve ju lejon të transformoni një faqe interneti të ngadaltë dhe të strukturuar dobët në një platformë të optimizuar që Google e shpërblen në renditjen e saj. Zotërimi i inspektimit të elementeve, analizës së rrjetit dhe auditimeve të performancës nuk është vetëm për programuesit, por për këdo që dëshiron të sigurojë një përvojë përdoruesi pa probleme dhe renditje të forta në motorët e kërkimit.
Shkrimtar i apasionuar pas botës së bajteve dhe teknologjisë në përgjithësi. Më pëlqen të ndaj njohuritë e mia përmes shkrimit, dhe kjo është ajo që do të bëj në këtë blog, duke ju treguar të gjitha gjërat më interesante në lidhje me pajisjet, softuerin, harduerin, tendencat teknologjike dhe më shumë. Qëllimi im është t'ju ndihmoj të lundroni në botën dixhitale në një mënyrë të thjeshtë dhe argëtuese.