Mire használható a Chrome DevTools?

A Chrome DevTools a a Google Chrome-ba beépített webhelykészítési és hibakeresési eszközök összessége. Természetesen felhasználhatjuk is őket nyílt forráskódú verziójában; Króm.

A fejlesztők számára elérhető Chrome-eszközök a Ctrl + Shift + I billentyűkombináció megnyomásával érhetők el, ha egy elem fölé viszi az egérmutatót, és jobb gombbal kattint az Ellenőrzés elemre.

Alkatrészek

Amikor megnyitjuk a Chrome DevTools programot, látjuk, hogy megjelenik az un panel a böngészett oldal jobb oldalán. A maga részéről ez a panel eMinden eszköznek megfelelő fülekre van felosztva. Az eszközök viszont szakaszokra vannak osztva.
A szakaszok a következők:

• Elemek: Az oldal különböző összetevőit mutatja.
• Konzol: Lehetővé teszi a diagnosztika futtatását a fejlesztés során, vagy interakcióba léphet a Javascript-kóddal, akárcsak a Linux terminállal.
• Források: Megkönnyíti a Javascript kód hibakeresését és a helyi fájlokkal való munkát.
• Hálózat: Segít figyelemmel kísérni és javítani az oldal teljesítményét.
• Idővonal: Lehetővé teszi a webhely látogatása során bekövetkező különböző események rögzítését és feltárását.
• Alkalmazás: Megvizsgálja az összes betöltött erőforrást; többek között az IndexedDB vagy a Web SQL adatbázisok, a helyi és a munkamenet-tárolás, a cookie-k, az alkalmazás-gyorsítótár, a képek, a betűtípusok és a stíluslapok.
• Biztonság: Biztonsági problémákat észlel a kódban.

Nézzük meg, mire használhatjuk a Chrome DevTools alkalmazást

Javítsa ki, ami nem működik

Minden fejlesztővel megtörtént. Írja be a kódot, ellenőrizze, hogy nincsenek-e hibák, és az igazság pillanatában az oldal nem úgy működik, ahogy kellene. A Konzol eszköz megmutatja, hogy milyen hiba történik a végrehajtáskor.

Csökkentse a betöltési időt

Ha egy oldal betöltése sokáig tart, a felhasználó elfárad, és egy másik webhelyre megy. Szerencsére a Flash weboldalak és animált intróik korszaka véget ért. Egyébként a Chrome DevTools Hálózatok lapja megkönnyíti annak kiderítését, hogy mely elemek késleltetik a terhelést. Megismételhetjük a tesztet a különböző csatlakozási sebességeknél.

Módosítsa a kódot

Az Elemek fülön megtehetjük lásd az oldal elemeit, a kapcsolódó html kódot és a css tulajdonságokat. Megváltoztathatjuk őket is.

A parancs segítségével szerkeszthetjük egy oldal szövegét

document.designMode = 'on';

Próbálja ki a különböző képernyőméreteket

Tabletták, okostelefonok, okostévék, asztali számítógépek. Az interneten böngésző eszközök listája növekszik. A Chrome DevTools segítségével megtehetjük tesztelje, hogy egy oldal jól néz ki különböző méretben.

benchmarking

A menedzsmentben a benchmarking kifejezés azt jelenti, hogy tanulunk azok legjobb gyakorlataiból, akik ugyanúgy járnak el, mint mi. A Chrome DevTolls segítségével, ha tetszik egy webhely kialakítása, akkor tudjuk tekintse meg a html kódot és a css stíluslapokat, és másolja azokat az oldalunkra.

A Chrome DevTools letöltése

A Chrome DevTools elérhető a Google Chrome és a Chromium böngészőkben. A króm a fő disztribúciók tárházában van. Üzletekből is telepíthető Snap. Ami a Google krómot illeti idejut. DEB és RPM formátumban