Nogle Cross-Browser DevTools-funktioner, du måske ikke kender

Jeg bruger meget tid i DevTools, og det er jeg sikker på, at du også gør. Nogle gange hopper jeg endda mellem dem, især når jeg fejlretter problemer på tværs af browsere. DevTools er meget som browsere selv - ikke alle funktionerne i en browsers DevTools vil være de samme eller understøttes i en anden browsers DevTools.

Men der er en del DevTools-funktioner, der er interoperable, selv nogle mindre kendte, som jeg er ved at dele med dig.

For korthedens skyld bruger jeg "Chromium" til at henvise til alle Chromium-baserede browsere, som Chrome, Edge og Opera, i artiklen. Mange af DevTools i dem tilbyder nøjagtig de samme funktioner og muligheder som hinanden, så dette er blot min forkortelse for at henvise til dem alle på én gang.

Søg noder i DOM-træet

Nogle gange er DOM-træet fyldt med noder indlejret i noder, der er indlejret i andre noder, og så videre. Det gør det ret svært at finde præcis den, du leder efter, men du kan hurtigt søge i DOM-træet ved hjælp af Cmd + F (macOS) eller Ctrl + F (Windows).

Derudover kan du også søge ved hjælp af en gyldig CSS-vælger, f.eks .red, eller ved at bruge en XPath, f.eks //div/h1.

I Chromium-browsere hopper fokus automatisk til den node, der matcher søgekriterierne, mens du skriver, hvilket kan være irriterende, hvis du arbejder med længere søgeforespørgsler eller et stort DOM-træ. Heldigvis kan du deaktivere denne adfærd ved at gå til Indstillinger (F1) → Indstillinger → Global → Søg, mens du skriver → Deaktiver.

Når du har lokaliseret noden i DOM-træet, kan du rulle siden for at bringe noden ind i viewporten ved at højreklikke på noden og vælge "Rul ind i visningen".

Få adgang til noder fra konsollen

DevTools giver mange forskellige måder at få adgang til en DOM-node direkte fra konsollen.

For eksempel kan du bruge $0 for at få adgang til den aktuelt valgte node i DOM-træet. Chromium-browsere tager dette et skridt videre ved at give dig adgang til noder valgt i omvendt kronologisk rækkefølge af historisk valg ved hjælp af, $1, $2, $3Osv

En anden ting, som Chromium-browsere giver dig mulighed for, er at kopiere nodestien som et JavaScript-udtryk i form af document.querySelector ved at højreklikke på noden og vælge Kopi → Kopiér JS-stien, som derefter kan bruges til at få adgang til noden i konsollen.

Her er en anden måde at få adgang til en DOM-node direkte fra konsollen: som en midlertidig variabel. Denne mulighed er tilgængelig ved at højreklikke på noden og vælge en mulighed. Denne mulighed er mærket forskelligt i hver browsers DevTools:

• Chromium: Højreklik → "Gem som global variabel"
• Firefox: Højreklik → "Brug i konsol"
• Safari: Højreklik → "Logelement"

Visualiser elementer med badges

DevTools kan hjælpe med at visualisere elementer, der matcher bestemte egenskaber, ved at vise en badge ved siden af ​​noden. Badges er klikbare, og forskellige browsere tilbyder en række forskellige badges.

In Safari, er der en badge-knap i Elements-panelets værktøjslinje, som kan bruges til at skifte synligheden af ​​specifikke badges. For eksempel, hvis en node har en display: grid or display: inline-grid CSS-erklæring anvendt på det, en grid badge vises ved siden af. Ved at klikke på badgen fremhæves gitterområder, sporstørrelser, linjenumre og mere på siden.

De badges, der i øjeblikket understøttes i Firefox's DevTools er opført i Firefox kildedokumenter. F.eks scroll badge angiver et rulleelement. Ved at klikke på emblemet fremhæves det element, der forårsager overløbet med en overflow badge ved siden af.

In Chromium browsere, kan du højreklikke på en hvilken som helst node og vælge "Mærkeindstillinger..." for at åbne en container, der viser alle de tilgængelige badges. For eksempel elementer med scroll-snap-type vil have en scroll-snap badge ved siden af, som ved klik vil skifte til scroll-snap overlejring på det element.

Tager skærmbilleder

Vi har været i stand til at tage skærmbilleder fra nogle DevTools i et stykke tid nu, men det er nu tilgængeligt i dem alle og inkluderer nye måder at tage helsidesbilleder på.

Processen starter med at højreklikke på den DOM-node, du vil fange. Vælg derefter muligheden for at fange noden, som er mærket forskelligt afhængigt af hvilke DevTools du bruger.

Gentag de samme trin på html node for at tage et helsides skærmbillede. Når du gør det, er det dog værd at bemærke, at Safari bevarer gennemsigtigheden af ​​elementets baggrundsfarve - Chromium og Firefox vil fange det som en hvid baggrund.

Der er en anden mulighed! Du kan tage et "responsivt" skærmbillede af siden, som giver dig mulighed for at fange siden i en bestemt visningsportsbredde. Som du måske forventer, har hver browser forskellige måder at komme dertil.

• Chromium: Cmd + Shift + M (macOS) eller Ctrl + Shift + M (Windows). Eller klik på ikonet "Enheder" ved siden af ​​ikonet "Inspicer".
• Firefox: Værktøjer → Browserværktøjer → "Responsiv designtilstand"
• Safari: Udvikle → "Gå ind i responsiv designtilstand"

Krom tip: Undersøg det øverste lag

Chrome lader dig visualisere og inspicere elementer i det øverste lag, såsom en dialogboks, advarsel eller modal. Når et element tilføjes til #top-layer, den får en top-layer badge ved siden af, som ved klik hopper dig til toplagsbeholderen placeret lige efter </html> tag.

Rækkefølgen af ​​elementerne i top-layer container følger stablerækkefølgen, hvilket betyder, at den sidste er på toppen. Klik på reveal badge for at hoppe tilbage til noden.

Firefox tip: Hop til ID

Firefox forbinder elementet, der refererer til ID-attributtet, til dets målelement i samme DOM og fremhæver det med en understregning. Brug CMD + Click (macOS) eller CTRL + Click (Windows) ) for at hoppe til målelementet med identifikatoren.

Indpakning op

En hel del ting, ikke? Det er fantastisk, at der er nogle utroligt nyttige DevTools-funktioner, der understøttes i både Chromium, Firefox og Safari. Er der andre mindre kendte funktioner, der understøttes af alle tre, som du kan lide?

Der er et par ressourcer, jeg holder tæt på for at holde mig på forkant med, hvad der er nyt. Jeg tænkte, at jeg ville dele dem med her:

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/