Fejlesztő Debug DOM elemei az Ön oldalán egy sor kóddal

Hányszor küzdöttél talál egy konkrét problémát a CSS elrendezését? A hiányzó zárócímkéktől a helytelenül beágyazott testvérekig a CSS-kérdések egy tucatnyi dime. És a ez a CSS elrendezési hibakereső, a folyamat csak sokkal könnyebb.

Ez a kód egy sora lesz áthalad a DOM-ban és körvonalazza az egyes elemeket különböző színű. Így lehet jobb megjelenítés hogyan működik a CSS (vagy nem működik) és gyorsan szembesül a problémás területekkel.

A GitHub lehetővé teszi a fejlesztők számára mentse a kis kódot Gists néven. Ezek mind nyílt forráskódúak és ingyenesek kivéve saját használatra. Éppen ezért ez a CSS hibakereső annyira hasznos. Ez egyesíti a a Chrome DevTools modern fejlesztése a ... val a böngésző könyvjelzőinek egyszerűsége.

A kód használatához először meg kell adnia másolja ki a legjobban tetsző verziót a Gist oldalról. Aztán te illessze be ezt a kódot a Terminál ablakba és futtasd. Végül a végén kell egy ilyen eredmény:

Most lehetséges mentse el ezt a kódot könyvjelzőként a böngésző eszköztárában. De ha egy Chrome-felhasználó vagy mentse el ezt a JS kódot kódrészletként ami sokkal könnyebben futtatható.

Ez a kódrészlet lehet újra és újra egy gombnyomással. tudsz elemez minden oldalt, ezek a színes CSS körvonalak, a szülők és a gyermekek DOM elemei számára egyaránt.

Azonban nem szabad csak Chrome-ra korlátozódnia. Ez a részlet minden nagyobb böngésző számára működik, a Firefox, a Safari, az Opera és az Internet Explorer.

És bárki, aki kíváncsi, hogy megtanulják, hogyan működik ez, megnézheti a jegyzett változat megjegyzésekkel a kód minden egyes sorához.

Ez a Gist tele van kapcsolódó felhasználói megjegyzések és más fejlesztőktől származó frissítések segít abban, hogy kisebb és hatékonyabb legyen. De a jelenlegi állapotában ez az egyik legegyszerűbb módja DOM hibakeresését egyetlen kódsorral.