A Csak körvonal mód színkódolt körvonalakat rajzol az oldal minden HTML elemére, így azonnal áttekintheti az elrendezési struktúrát. Pontosan láthatja, hol helyezkedik el minden div, section, header, paragrafus és gomb — beleértve azok belső margóit, külső margóit és egymásba ágyazási viszonyait.
Egy oldal elrendezésének megértése gyakran az első lépés a CSS hibák elhárításában. Az extra fehér terület belső vagy külső margótól származik? Egy elem azért szélesebb a vártnál, mert egy nem korlátozott gyermekelem nyújtja ki? Két elem azért fed át, mert ütköző pozíciók vannak? A Csak körvonal mód ezekre a kérdésekre azonnal választ ad azáltal, hogy színes kereteket rajzol az oldal minden eleme köré. A böngésző DevTools eszközével ellentétben (amely egyszerre csak egy elemet emel ki) ez az eszköz mindent egyszerre körvonalaz — így teljes képet kap. Minden HTML elemtípus egyedi színt kap: a headerek kékek, a nav elemek sárgák, a fő tartalom zöld, a bekezdések rózsaszínek, a gombok ciánkékek, és így tovább. A színkódolás megkönnyíti a szerkezeti minták felismerését és az elemek azonosítását a DOM olvasása nélkül.
Kapcsolja be a körvonalakat minden elemre egyetlen kattintással — nincs szükség konfigurációra vagy beállítási panelre. Kattintson egyszer az összes keret megjelenítéséhez, kattintson újra az eltávolításukhoz. A legjobb módszer az elrendezési struktúra vizualizálásához bármely weboldalon.
A különböző HTML elemek különböző körvonalszíneket kapnak az azonnali vizuális azonosításhoz. Headerek kékben, navigáció sárgában, fő tartalom zölden, fejlécek lilában, bekezdések rózsaszínben, gombok ciánkékben, divek szürkében. Az elemtípusokat a DOM olvasása nélkül azonosíthatja.
A körvonalak láthatóvá teszik a láthatatlan CSS problémákat. Észreveheti a fehér területet okozó váratlan margókat, a vártnál szélesebbre nyúló elemeket okozó belső margókat, a vízszintes görgetősávokat okozó túlcsordulást, vagy a nulla magasságot elfoglaló összeomlott elemeket. Minden mezőhatár láthatóvá válik.
Az egymásba ágyazott körvonalak feltárják a DOM szülő-gyermek struktúráját. Láthatja, milyen mélyen vannak az elemek egymásba ágyazva, melyik tároló foglalja magában melyik tartalmat, és hol végződnek az egyes beágyazási szintek határai. Felbecsülhetetlen értékű az összetett grid és flex elrendezések megértéséhez.
Aktiválja bármely weboldalon — saját projektjein, ügyfél oldalakon, versenytársak oldalain vagy dizájn referenciákon. A körvonalak CSS injektálással vannak alkalmazva, és nem módosítják a DOM struktúrát, és nem befolyásolják a JavaScript viselkedését.
A körvonalak CSS outline tulajdonsággal (nem border-rel) vannak rajzolva, ami azt jelenti, hogy nem adnak hozzá az elem dobozmodell méreteihez. Az oldal elrendezése pontosan olyan marad, amilyen volt — a körvonalak tisztán vizuálisak és nem okoznak semmilyen újrarendezést.
Csak körvonal mód covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsAz a titokzatos rés a szekciók között? Kapcsolja be a körvonalakat, és azonnal látni fogja, hogy az alsó elem margója, a szülő tároló belső margója, vagy egy ismeretlen üres div okozza-e. Ami a DevTools-ban percekig tart, az a Körvonal móddal másodpercek alatt megoldható.
Méretezze át a böngészőablakot körvonalak bekapcsolt állapotában, és figyelje meg, hogyan folyik át az elrendezés a töréspontokon. Láthatja, mely elemek kerülnek egymás alá, melyek csordulnak túl, és hol változik a grid vagy flexbox struktúra — egyetlen pillantással.
Túl sok egymásba ágyazott div? Felesleges burkolóelemek? A Körvonal mód vizuálisan nyilvánvalóvá teszi a túlzott egymásba ágyazást — ha 5+ koncentrikus körvonalat lát egyszerű tartalom körül, az elemzés egyszerűsíthető. Kiváló frontend PR-ok kódellenőrzéséhez.
Engedélyezze a körvonalakat a főoldalon, majd egy aloldalon. Ugyanazt az elrendezési struktúrát osztják meg? Következetesek-e a margók és szélességek? A körvonalak azonnal láthatóvá teszik a szerkezeti következetességet (vagy következetlenséget).
Mutassa meg a tanulóknak, hogyan hoznak létre dobozokat a HTML elemek, hogyan működik a dobozmodell belső és külső margókkal, és hogyan alakítja ki az egymásba ágyazás az oldalhierarchiát. A Körvonal mód elvont fogalmakat változtat látható, interaktív bemutatókká.
Nyissa meg a DevSuite Pro lebegő dokkolót, és kattintson a Csak körvonal mód ikonra. Azonnal minden HTML elem az oldalon színes körvonalkeret kap.
Minden elemtípusnak egyedi színe van. Kék a szerkezeti elemeknek (header, footer, section), zöld a fő tartalomterületeknek, lila a fejléceknek, rózsaszín a bekezdéseknek, ciánkék a gomboknak és beviteli mezőknek, sárga a navigációnak, és szürke az általános diveknek és spaneknek.
Keressen váratlan réseket (margók okozzák), tárolóikon kívül nyúló elemeket (túlcsordulás), aszimmetrikus térközöket (következetlen belső margók), vagy mélyen egymásba ágyazott burkolóelemeket (felesleges div egymásba ágyazás). Mindezek azonnal láthatóvá válnak.
Használja a Körvonal módot kiindulópontként, majd váltson a CSS Inspector eszközre az azonosított elemek konkrét értékeinek ellenőrzéséhez, vagy a Távolságmérőre a körvonalazott elemek közötti pontos térköz ellenőrzéséhez.
Kattintson a Körvonal mód ikonra újra az összes körvonal eltávolításához és az oldal normál nézetéhez való visszatéréshez. Nincs szükség takarításra — ez egy egyszerű kapcsoló.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.