Segítségével f12 fejlesztői eszközök debug HTML és CSS (Windows)
Ez a tartalom kifejezés egy régebbi változata az F12 Fejlesztői eszközök. Töltse le a legújabb verzióját a dokumentáció F12 közegben.
F12 eszközök segíthetnek megtalálni és kijavítani a hibákat, amelyeket nehéz megtalálni a forráskód HTML vagy Cascading Style Sheets (CSS). Bemutatás a HTML és CSS kódot a DOM fában forrásként értelmezési Windows Internet Explorer böngésző leegyszerűsíti hibakereső kód, mint például a hibakeresés dinamikusan generált változásokat.
Ez a rész a következő témaköröket:
A HTML lapon
A lapon a HTML-forrás dinamikus weboldal, mint egy fa, képviseli a memóriában a Windows Internet Explorer 9 Ez tükrözi a DOM, amikor megnyitja a Developer Tools F12 és frissíteni kell, ha változás következik be. Közvetlenül is navigálni a fa az egeret vagy a billentyűzetet, megtekintheti a tulajdonságokat és értékeket változás.
Ahhoz, hogy menjen egy adott eleme a weblapon, nyomja meg a CTRL + B, vagy kattintson a Kiválasztás gombra elem. Elements egy weboldalon látszanak, amikor az egérrel rámutat rájuk. Ha rákattint egy elemre a megfelelő csomópontot a fa áll a DOM ábrázolását HTML.
Ha kiválaszt egy elemet a HTML lapon, akkor a menü „View”> „forráskód”, hogy végre a prezentáció szűrés, így akár a kiválasztott elemeket a kapcsolódó CSS stílusok, vagy csak azokat az elemeket magukat.
Forrás gomb elem a stílus kódot mutatja, csak a HTML forráskód és - egy új ablakban - a tartalom a kiválasztott elem együtt ezekre alkalmazandó CSS kódot. Ez lehetővé teszi, hogy összpontosítson a forráskód csak a kiválasztott elemeket. Mielőtt ezt a parancsot, a DOM-fa segítségével a HTML lapon válasszon ki egy HTML elemet. Egy elem kiválasztásához nyomja meg a Select gombot, vagy kattintson egy elemre, kattintson az elem a DOM fában. Ha egy gombot akkor ajánlatos frissíteni kattintson a Select elem kilátás.
Kibontásához vagy tulajdonságainak egy elemet, kattintson a doboz jelölt „plusz” (+) vagy „mínusz” (-). Minden elem a HTML és CSS képviselet lehet szerkeszteni, és a változtatások azonnal életbe lép. Feltételek és stílus attribútum lehet engedélyezni vagy tiltani kattintva a jelölőnégyzetet az elem nevét.
A legtöbb weboldalak használata dinamikus kódot. A formáció a HTML, amelyet a felhasználó által látható, gyakran használt scripteket a kliens oldalon. Statikus HTML-kód gyakran minimális, és csak akkor kell használni, hogy elindítsa az oldalon. Mivel az F12 Developer Tools megjelenítéséhez a HTML és CSS kódot, ahogy megjelenik a böngésző, hanem a pontos HTML forráskód találni hibákat könnyebb.
A HTML lapon mutatja az aktuális állapotát a DOM, de a változásokat nem követi automatikusan. Ha a változás értékének vagy attribútum nem jelennek meg azonnal, frissítse a nézetet az F5 billentyű megnyomásával a lap HTML.
Változó értékek és attribútumok hozzáadása
F12 Developer Tools lehetővé teszi, hogy módosítsa az értéket a gyakorlatilag bármilyen tulajdonság vagy tulajdonság. A HTML lapon jelölje ki az elemet, vagy a DOM-fa, vagy kattintson a Kiválasztás gombra elem. A Tulajdonságok (jobb oldali), kattintson az értéket jelöljük ki és változik.
Például nyissa meg az oldalt CSS példa a cikket hozzáadása lekerekített sarkok CSS3 az Internet Explorer 9, majd nyomja meg az F12 billentyűt. hogy nyissa ki a szerszámot. Nyomja meg a Select gombot gombbal egy elemre, majd kattintson a bíbor címsor most raktáron lévő negyedik kávé. A Tulajdonságok területen, szín alá attribútumszelektorban „h2”. Adjon meg egy új nevet, vagy színes érték, mint a „kék”, majd nyomja meg az ENTER billentyűt. Fejléc színe azonnal megváltozik.
Ahhoz, hogy hozzá egy attribútumot, kattintson jobb gombbal az elemre a bal oldali a HTML lapon vagy CSS, majd kattintson a Hozzáadás Képesség a helyi menüből. Meg kell tudni, hogy a formátum a tulajdonság, mint a „background-color:” és a helyes értékeket.
Ha törölni szeretne egy attribútumot (felvéve vagy egy meglévő), kattintson az attribútum képviselete a jobb oldalon, majd nyomja meg a DELETE billentyűt. Vissza az attribútumokat az eredeti oldal is frissíteni a weboldalakat. Hozzáadott attribútumokat kell ismét alkalmazni.
Ha csak ideiglenesen tiltsd attribútumot az ülés ideje, törölje a jelet a jellemző a jobb oldali panelen, vagy a HTML lapon vagy CSS lapot.
Alapok és mutassa be a HTML lap
Válasszon egy elemet a fa nézetben a bal oldali panelen a jobb oldalon, megtekintheti és módosíthatja a stílus, szerkezet és a modell mezőket és attribútumait a kiválasztott gyermek elemek. A változások nem állandó és elvész korszerűsítése, illetve megnyitásakor másik oldalra. De lehet menteni a módosított HTML kódot, kattintson a Mentés gombra.
- Stílus szabályokat tartalmaz, és stílusok egy elemet választva a fa nézetben. Ez a lap szerint szervezik a szabályokat, és örökölte és újra attribútumokat.
HTML lap helyi menü
Mint korábban említettük, akkor kattintson az elemre, kattintson a jobb gombbal a bal oldali a HTML fülre. A következők a jellemzők, amelyek segítségével a HTML fülre.
Változó számértékek a CSS CSS lapra
Az értékek CSS tulajdonságok változnak gyakorlatilag bármely más tulajdonság Fejlesztőeszközök F12. CSS tulajdonságai módosíthatók kattintva az ingatlan értékét, és beírja az új értéket. A CSS fülön, akkor is a felfelé és lefelé mutató nyilak segítségével növelje vagy csökkentse a számértékeket.
Keressen és változtatások mentése
Csakúgy, mint a többi lap az F12 Developer Tools, akkor keresni bizonyos címkéket, tulajdonságok, attribútumok és értékek keresőmező használatával mindkét lapon HTML és CSS. Ha rákattint a Keresés gombra kiválasztja az összes esetben a kulcsszó és a terület görgeti az első mérkőzés.
Ha több mérkőzést, akkor lépjünk előre és hátra régióba Előző és Következő gombok.
A módosítások, például beállíthatja a modell mezőket, vagy vegye fel attribútum, nem állandó. Amikor újraindítja a oldalt a böngészőben, vagy navigáljon másik weblap, az összes módosítás elvész. Mentse el a változásokat a helyi másolatot a HTML / CSS fájlt, kattintson a Mentés a bal oldali panelen.