Néhány, a böngészők közötti DevTools szolgáltatás, amelyet esetleg nem ismer

Sok időt töltök a DevToolsban, és biztos vagyok benne, hogy Ön is. Néha még ugrálok is közöttük, különösen, ha a böngészők közötti problémákat keresem. A DevTools sokban hasonlít magukra a böngészőkre – az egyik böngésző DevTools programjának nem minden funkciója lesz azonos vagy támogatott egy másik böngésző DevTools programjában.

De van jó néhány DevTools szolgáltatás, amely együttműködik, még néhány kevésbé ismert is, amelyeket hamarosan megosztok veled.

A rövidség kedvéért a „Chromium” szót használom az összes Chromium-alapú böngészőre, például a Chrome-ra, az Edge-re és az Opera-ra utalva a cikkben. A bennük lévő DevToolok közül sok pontosan ugyanazokat a szolgáltatásokat és képességeket kínálja, mint a másik, ezért ez csak az én rövidítésem, hogy egyszerre hivatkozzunk mindegyikre.

Csomópontok keresése a DOM-fában

Néha a DOM-fa tele van olyan csomópontokkal, amelyek más csomópontokba vannak beágyazva, és így tovább. Ez megnehezíti, hogy pontosan megtalálja azt, amit keres, de gyorsan kereshet a DOM-fában a Cmd + F (macOS) vagy Ctrl + F (Ablakok).

Ezenkívül érvényes CSS-választóval is kereshet, mint pl .red, vagy XPath használatával, mint pl //div/h1.

A Chromium böngészőkben a fókusz automatikusan a keresési feltételeknek megfelelő csomópontra ugrik gépelés közben, ami bosszantó lehet, ha hosszabb keresési lekérdezésekkel vagy nagy DOM-fával dolgozik. Szerencsére letilthatja ezt a viselkedést a címre lépve beállítások (F1) → preferenciák → Globális → Keresés gépelés közben → Kikapcsolja.

Miután megtalálta a csomópontot a DOM-fában, görgetheti az oldalt, hogy a csomópont a nézetablakon belülre kerüljön. Ehhez kattintson a jobb gombbal a csomópontra, és válassza a „Görgetés a nézetbe” lehetőséget.

Hozzáférés a csomópontokhoz a konzolról

A DevTools számos különféle módot biztosít a DOM-csomópont közvetlen elérésére a konzolról.

Például használhatja $0 a DOM-fa aktuálisan kiválasztott csomópontjának eléréséhez. A Chromium böngészők ezt még egy lépéssel tovább viszik azáltal, hogy lehetővé teszik a kiválasztott csomópontokhoz való hozzáférést az előzménykiválasztás fordított időrendi sorrendjében a következő használatával: $1, $2, $3Stb

Egy másik dolog, amit a Chromium böngészők lehetővé tesznek, az az, hogy a csomópont elérési útját JavaScript-kifejezésként másolja a következő formában document.querySelector jobb gombbal a csomópontra kattintva és kiválasztva másolat → JS elérési út másolása, amellyel ezután hozzáférhet a konzol csomópontjához.

Íme egy másik mód a DOM-csomópont elérésére közvetlenül a konzolról: ideiglenes változóként. Ez a lehetőség elérhető, ha a jobb gombbal a csomópontra kattint, és kiválaszt egy lehetőséget. Ez a lehetőség az egyes böngészők DevTools-jában eltérő címkével van ellátva:

• Króm: Kattintson jobb gombbal → „Tárolás globális változóként”
• Firefox: Kattintson jobb gombbal → „Használat a konzolban”
• Safari: Jobb klikk → „Naplóelem”

Vizualizáljon elemeket jelvényekkel

A DevTools segíthet a bizonyos tulajdonságoknak megfelelő elemek megjelenítésében azáltal, hogy jelvényt jelenít meg a csomópont mellett. A jelvények kattinthatók, és a különböző böngészők különféle jelvényeket kínálnak.

In Safari, van egy jelvény gomb az Elemek panel eszköztárában, amellyel az egyes jelvények láthatóságát lehet váltani. Például, ha egy csomópont rendelkezik a display: grid or display: inline-grid rá alkalmazott CSS deklaráció, a grid jelvény jelenik meg mellette. A jelvényre kattintva kiemeli a rácsterületeket, a sávméreteket, a sorszámokat és egyebeket az oldalon.

A jelenleg támogatott jelvények FirefoxA DevTools a Firefoxban található forrásdokumentumok. Például a scroll jelvény görgethető elemet jelöl. A jelvényre kattintva kiemeli a túlcsordulást okozó elemet overflow jelvény mellette.

In Króm böngészőkben kattintson a jobb gombbal bármelyik csomópontra, és válassza ki „A jelvény beállításai…” egy tároló megnyitásához, amely felsorolja az összes elérhető jelvényt. Például az elemeket scroll-snap-type lesz egy scroll-snap mellette lévő jelvény, amelyre kattintva átvált a scroll-snap ráfedés az elemre.

Képernyőképek készítése

Egy ideje már tudtunk képernyőképeket készíteni néhány DevToolsból, de most már mindegyikben elérhető, és új módokat is kínál a teljes oldalas felvételek készítésére.

A folyamat úgy kezdődik, hogy a jobb gombbal rákattint a rögzíteni kívánt DOM csomópontra. Ezután válassza ki a csomópont rögzítésének lehetőségét, amely a használt DevToolstól függően eltérő címkével rendelkezik.

Ismételje meg ugyanezeket a lépéseket a html csomópontot, hogy teljes oldalas képernyőképet készítsen. Ennek ellenére érdemes megjegyezni, hogy a Safari megőrzi az elem háttérszínének átlátszóságát – a Chromium és a Firefox fehér háttérként rögzíti.

Van még egy lehetőség! Készíthet „reszponzív” képernyőképet az oldalról, amely lehetővé teszi, hogy az oldalt meghatározott szélességben rögzítse. Ahogy az várható volt, minden böngészőnek más módja van az eléréshez.

• Króm: Cmd + Shift + M (macOS) vagy Ctrl + Shift + M (Ablakok). Vagy kattintson az „Eszközök” ikonra az „Ellenőrzés” ikon mellett.
• Firefox: Eszközök → Böngészőeszközök → „Reszponzív tervezési mód”
• Safari: Fejlesztés → „Belépés az adaptív tervezési módba”

Chrome tipp: Vizsgálja meg a felső réteget

A Chrome lehetővé teszi a felső rétegbeli elemek, például párbeszédpanelek, figyelmeztetések vagy modális elemek megjelenítését és vizsgálatát. Amikor egy elemet hozzáadunk a #top-layer, kap a top-layer mellette lévő jelvény, amely kattintásra a legfelső réteg konténerére ugrik, amely közvetlenül az után található </html> címke.

Az elemek sorrendje a top-layer A konténer a halmozási sorrendet követi, ami azt jelenti, hogy az utolsó van a tetején. Kattints a reveal jelvényt, hogy visszaugorjon a csomóponthoz.

Firefox tipp: Ugrás az azonosítóhoz

A Firefox összekapcsolja az ID attribútumra hivatkozó elemet a célelemével ugyanabban a DOM-ban, és aláhúzással kiemeli. Használat CMD + Click (macOS) vagy CTRL + Click (Windows) ), hogy a célelemre ugorjon az azonosítóval.

Csomagolta

Jó néhány dolog, igaz? Félelmetes, hogy van néhány hihetetlenül hasznos DevTools-funkció, amelyeket a Chromium, a Firefox és a Safari egyaránt támogat. Vannak más, mindhárom által támogatott, kevésbé ismert funkciók, amelyek tetszenek?

Van néhány forrás, amit a közelben tartok, hogy naprakész legyek az újdonságokkal. Gondoltam megosztom őket itt:

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/