A Google Chrome használata a CSS hibakeresésére

Az Inspect Element eszköz nagyszerű a weboldalak valós idejű hibakereséséhez. Ezzel az eszközzel megtekintheti és módosíthatja a webhely megjelenését. Lehetővé teszi ezt az oldal újratöltése nélkül is, és azonnal megjeleníti a CSS-módosításokat.

Ez a cikk bemutatja, hogyan tekintheti meg a CSS-osztályokat és alkalmazott stílusaikat az Elem vizsgálata ablakban. Kitér arra is, hogyan használhatja ezt a CSS-ben végrehajtott módosítások valós idejű előnézetéhez.

Az Inspect Element megnyitása a Google Chrome-ban

Bármely webhelyet felkereshet, és megnyithatja az Elem vizsgálata ablakot, hogy megtudja, hogyan néz ki a HTML- vagy CSS-kódja. Ez az oktatóanyag használni fogja mintawebhely demonstrálni.

Megnyithatja az Elem vizsgálata ablakot a Google Chrome-ban a gomb megnyomásával F12 kulcs. Arra is kattinthat a jobb gombbal, hogy bárhol az oldalon, és kattintson a gombra Vizsgálja meg.

Az Elem vizsgálata ablak megnyílik a webhely azon részének HTML-kódjával, amelyre a jobb gombbal kattintott. Itt is lehet szerkesztheti a webhely szövegét a Google Chrome segítségével.

A Stílusok lap az Elem vizsgálata ablakban

Magában az Elem vizsgálata ablakban a Elemek lapon, van egy hely a HTML és a CSS kód megtekintéséhez. A HTML kódot az Elem vizsgálata ablak bal oldalán láthatja. A CSS kódot a jobb oldalon, a alatt találja Stílusok lapon.

Tegyük fel, hogy volt egy HTML-eleme a "card-padding" nevű osztályával, amelyre jobb és bal oldali kitöltés van alkalmazva:

.kártya-padding {
 padding-right: 0vh;
 padding-bal: 0vh;
}

Ha a böngészőben megtekintette ezt a webhelyet, akkor kiválaszthatja a div elem a "card-padding" osztállyal. A "kártya-kitöltés" osztályra alkalmazott stílusok a jobb oldalon, a alatt jelennek meg Stílusok lapon.

Ha a HTML-kód nézetben egy elem fölé viszi az egérmutatót, a weblapnak ez a része kiemelésre kerül a böngészőben. A HTML elem típusa az osztálynevekkel együtt szintén megjelenik egy párbeszédpanelen az elem mellett.

Ebben az esetben látni fogja a div tárolót a „sor”, „card-padding” és „pb-5” osztálynevekkel kiemelve az oldalon.

Hogyan lehet valós időben módosítani a CSS-t

A CSS-t közvetlenül a Stílusok lapról módosíthatja:

1. Használata ezt a weboldalt, kattintson a jobb gombbal az első címsorra.
2. Az adott h4 fejlécben megjelenik egy „szövegszürke” osztály, amelynek színe #8a8a8a.
3. Ehelyett módosítsa a színt valami másra, például narancsra. Csak magát az értéket szeretné megváltoztatni, és nem a tulajdonság nevét, "színét".
4. Látni fogja, hogy a címsor sötétszürkéről narancssárgára változik.
5. Ha le szeretne tiltani egy adott CSS-stílust, törölje a jelölést a stílus bal oldalán található négyzetből.
6. További stílusokat is hozzáadhat az eredeti készlethez. Kattintson közvetlenül egy tulajdon alatt vagy jobbra egy új tulajdonság hozzáadásához. Új stílusok hozzáadásakor ugyanazt a szintaxist kell használnia, mint egy normál CSS-fájlban.
7. Ha egy helyi webhely előnézetét tekinti meg, addig folytathatja a CSS-módosításokat, amíg közelebb nem kerül a felhasználói felület kívánt megjelenéséhez. Ezt követően visszamásolhatja a CSS-módosításokat a helyi kódjába.

Hogyan lehet módosítani a CSS-t harmadik féltől származó könyvtárakból vagy keretrendszerekből

A HTML elemeket is módosíthatja, ha harmadik féltől származó könyvtárakat vagy keretrendszereket, például a Bootstrapet használ.

1. Használata ezt a weboldalt, kattintson a jobb gombbal az oldalon az egyik Bootstrap gombra.
2. Két osztályt fog látni a gombhoz alkalmazva: "btn" és "btn-primary". A Bootstrap már rendelkezik saját stílussal mindkét osztályra. A háttér- és szegélyszínként használt színek #007bff. Módosítsa ezt valami másra, például Violetra.
3. Ha egy helyi webhely előnézetét tekinti meg, akkor az új módosításokat visszahelyezheti a helyi kódba. A CSS sorrendjétől függően szükség lehet rá specifikusabb CSS-választót használjon. Például írja be a választó elé a „.btn” előtagot. Ez felülírja az eredeti Bootstrap stílust.

   .btn.btn-primary {
    háttérszín: lila;
    szegélyszín: lila;
   }

Mit jelent az element.style a Stílusok lapon?

Az Elem vizsgálata ablakban kiemelt minden HTML-elemhez tartozik egy element.styles blokk. Ez egyenértékű azzal, mintha szövegközi stílust adnának a HTML-elemhez, ahelyett, hogy egy választó segítségével céloznák meg.

1. Kattintson a jobb gombbal egy HTML elemre. Adjon hozzá bármilyen stílust az element.style szakaszhoz, például:

   szín: whitesmoke;

2. Látni fogja, hogy a HTML elem kódja is megváltozott. A HTML elemen belüli kód új sorral rendelkezik:

   stílus="szín: whitesmoke;"

Hogyan öröklik a stílust a gyermek HTML-elemek

Ha két különböző stílusértéket alkalmaz egy szülőelemre és egy gyermek elemre, akkor a gyermekelemben lévő érték élvez elsőbbséget.

1. Használata ezt a weboldalt, kattintson a jobb gombbal bárhová a webhely külső szélén.
2. Az Elem vizsgálata ablak HTML részében összpontosítson két konkrét HTML-elemre. Van egy szülő div elem, amelyre egy "content" osztály van alkalmazva. Ennek a HTML-elemnek van egy h4-es gyermekeleme, amelyre "text-grey" osztály van alkalmazva.
3. Válassza ki a gyermek h4 HTML elemet, és tiltsa le a színstílust a "text-grey" osztályban.
4. Válassza ki a szülő HTML-elemet a "content" osztállyal. Adja hozzá a következő CSS-stílust az osztályhoz:

   piros szín;

   A szülő divben lévő összes szöveg pirosra vált. Ez a változás a gyermekelemekre is kaszkádba fog lépni, vagyis a h4 is piros színű lesz.
5. Válassza ki a gyermek h4 HTML elemet, és adjon hozzá egy új stílust a "text-grey" osztályhoz:

   szín: zöld;

   Ez felülírja a szülőosztályok stílusát. A h4 HTML elem pirosról zöldre változik.
6. Ha megnézi a "tartalom" osztály stílusát, áthúzást is láthat. Ez megerősíti, hogy a h4 gyermek elem felülírja a szülő színét.

A CSS hibakeresésének előnyei a böngészőben

A CSS hibakeresése a böngészőben sok időt takaríthat meg, és felgyorsíthatja a kódolási munkafolyamatot. Ez különösen igaz, ha látnia kell, hogy az új CSS-módosítások valós időben hogyan befolyásolják a webhely felhasználói felületét.

A helyi kód módosítása és az alkalmazás újratöltése helyett használhatja ezt a technikát. Ezzel megóvja Önt attól, hogy kitalálja, milyen CSS-értékek működnének, mivel mostantól megtekintheti a felhasználói felület módosításait, ahogy azokat végrehajtja.

Az Elem vizsgálata ablakot addig módosíthatja, amíg közel nem ér a kívánt tervhez. Ha ez megvan, másolhatja vissza a kódot az Inspect Element ablakból a helyi kódba. Továbbra is újra futtathatja az alkalmazást, hogy tesztelje, az új CSS-módosítások továbbra is működnek-e.

Ez az oktatóanyag bemutatta a webhely CSS-jének hibakeresésének alapjait az Inspect Element ablakban, beleértve azt is, hogy hol található a CSS a Stílusok lapon.

Arról is szó esett, hogyan lehet módosítani a CSS-t, és hogyan tekintheti meg a felhasználói felület vizuális módosításait valós időben. Remélhetőleg azt is megérti, hogyan hajthat végre változtatásokat, ha a CSS harmadik féltől származó könyvtárat használ, és hogyan működik a stílus öröklése.

Sok más érdekes dolgot is megtehet az Elem vizsgálata ablakkal.

7 játékos dolog, amit az Inspect Element segítségével tehet

Olvassa el a következőt

A szerzőről