Jotkut Cross-Browser DevTools -ominaisuudet, joita et ehkä tiedä

Vietän paljon aikaa DevToolsissa, ja varmasti sinäkin. Joskus jopa hyppään niiden välillä, varsinkin kun korjaan selaimen välisiä ongelmia. DevTools muistuttaa paljon itse selaimia – kaikki yhden selaimen DevToolsin ominaisuudet eivät ole samoja tai tuettuja toisen selaimen DevToolsissa.

Mutta monet DevTools-ominaisuudet ovat yhteentoimivia, jopa joitain vähemmän tunnettuja, jotka aion jakaa kanssasi.

Lyhytyyden vuoksi käytän "Chromiumia" viittaamaan kaikkiin Chromium-pohjaisiin selaimiin, kuten Chrome, Edge ja Opera, artikkelissa. Monet DevTools-työkalut tarjoavat täsmälleen samat ominaisuudet ja ominaisuudet kuin toisissaan, joten tämä on vain minun lyhenteeni viitaten niihin kaikkiin kerralla.

Etsi solmuja DOM-puusta

Joskus DOM-puu on täynnä solmuja, jotka on sijoitettu muihin solmuihin ja niin edelleen. Tämän vuoksi on melko vaikea löytää juuri sitä, jota etsit, mutta voit nopeasti etsiä DOM-puuta käyttämällä Cmd + F (macOS) tai Ctrl + F (Windows).

Lisäksi voit myös hakea käyttämällä kelvollista CSS-valitsinta, esim .red, tai käyttämällä XPathia, esim //div/h1.

Chromium-selaimissa kohdistus siirtyy automaattisesti hakuehtoja vastaavaan solmuun kirjoittaessasi, mikä voi olla ärsyttävää, jos työskentelet pidempien hakukyselyiden tai suuren DOM-puun kanssa. Onneksi voit poistaa tämän toiminnan käytöstä siirtymällä osoitteeseen Asetukset (F1) → Asetukset → Global → Hae kirjoittaessasi → Poista.

Kun olet löytänyt solmun DOM-puusta, voit vierittää sivua tuodaksesi solmun näyttöporttiin napsauttamalla solmua hiiren oikealla painikkeella ja valitsemalla "Scroll to view".

Pääsy solmuihin konsolista

DevTools tarjoaa monia eri tapoja käyttää DOM-solmua suoraan konsolista.

Voit esimerkiksi käyttää $0 päästäksesi tällä hetkellä valittuun solmuun DOM-puussa. Chromium-selaimet vievät tämän askeleen pidemmälle sallimalla sinun käyttää solmuja, jotka on valittu käänteisessä kronologisessa järjestyksessä historiallisen valinnan mukaan käyttämällä $1, $2, $3, Jne

Toinen asia, jonka Chromium-selaimet sallivat, on kopioida solmupolku JavaScript-lausekkeena muodossa document.querySelector napsauttamalla solmua hiiren kakkospainikkeella ja valitsemalla kopio → Kopioi JS-polku, jonka avulla voidaan sitten käyttää konsolin solmua.

Tässä on toinen tapa käyttää DOM-solmua suoraan konsolista: väliaikaisena muuttujana. Tämä vaihtoehto on käytettävissä napsauttamalla solmua hiiren kakkospainikkeella ja valitsemalla vaihtoehdon. Tämä vaihtoehto on merkitty eri tavalla kunkin selaimen DevToolsissa:

• Kromi: Napsauta hiiren kakkospainikkeella → "Tallenna globaalina muuttujana"
• Firefox: Napsauta hiiren kakkospainikkeella → "Käytä konsolissa"
• safari: Napsauta hiiren kakkospainikkeella → "Lokielementti"

Visualisoi elementtejä merkeillä

DevTools voi auttaa visualisoimaan tiettyjä ominaisuuksia vastaavia elementtejä näyttämällä solmun vieressä merkin. Tunnusmerkit ovat klikattavia, ja eri selaimet tarjoavat erilaisia ​​merkkejä.

In safari, Elements-paneelin työkalupalkissa on merkkipainike, jota voidaan käyttää tiettyjen merkkien näkyvyyden vaihtamiseen. Esimerkiksi jos solmussa on a display: grid or display: inline-grid siihen sovellettu CSS-ilmoitus, a grid merkki näkyy sen vieressä. Merkin napsauttaminen korostaa sivulla ruudukkoalueita, kappalekokoja, rivinumeroita ja muuta.

Tunnusmerkit, joita tällä hetkellä tuetaan FirefoxDevTools on lueteltu Firefoxissa lähdedokumentit. Esimerkiksi a scroll merkki osoittaa vieritettävän elementin. Merkin napsauttaminen korostaa ylivuodon aiheuttavan elementin an-merkillä overflow merkki sen vieressä.

In Kromi selaimissa, voit napsauttaa hiiren kakkospainikkeella mitä tahansa solmua ja valita "Tunnusasetukset…" avataksesi säilön, jossa luetellaan kaikki käytettävissä olevat merkit. Esimerkiksi elementit, joissa on scroll-snap-type tulee olemaan scroll-snap vieressä oleva merkki, jota napsauttamalla vaihtuu scroll-snap peitto kyseiselle elementille.

Kuvakaappausten ottaminen

Olemme voineet ottaa kuvakaappauksia joistakin DevToolsista jo jonkin aikaa, mutta se on nyt saatavilla kaikissa ja sisältää uusia tapoja ottaa koko sivun kuvia.

Prosessi alkaa napsauttamalla hiiren kakkospainikkeella DOM-solmua, jonka haluat kaapata. Valitse sitten vaihtoehto kaapata solmu, joka on merkitty eri tavalla käyttämäsi DevToolsin mukaan.

Toista samat vaiheet kohdassa html node ottaaksesi koko sivun kuvakaappauksen. Kun teet sen, on kuitenkin syytä huomata, että Safari säilyttää elementin taustavärin läpinäkyvyyden – Chromium ja Firefox tallentavat sen valkoiseksi taustaksi.

On toinenkin vaihtoehto! Voit ottaa sivusta "responsiivisen" kuvakaappauksen, jonka avulla voit kaapata sivun tietyllä näkymän leveydellä. Kuten arvata saattaa, jokaisella selaimella on erilaisia ​​tapoja päästä sinne.

• Kromi: Cmd + Shift + M (macOS) tai Ctrl + Shift + M (Windows). Tai napsauta "Tarkista" -kuvakkeen vieressä olevaa "Laitteet" -kuvaketta.
• Firefox: Työkalut → Selaintyökalut → "Responsiivinen suunnittelutila"
• safari: Kehitä → "Siirry reagoivaan suunnittelutilaan"

Kromivinkki: Tarkista yläkerros

Chromen avulla voit visualisoida ja tarkastaa ylimmän kerroksen elementtejä, kuten valintaikkunan, ilmoituksen tai modaalin. Kun elementti lisätään #top-layer, se saa a top-layer vieressä oleva merkki, jota napsauttamalla siirryt ylimmän kerroksen säilöön, joka sijaitsee heti merkin jälkeen </html> tunnisteita.

Elementtien järjestys top-layer kontti noudattaa pinoamisjärjestystä, mikä tarkoittaa, että viimeinen on päällä. Klikkaa reveal merkki hypätä takaisin solmuun.

Firefox-vinkki: Siirry tunnukseen

Firefox linkittää ID-attribuuttia viittaavan elementin kohdeelementtiinsä samassa DOM:ssa ja korostaa sen alleviivauksella. Käyttää CMD + Click (macOS) tai CTRL + Click (Windows) )hyppää kohdeelementtiin tunnuksella.

Käärimistä

Aika monta asiaa, eikö? On mahtavaa, että on olemassa joitain uskomattoman hyödyllisiä DevTools-ominaisuuksia, joita tuetaan sekä Chromiumissa, Firefoxissa että Safarissa. Onko muita vähemmän tunnettuja ominaisuuksia, joita kaikki kolme tukevat?

Pidän lähelläni muutamia resursseja pysyäkseni ajan tasalla uutuuksista. Ajattelin jakaa ne täällä:

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/