Për çfarë shërbejnë Chrome DevTools?

Chrome DevTools është një grup i mjeteve të krijimit dhe korrigjimit të faqeve të internetit të integruara në Google Chrome. Sigurisht, ne gjithashtu mund t'i përdorim ato në versionin e tij me burim të hapur; Krom.

Isshtë e mundur të përdorni mjetet e Chrome për zhvilluesit duke shtypur kombinimin e butonave Ctrl + Shift + I, gjithashtu duke rënë pezull mbi një element dhe duke klikuar me të djathtën në Inspect.

Komponentet

Kur hapim Chrome DevTools shohim që shfaqet un panel në të djathtë të faqes që po shfletojmë. Nga ana e tij, ky panel eAjo është e ndarë në skeda që korrespondojnë me secilën nga mjetet. Nga ana tjetër, mjetet ndahen në seksione.
Seksionet janë:

• Elementet: Tregon përbërësit e ndryshëm të faqes.
• Console: Ju lejon të ekzekutoni diagnostifikim gjatë zhvillimit ose të ndërveproni me kodin Javascript siç do të vepronit me terminalin Linux.
• Burimet: E bën të lehtë korrigjimin e kodit Javascript dhe punën me skedarët lokalë.
• Rrjeti: Ndihmon në monitorimin dhe përmirësimin e performancës së faqes.
• Afati kohor: Lejon regjistrimin dhe eksplorimin e ngjarjeve të ndryshme që ndodhin gjatë vizitës në një sit.
• Zbatimi: Heton të gjitha burimet që janë ngarkuar; ndër të tjera, bazat e të dhënave të IndexedDB ose Web SQL, ruajtja lokale dhe sesione, cookies, cache të aplikacioneve, imazhe, gërma dhe fletë stili.
• Siguria: Zbulon problemet e sigurisë në kod.

Le të shohim se për çfarë mund të përdorim Chrome DevTools

Rregullo atë që nuk funksionon

Kjo i ka ndodhur çdo zhvilluesi. Shkruani kodin, kontrolloni që nuk ka gabime, e megjithatë në momentin e së vërtetës faqja nuk funksionon siç duhet. Mjet Console tregon se çfarë gabimi po ndodh në kohën e ekzekutimit.

Ulni kohën e ngarkimit

Nëse një faqe kërkon një kohë të gjatë për t'u ngarkuar, përdoruesi lodhet dhe shkon në një sit tjetër. Për fat të mirë, epoka e ueb Flash-it dhe hyrjeve të saj të animuara ka mbaruar. Sidoqoftë, skeda Rrjetet e Chrome DevTools e bën më të lehtë zbulimin se cilat elemente e vonojnë ngarkesën. Mund ta përsërisim provën për shpejtësi të ndryshme të lidhjes.

Modifikoni kodin

Në skedën Elemente mundemi shikoni elementet e një faqe, kodin html të lidhur dhe vetitë css. Ne gjithashtu mund t'i ndryshojmë ato.

Ne mund të modifikojmë tekstin e një faqe duke përdorur komandën

document.designMode = 'on';

Provoni madhësi të ndryshme të ekranit

Tableta, telefona inteligjentë, televizorë inteligjentë, kompjuterë desktop. Lista e pajisjeve me të cilat shfletojmë internetin po rritet. Me Chrome DevTools mundemi provoni nëse një faqe duket mirë në madhësi të ndryshme.

Benchmarking

Në Menaxhim termi krahasim do të thotë të mësosh nga praktikat më të mira të atyre që bëjnë të njëjtën gjë si ne. Me Chrome DevTolls, nëse na pëlqen dizajni i një faqe në internet shikoni fletët e stileve të kodit HTML dhe CSS dhe kopjoni ato në faqen tonë.

Marrja e Chrome DevTools

Chrome DevTools është i disponueshëm në shfletuesit Google Chrome dhe Chromium. Kromi është në depot e shpërndarjeve kryesore. Mund të instalohet edhe nga dyqanet Kap. Sa i përket Google chrome mundeni shko ketu në formatin DEB dhe RPM