Ik besteed veel tijd aan DevTools, en ik weet zeker dat jij dat ook doet. Soms stuiter ik er zelfs tussen, vooral wanneer ik problemen met verschillende browsers debug. DevTools lijkt veel op browsers zelf - niet alle functies in de DevTools van de ene browser zullen hetzelfde zijn of worden ondersteund in de DevTools van een andere browser.
Maar er zijn nogal wat DevTools-functies die interoperabel zijn, zelfs enkele minder bekende die ik op het punt sta met u te delen.
Kortheidshalve gebruik ik "Chromium" om te verwijzen naar alle op Chromium gebaseerde browsers, zoals Chrome, Edge en Opera, in het artikel. Veel van de DevTools daarin bieden exact dezelfde functies en mogelijkheden als elkaar, dus dit is slechts mijn afkorting om ze allemaal tegelijk te noemen.
Zoek knooppunten in de DOM-structuur
Soms zit de DOM-structuur vol met knooppunten die zijn genest in knooppunten die zijn genest in andere knooppunten, enzovoort. Dat maakt het vrij moeilijk om precies te vinden waarnaar u op zoek bent, maar u kunt snel in de DOM-structuur zoeken met behulp van Cmd + F (macOS) of Ctrl + F (Ramen).
Bovendien kunt u ook zoeken met een geldige CSS-kiezer, zoals .red, of met behulp van een XPath, zoals //div/h1.
In Chromium-browsers springt de focus automatisch naar het knooppunt dat overeenkomt met de zoekcriteria terwijl u typt, wat vervelend kan zijn als u werkt met langere zoekopdrachten of een grote DOM-structuur. Gelukkig kun je dit gedrag uitschakelen door naar Instellingen (F1) → voorkeuren → Globaal → Zoek terwijl u typt → onbruikbaar maken.
Nadat u het knooppunt in de DOM-structuur hebt gevonden, kunt u door de pagina scrollen om het knooppunt binnen de viewport te brengen door met de rechtermuisknop op het knooppunt te klikken en "Scroll into view" te selecteren.
Krijg toegang tot knooppunten vanaf de console
DevTools biedt veel verschillende manieren om rechtstreeks vanaf de console toegang te krijgen tot een DOM-knooppunt.
U kunt bijvoorbeeld $0 om toegang te krijgen tot het huidig geselecteerde knooppunt in de DOM-structuur. Chromium-browsers gaan nog een stap verder door u toegang te geven tot knooppunten die zijn geselecteerd in de omgekeerde chronologische volgorde van historische selectie met behulp van, $1, $2, $3, Etc.
Een ander ding dat u met Chromium-browsers kunt doen, is het knooppuntpad kopiëren als een JavaScript-expressie in de vorm van document.querySelector door met de rechtermuisknop op het knooppunt te klikken en te selecteren Kopiëren → Kopieer het JS-pad, die vervolgens kan worden gebruikt om toegang te krijgen tot het knooppunt in de console.
Hier is een andere manier om rechtstreeks vanaf de console toegang te krijgen tot een DOM-knooppunt: als een tijdelijke variabele. Deze optie is beschikbaar door met de rechtermuisknop op het knooppunt te klikken en een optie te selecteren. Die optie is anders gelabeld in de DevTools van elke browser:
- Chromium: Klik met de rechtermuisknop → "Opslaan als globale variabele"
- Firefox: Klik met de rechtermuisknop → "Gebruiken in console"
- Safari: Klik met de rechtermuisknop → "Log-element"
Visualiseer elementen met badges
DevTools kan helpen bij het visualiseren van elementen die overeenkomen met bepaalde eigenschappen door een badge naast het knooppunt weer te geven. Badges zijn klikbaar en verschillende browsers bieden verschillende badges.
In Safari, is er een badgeknop in de werkbalk van het deelvenster Elementen die kan worden gebruikt om de zichtbaarheid van specifieke badges in te schakelen. Als een knooppunt bijvoorbeeld een display: grid or display: inline-grid CSS-verklaring erop toegepast, a grid badge wordt ernaast weergegeven. Als u op de badge klikt, worden rastergebieden, spoorgroottes, regelnummers en meer op de pagina gemarkeerd.
De badges die momenteel worden ondersteund in Firefox's DevTools worden vermeld in Firefox bron documenten. Bijvoorbeeld a scroll badge geeft een schuifbaar element aan. Door op de badge te klikken, wordt het element dat de overloop veroorzaakt, gemarkeerd met een overflow kenteken ernaast.
In Chromium browsers, kunt u met de rechtermuisknop op een knooppunt klikken en selecteren "Badge-instellingen..." om een container te openen met alle beschikbare badges. Bijvoorbeeld elementen met scroll-snap-type zal een hebben scroll-snap badge ernaast, die bij klikken de scroll-snap overlay op dat element.
Screenshots maken
We kunnen al een tijdje schermafbeeldingen maken van sommige DevTools, maar het is nu in alle DevTools beschikbaar en bevat nieuwe manieren om paginagrote afbeeldingen te maken.
Het proces begint door met de rechtermuisknop te klikken op het DOM-knooppunt dat u wilt vastleggen. Selecteer vervolgens de optie om het knooppunt vast te leggen, dat anders is gelabeld, afhankelijk van welke DevTools u gebruikt.
Herhaal dezelfde stappen op de html node om een schermafbeelding van een volledige pagina te maken. Wanneer u dat doet, is het echter vermeldenswaard dat Safari de transparantie van de achtergrondkleur van het element behoudt - Chromium en Firefox zullen het vastleggen als een witte achtergrond.
Er is nog een optie! U kunt een "responsieve" schermafbeelding van de pagina maken, waarmee u de pagina met een specifieke viewport-breedte kunt vastleggen. Zoals je zou verwachten, heeft elke browser verschillende manieren om daar te komen.
- Chromium:
Cmd+Shift+M(macOS) ofCtrl+Shift+M(Ramen). Of klik op het pictogram "Apparaten" naast het pictogram "Inspecteren". - Firefox: Hulpmiddelen → Browserhulpmiddelen → "Responsieve ontwerpmodus"
- Safari: Ontwikkelen → "Ga naar de responsieve ontwerpmodus"
Chroomtip: Inspecteer de bovenste laag
Met Chrome kunt u elementen van de bovenste laag visualiseren en inspecteren, zoals een dialoogvenster, waarschuwing of modaal. Wanneer een element wordt toegevoegd aan de #top-layer, het krijgt een top-layer badge ernaast, waarmee u bij klikken naar de container op de bovenste laag springt die zich net achter de </html> label.
De volgorde van de elementen in de top-layer container volgt de stapelvolgorde, wat betekent dat de laatste bovenaan staat. Klik op de reveal badge om terug te springen naar het knooppunt.
Firefox-tip: ga naar ID
Firefox koppelt het element dat verwijst naar het ID-attribuut aan zijn doelelement in dezelfde DOM en markeert het met een onderstreping. Gebruik CMD + Click (macOS) of CTRL + Click (Windows) )om naar het doelelement met de identifier te springen.
Afsluiten
Nogal wat dingen, toch? Het is geweldig dat er een aantal ongelooflijk handige DevTools-functies zijn die zowel in Chromium, Firefox als Safari worden ondersteund. Zijn er nog andere minder bekende functies die door alle drie worden ondersteund en die je leuk vindt?
Er zijn een paar bronnen die ik in de buurt houd om op de hoogte te blijven van wat er nieuw is. Ik dacht ik deel ze hier met:
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/