Za kaj so namenjeni Chrome DevTools?

Chrome DevTools je nabor orodij za ustvarjanje in odpravljanje napak v Google Chrome. Seveda jih lahko tudi uporabimo v svoji odprtokodni različici; Krom.

Do orodij Chrome za razvijalce je mogoče dostopati s pritiskom na kombinacijo tipk Ctrl + Shift + I, tudi tako, da se premaknete nad element in z desno miškino tipko kliknete Preveri.

Komponente

Ko odpremo Chrome DevTools, vidimo, da se prikaže un plošča na desni strani strani, ki jo brskamo. Ta plošča eRazdeljen je na zavihke, ki ustrezajo vsakemu orodju. Orodja pa so razdeljena na odseke.
Oddelki so:

• Elementi: prikazuje različne komponente strani.
• Konzola: omogoča zagon diagnostike med razvojem ali interakcijo s kodo Javascript, kot bi to storili s terminalom Linux.
• Viri: olajša odpravljanje napak kode Javascript in delo z lokalnimi datotekami.
• Omrežje: pomaga spremljati in izboljšati delovanje strani.
• Časovna os: omogoča snemanje in raziskovanje različnih dogodkov, ki se zgodijo med obiskom spletnega mesta.
• Aplikacija: preuči vse naložene vire; med drugim baze podatkov IndexedDB ali Web SQL, lokalno in sejno shrambo, piškotke, predpomnilnik aplikacij, slike, pisave in slogovne liste.
• Varnost: zazna varnostne težave v kodi.

Poglejmo, za kaj lahko uporabljamo Chrome DevTools

Popravite, kaj ne deluje

To se je zgodilo vsakemu razvijalcu. Napišite kodo, preverite, da ni napak, pa vendar v trenutku resnice stran ne deluje, kot bi morala. Orodje za konzolo prikazuje, kakšna napaka se zgodi v času izvajanja.

Skrajšajte čas nalaganja

Če se stran nalaga dolgo, se uporabnik naveliča in preide na drugo spletno mesto. Na srečo je obdobje spletnih mest Flash in njihovih animiranih predstavitev konec. Kakor koli že, zavihek Omrežja v Chrome DevTools lažje ugotovi, kateri elementi zamujajo z obremenitvijo. Preizkus lahko ponovimo za različne hitrosti povezave.

Spremenite kodo

Na zavihku Elementi lahko si oglejte elemente strani, povezano html kodo in lastnosti css. Lahko jih tudi spremenimo.

Besedilo strani lahko urejamo z ukazom

document.designMode = 'on';

Preizkusite različne velikosti zaslona

Tablični računalniki, pametni telefoni, pametni televizorji, namizni računalniki. Seznam naprav, s katerimi brskamo po internetu, narašča. Z Chrome DevTools lahko preizkusite, ali stran dobro izgleda pri različnih velikostih.

Benchmarking

V upravljanju izraz primerjalna analiza pomeni učenje najboljših praks tistih, ki delajo enako kot mi. S sistemom Chrome DevTolls lahko, če nam je všeč oblikovanje spletnega mesta, omogočimo si oglejte html kodo in CSS-ove in jih kopirajte na naše spletno mesto.

Pridobivanje Chrome DevTools

Chrome DevTools je na voljo v brskalnikih Google Chrome in Chromium. Krom je v odlagališčih glavnih distribucij. Namestite ga lahko tudi iz trgovin podjetja Snap. Kar zadeva Google chrome, lahko Pridi sem. v DEB in RPM formatu