Vissa Cross-Browser DevTools-funktioner som du kanske inte känner till

Jag tillbringar mycket tid i DevTools, och det gör jag säkert också. Ibland studsar jag till och med mellan dem, särskilt när jag felsöker problem med flera webbläsare. DevTools är ungefär som webbläsarna själva — inte alla funktioner i en webbläsares DevTools kommer att vara desamma eller stöds i en annan webbläsares DevTools.

Men det finns en hel del DevTools-funktioner som är kompatibla, även några mindre kända som jag ska dela med mig av.

För korthetens skull använder jag "Chromium" för att referera till alla Chromium-baserade webbläsare, som Chrome, Edge och Opera, i artikeln. Många av DevTools i dem erbjuder exakt samma funktioner och möjligheter som varandra, så detta är bara min förkortning för att hänvisa till dem alla på en gång.

Sök noder i DOM-trädet

Ibland är DOM-trädet fullt av noder kapslade i noder som är kapslade i andra noder, och så vidare. Det gör det ganska svårt att hitta exakt den du letar efter, men du kan snabbt söka i DOM-trädet med Cmd + F (macOS) eller Ctrl + F (Windows).

Dessutom kan du också söka med en giltig CSS-väljare, som .red, eller använder en XPath, som //div/h1.

I Chromium-webbläsare hoppar fokus automatiskt till den nod som matchar sökkriterierna när du skriver, vilket kan vara irriterande om du arbetar med längre sökfrågor eller ett stort DOM-träd. Lyckligtvis kan du inaktivera detta beteende genom att gå till Inställningar (F1) → preferenser → Välgörenhet → Sök medan du skriver → inaktivera.

När du har hittat noden i DOM-trädet kan du rulla på sidan för att ta med noden i visningsporten genom att högerklicka på nicken och välja "Scrolla in i vy".

Åtkomst till noder från konsolen

DevTools tillhandahåller många olika sätt att komma åt en DOM-nod direkt från konsolen.

Du kan till exempel använda $0 för att komma åt den för närvarande valda noden i DOM-trädet. Chromium-webbläsare tar detta ett steg längre genom att låta dig komma åt noder valda i omvänd kronologisk ordning av historiskt urval med hjälp av, $1, $2, $3Etc.

En annan sak som Chromium-webbläsare låter dig göra är att kopiera nodsökvägen som ett JavaScript-uttryck i form av document.querySelector genom att högerklicka på noden och välja Kopiera → Kopiera JS-sökväg, som sedan kan användas för att komma åt noden i konsolen.

Här är ett annat sätt att komma åt en DOM-nod direkt från konsolen: som en temporär variabel. Det här alternativet är tillgängligt genom att högerklicka på noden och välja ett alternativ. Det alternativet är märkt på olika sätt i varje webbläsares DevTools:

• krom: Högerklicka → "Lagra som global variabel"
• firefox: Högerklicka → "Använd i konsolen"
• Safari: Högerklicka → "Loggelement"

Visualisera element med märken

DevTools kan hjälpa till att visualisera element som matchar vissa egenskaper genom att visa ett märke bredvid noden. Märken är klickbara och olika webbläsare erbjuder en mängd olika märken.

In Safari, det finns en märkesknapp i elementpanelens verktygsfält som kan användas för att växla synligheten för specifika märken. Till exempel, om en nod har en display: grid or display: inline-grid CSS-deklaration tillämpad på den, en grid märket visas bredvid. Genom att klicka på märket markeras rutnätsområden, spårstorlekar, radnummer och mer på sidan.

De märken som för närvarande stöds i firefoxs DevTools listas i Firefox källdokument. Till exempel a scroll märke indikerar ett rullningsbart element. Genom att klicka på märket framhävs det element som orsakar översvämningen med en overflow märke bredvid.

In krom webbläsare kan du högerklicka på valfri nod och välja "Märkeinställningar..." för att öppna en behållare som listar alla tillgängliga märken. Till exempel element med scroll-snap-type kommer att ha en scroll-snap märke bredvid den, som vid klick växlar scroll-snap överlägg på det elementet.

Ta skärmdumpar

Vi har kunnat ta skärmdumpar från vissa DevTools ett tag nu, men det är nu tillgängligt i dem alla och inkluderar nya sätt att ta helsidesbilder.

Processen börjar med att högerklicka på den DOM-nod du vill fånga. Välj sedan alternativet för att fånga noden, som är märkt på olika sätt beroende på vilka DevTools du använder.

Upprepa samma steg på html nod för att ta en helsidesskärmdump. När du gör det är det dock värt att notera att Safari behåller transparensen av elementets bakgrundsfärg - Chromium och Firefox kommer att fånga det som en vit bakgrund.

Det finns ett annat alternativ! Du kan ta en "responsiv" skärmdump av sidan, vilket låter dig fånga sidan med en specifik visningsportbredd. Som du kan förvänta dig har varje webbläsare olika sätt att komma dit.

• krom: Cmd + Shift + M (macOS) eller Ctrl + Shift + M (Windows). Eller klicka på ikonen "Enheter" bredvid ikonen "Inspektera".
• firefox: Verktyg → Webbläsarverktyg → "Responsivt designläge"
• Safari: Utveckla → "Gå in i responsivt designläge"

Kromtips: Inspektera det översta lagret

Chrome låter dig visualisera och inspektera element i översta lagret, som en dialogruta, varning eller modal. När ett element läggs till i #top-layer, den får en top-layer märke bredvid den, som vid klick hoppar dig till behållaren för det översta lagret som ligger strax efter </html> märka.

Ordningen på elementen i top-layer behållaren följer staplingsordningen, vilket innebär att den sista är på toppen. Klicka på reveal märke för att hoppa tillbaka till noden.

Firefox-tips: Hoppa till ID

Firefox länkar elementet som refererar till ID-attributet till dess målelement i samma DOM och markerar det med en understrykning. Använda sig av CMD + Click (macOS) eller CTRL + Click (Windows) ) för att hoppa till målelementet med identifieraren.

Inslagning upp

Ganska många saker, eller hur? Det är fantastiskt att det finns några otroligt användbara DevTools-funktioner som stöds i både Chromium, Firefox och Safari. Finns det några andra mindre kända funktioner som stöds av alla tre som du gillar?

Det finns några resurser jag har i närheten för att hålla koll på vad som är nytt. Jag tänkte dela med mig av dem här:

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/