Noen Cross-Browser DevTools-funksjoner du kanskje ikke kjenner

Jeg bruker mye tid i DevTools, og det gjør jeg sikkert også. Noen ganger spretter jeg til og med mellom dem, spesielt når jeg feilsøker problemer på tvers av nettlesere. DevTools er mye som nettlesere selv - ikke alle funksjonene i en nettlesers DevTools vil være de samme eller støttes i en annen nettlesers DevTools.

Men det er ganske mange DevTools-funksjoner som er interoperable, til og med noen mindre kjente som jeg skal dele med deg.

For korthets skyld bruker jeg "Chromium" for å referere til alle Chromium-baserte nettlesere, som Chrome, Edge og Opera, i artikkelen. Mange av DevTools i dem tilbyr nøyaktig de samme funksjonene og egenskapene som hverandre, så dette er bare min forkortelse for å referere til dem alle samtidig.

Søk noder i DOM-treet

Noen ganger er DOM-treet fullt av noder nestet i noder som er nestet i andre noder, og så videre. Det gjør det ganske vanskelig å finne akkurat den du leter etter, men du kan raskt søke i DOM-treet ved å bruke Cmd + F (macOS) eller Ctrl + F (Windows).

I tillegg kan du også søke ved hjelp av en gyldig CSS-velger, som .red, eller bruke en XPath, som //div/h1.

I Chromium-nettlesere hopper fokus automatisk til noden som samsvarer med søkekriteriene mens du skriver, noe som kan være irriterende hvis du jobber med lengre søk eller et stort DOM-tre. Heldigvis kan du deaktivere denne oppførselen ved å gå til innstillinger (F1) → Preferanser → Global → Søk mens du skriver → Deaktiver.

Etter at du har funnet noden i DOM-treet, kan du rulle siden for å bringe noden inn i visningsporten ved å høyreklikke på nikken og velge "Rull inn i visningen".

Få tilgang til noder fra konsollen

DevTools gir mange forskjellige måter å få tilgang til en DOM-node direkte fra konsollen.

For eksempel kan du bruke $0 for å få tilgang til den valgte noden i DOM-treet. Chromium-nettlesere tar dette ett skritt videre ved å la deg få tilgang til noder valgt i omvendt kronologisk rekkefølge av historisk utvalg ved å bruke, $1, $2, $3Osv

En annen ting som Chromium-nettlesere lar deg gjøre er å kopiere nodebanen som et JavaScript-uttrykk i form av document.querySelector ved å høyreklikke på noden, og velge Kopier → Kopier JS-bane, som deretter kan brukes til å få tilgang til noden i konsollen.

Her er en annen måte å få tilgang til en DOM-node direkte fra konsollen: som en midlertidig variabel. Dette alternativet er tilgjengelig ved å høyreklikke på noden og velge et alternativ. Dette alternativet er merket forskjellig i hver nettlesers DevTools:

• Chromium: Høyreklikk → «Lagre som global variabel»
• Firefox: Høyreklikk → "Bruk i konsoll"
• Safari: Høyreklikk → "Loggelement"

Visualiser elementer med merker

DevTools kan hjelpe med å visualisere elementer som samsvarer med bestemte egenskaper ved å vise et merke ved siden av noden. Merker er klikkbare, og forskjellige nettlesere tilbyr en rekke forskjellige merker.

In Safari, er det en merkeknapp i Elements-panelets verktøylinje som kan brukes til å endre synligheten til spesifikke merker. For eksempel, hvis en node har en display: grid or display: inline-grid CSS-erklæring brukt på den, en grid merket vises ved siden av. Ved å klikke på merket fremheves rutenettområder, sporstørrelser, linjenummer og mer på siden.

Merkene som for øyeblikket støttes i Firefox's DevTools er oppført i Firefox kildedokumenter. For eksempel a scroll merket indikerer et rullbart element. Ved å klikke på merket fremheves elementet som forårsaker overløpet med en overflow merket ved siden av.

In Chromium nettlesere, kan du høyreklikke på hvilken som helst node og velge "Merkeinnstillinger ..." for å åpne en beholder som viser alle tilgjengelige merker. For eksempel elementer med scroll-snap-type vil ha en scroll-snap merket ved siden av, som ved klikk vil veksle mellom scroll-snap overlegg på det elementet.

Ta skjermbilder

Vi har vært i stand til å ta skjermbilder fra noen DevTools en stund nå, men det er nå tilgjengelig i dem alle og inkluderer nye måter å ta helsidesbilder på.

Prosessen starter ved å høyreklikke på DOM-noden du vil fange. Velg deretter alternativet for å fange noden, som er merket forskjellig avhengig av hvilke DevTools du bruker.

Gjenta de samme trinnene på html node for å ta et helsides skjermbilde. Når du gjør det, er det imidlertid verdt å merke seg at Safari beholder gjennomsiktigheten til elementets bakgrunnsfarge - Chromium og Firefox vil fange det som en hvit bakgrunn.

Det er et annet alternativ! Du kan ta et "responsivt" skjermbilde av siden, som lar deg fange siden med en bestemt visningsportbredde. Som du kanskje forventer, har hver nettleser forskjellige måter å komme dit på.

• Chromium: Cmd + Shift + M (macOS) eller Ctrl + Shift + M (Windows). Eller klikk på "Enheter"-ikonet ved siden av "Inspiser"-ikonet.
• Firefox: Verktøy → Nettleserverktøy → "Responsiv designmodus"
• Safari: Utvikle → "Gå inn i responsiv designmodus"

Kromtips: Inspiser det øverste laget

Chrome lar deg visualisere og inspisere topplagselementer, som en dialogboks, varsling eller modal. Når et element legges til #top-layer, den får en top-layer merket ved siden av, som ved klikk hopper deg til topplagsbeholderen som ligger like etter </html> tag.

Rekkefølgen av elementene i top-layer beholderen følger stablingsrekkefølgen, noe som betyr at den siste er på toppen. Klikk på reveal merket for å hoppe tilbake til noden.

Firefox-tips: Hopp til ID

Firefox kobler elementet som refererer til ID-attributtet til målelementet i samme DOM og fremhever det med en understreking. Bruk CMD + Click (macOS) eller CTRL + Click (Windows) ) for å hoppe til målelementet med identifikatoren.

Innpakning opp

Ganske mange ting, ikke sant? Det er kjempebra at det er noen utrolig nyttige DevTools-funksjoner som støttes både i Chromium, Firefox og Safari. Er det noen andre mindre kjente funksjoner som støttes av alle tre som du liker?

Det er noen få ressurser jeg har i nærheten for å holde meg oppdatert på hva som er nytt. Tenkte jeg skulle dele dem med her:

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/