Enkele Cross-Browser DevTools-functies diegene u misschien noch wetenschap | CSS-trucs

Ik uitgegeven veel tijdstip aan DevTools, plusteken ik weet zeker dat jij dat zowel doet. Somwijlen stuiter ik er zelfs tussen, vooral wanneer ik problemen met verschillende browsers debug. DevTools lijkt veel op browsers zelf – noch alle functies te den DevTools van den ene browser zullen idem zijn of wordt ondersteund te den DevTools van ene andere browser.

Maar er zijn nogal watten DevTools-functies diegene interoperabel zijn, zelfs enkele minder weten diegene ik op ie punt sta met u te porties.

Kortheidshalve gewoonte ik “Chromium” wegens te verwijzen zoals alle op Chromium gebaseerde browsers, zoals Chrome, Edge plusteken Opera, te ie wetsartikel. Veel van den DevTools erin bieden precies dezelfde functies plusteken mogelijkheden mits jawel, dus dit is slechts mijn afkorting wegens zij allen tegelijk te vermelden.

Zoek knooppunten te den DOM-structuur

Somwijlen zit den DOM-structuur vol met knooppunten diegene zijn genest te knooppunten diegene zijn genest te andere knooppunten, enzovoorts. Dat maakt ie vrij moeilijk wegens precies te vinden waarnaar u op zoek bent, maar u kunt snel te den DOM-structuur zoeken met behulp van Cmd + F (macOS) of Ctrl + F (Rekenen).

Daarbij kunt u zowel zoeken met ene geldige CSS-kiezer, zoals .redof met behulp van ene XPath, zoals //div/h1.

Te Chromium-browsers springt den focus moeiteloos zoals ie kruispunt dat overeenkomt met den zoekcriteria terwijl u typt, watten vervelend schenkkan zijn mits u werkt met langere zoekopdrachten of ene uitgestrekte DOM-structuur. Gelukkig kun jou dit rijrichting uitzetten wegens zoals Instellingen (F1) → Voorliefdes → Ruwweg → Zoeken terwijl u typt → Uitzetten.

Nadat u ie kruispunt te den DOM-structuur hebt gevonden, kunt u wegens den pagina scrollen wegens ie kruispunt te den viewport te brengen wegens met den rechtermuisknop op ie kruispunt te klikken plusteken “Scroll into view” te uitpikken.

Ontvang toegang totdat knooppunten vanaf den console

DevTools biedt veel verschillende wegen wegens rechtstreeks vanaf den console toegang te krijgen totdat ene DOM-knooppunt.

U kunt bijvoorbeeld tradities $0 wegens toegang te krijgen totdat ie huidig ​​geselecteerde kruispunt te den DOM-structuur. Chromium-browsers gaan nog ene stap voorts wegens u toegang te geven totdat knooppunten diegene zijn geselecteerd te den tegenovergestelde chronologische volgorde van historische uitverkoring met behulp van, $1, $2, $3etc.

Ene ander ding dat u met Chromium-browsers kunt uitrichten, is ie knooppuntpad kopiëren mits ene JavaScript-expressie te den vorm van document.querySelector wegens met den rechtermuisknop op ie kruispunt te klikken plusteken te uitpikken Kopiëren → Kopieer ie JS-paddiegene vervolgens schenkkan wordt tweedehands wegens toegang te krijgen totdat ie kruispunt te den console.

Hier is ene andere wijze wegens rechtstreeks vanaf den console toegang te krijgen totdat ene DOM-knooppunt: mits ene tijdelijke variabele. Dit optie is vacant wegens met den rechtermuisknop op ie kruispunt te klikken plusteken ene optie te uitpikken. Diegene optie is verschillend gelabeld te den DevTools van elke browser:

• chroom: Klik met den rechtermuisknop → “Opslaan mits globale variabele”
• Firefox: Klik met den rechtermuisknop → “Gewoontes te console”
• Safari: Klik met den rechtermuisknop → “Loom-element”

Visualiseer elementen met badges

DevTools schenkkan promoten erbij ie visualiseren van elementen diegene overeenkomen met determineren eigenschappen wegens ene badge ongeacht ie kruispunt weer te geven. Badges zijn klikbaar plusteken verschillende browsers bieden verschillende badges.

Te Safari, is er ene badgeknop te den werkbalk van ie deelvenster Elementen diegene schenkkan wordt tweedehands wegens den zichtbaarheid van specifieke badges te te schakelen. Indien ene kruispunt bijvoorbeeld ene display: grid of display: inline-grid CSS-verklaring erop toegepast, a grid badge wordt ernaast weergegeven. Indien u op den badge klikt, wordt rastergebieden, spoorgroottes, regelnummers plusteken meer op den pagina gemarkeerd.

Den badges diegene nu wordt ondersteund te Firefox‘s DevTools wordt vermeld te Firefox bron documenten. Bijvoorbeeld ene scroll badge geven ene schuifbaar factor aan. Voort op den badge te klikken, wordt ie factor dat den vestibule veroorzaakt, gemarkeerd met ene overflow nummerplaat ernaast.

Te chroom browsers, kunt u met den rechtermuisknop op ene kruispunt klikken plusteken uitpikken “Badge-instellingen…” wegens ene ​​container te openen met alle beschikbare badges. Bijvoorbeeld elementen met scroll-snap-type zou ene hebben scroll-snap badge ernaast, diegene erbij klikken den scroll-snap overlay op dat factor.

Schermafbeeldingen maken

Wij kunnen alreeds ene tijdje schermafbeeldingen maken van sommige DevTools, maar ie is nu te alle DevTools vacant plusteken bevatten nieuwe wegen wegens paginagrote afbeeldingen te maken.

Ie veranderingsproces begint wegens met den rechtermuisknop te klikken op ie DOM-knooppunt dat u wilt vastleggen. Selecteer vervolgens den optie wegens ie kruispunt vast te leggen, dat verschillend is gelabeld, onderschikkend van welke DevTools u tweedehands.

Herhaal dezelfde stappen op den html node wegens ene ​​schermafbeelding van ene volledige pagina te maken. Wanneer u dat doet, is ie echter vermeldenswaard dat Safari den transparantie van den achtergrondkleur van ie factor behoudt – Chromium plusteken Firefox zullen ie vastleggen mits ene witten toneel.

Er is nog ene optie! U kunt ene “responsieve” schermafbeelding van den pagina maken, waarmee u den pagina met ene specifieke viewport-breedte kunt vastleggen. Zoals jou zullen vooruitzien, heeft elke browser verschillende wegen wegens ginds te komen.

• chroom: Cmd + Shift + M (macOS) of Ctrl + Shift + M (Rekenen). Of klik op ie pictogram “Toestellen” ongeacht ie pictogram “Inspecteren”.
• Firefox: Hulpmiddelen → Browserhulpmiddelen → “Responsieve ontwerpmodus”
• Safari: Uitbouwen → “Ga zoals den responsieve ontwerpmodus”

Chroomtip: Inspecteer den opperste verachtelijk

Met Chrome kunt u elementen van den opperste verachtelijk visualiseren plusteken inspecteren, zoals ene dialoogvenster, waarschuwing of modaal. Wanneer ene factor wordt toegevoegd aan den #top-layerie krijgt ene top-layer badge ernaast, waarmee u erbij klikken zoals den container op den opperste verachtelijk springt diegene zichzelf netwerken achter den </html> label.

Den volgorde van den elementen te den top-layer container volgt den stapelvolgorde, watten betekent dat den laatste bovenaan staat. Klik op den reveal badge wegens terug te springen zoals ie kruispunt.

Firefox-tip: ga zoals ID

Firefox koppelt ie factor dat verwijst zoals ie ID-attribuut aan zijn doelelement te dezelfde DOM plusteken markeert ie met ene onderstreping. Gewoonte CMD + Click (macOS) of CTRL + Click (Windows) )wegens zoals ie doelelement met den identifier te springen.

Afsluiten

Nogal watten waar, weliswaar? Ie is massaal dat er ene tal ongelooflijk handige DevTools-functies zijn diegene zowel te Chromium, Firefox mits Safari wordt ondersteund. Zijn er nog andere minder weten functies diegene wegens alle drietal wordt ondersteund plusteken diegene jou wieg vindt?

Er zijn ene twee bronnen diegene ik te den buurt vasthouden wegens op den hoogte te blijven van watten er opzienbarend is. Ik denk ik portie zij hier met: