Veedan DevToolsis palju aega ja olen kindel, et ka teie. Mõnikord ma isegi põrkan nende vahel, eriti kui silun brauseriüleseid probleeme. DevTools sarnaneb paljuski brauseritega – mitte kõik ühe brauseri DevToolsi funktsioonid ei ole samad ega toeta teise brauseri DevToolsi.

Kuid on üsna palju koostalitlusvõimelisi DevToolsi funktsioone, isegi mõned vähemtuntud, mida ma teiega jagan.

Lühiduse huvides kasutan sõna „Chromium”, et viidata artiklis kõikidele Chromiumipõhistele brauseritele, nagu Chrome, Edge ja Opera. Paljud neis olevad DevTools pakuvad üksteisega täpselt samu funktsioone ja võimalusi, nii et see on vaid minu lühisõna nende kõigi korraga viitamiseks.

Otsi sõlmedest DOM-puust

Mõnikord on DOM-puu täis sõlmi, mis on pesastatud teistes sõlmedes jne. See muudab otsitava leidmise üsna keeruliseks, kuid saate kiiresti DOM-i puust otsida, kasutades Cmd + F (macOS) või Ctrl + F (Windows).

Lisaks saate otsida ka kehtiva CSS-valija abil, näiteks .redvõi XPathi kasutamine, näiteks //div/h1.

Chromiumi brauserites hüppab fookus sisestamise ajal automaatselt otsingukriteeriumitele vastavale sõlmele, mis võib olla häiriv, kui töötate pikemate otsingupäringute või suure DOM-i puuga. Õnneks saate selle käitumise keelata, minnes aadressile Seaded (F1) → eelistused → Globaalne → Otsige tippimise ajal → Keela.

Kui olete sõlme DOM-puust leidnud, saate kerida lehte, et viia sõlm vaateavasse, paremklõpsates sõlmel ja valides "Keri vaatesse".

Juurdepääs sõlmedele konsoolist

DevTools pakub palju erinevaid viise DOM-i sõlmele otse konsoolist juurde pääsemiseks.

Näiteks võite kasutada $0 juurdepääsuks DOM-puu parajasti valitud sõlmele. Chromiumi brauserid astuvad selle sammu edasi, võimaldades juurdepääsu ajaloolise valiku vastupidises kronoloogilises järjekorras valitud sõlmedele, kasutades $1, $2, $3Jne

Teine asi, mida Chromiumi brauserid võimaldavad teil teha, on kopeerida sõlme tee JavaScripti avaldisena kujul document.querySelector paremklõpsates sõlmel ja valides Kopeeri → Kopeerige JS-i tee, mida saab seejärel kasutada konsooli sõlmele juurdepääsuks.

Siin on veel üks võimalus DOM-sõlmele otse konsoolist juurde pääseda: ajutise muutujana. See suvand on saadaval, kui paremklõpsate sõlmel ja valite suvandi. See valik on iga brauseri DevToolsis erinevalt märgistatud:

• kroom: paremklõps → „Salvesta globaalse muutujana”
• Firefox: paremklõps → „Kasuta konsoolis”
• safari: paremklõps → „Logielement”

Visualiseerige elemente märkidega

DevTools aitab visualiseerida elemente, mis vastavad teatud omadustele, kuvades sõlme kõrval märgi. Märgid on klõpsatavad ja erinevad brauserid pakuvad erinevaid märke.

In safari, on paneeli Elements tööriistaribal märgi nupp, mida saab kasutada konkreetsete märkide nähtavuse sisse- ja väljalülitamiseks. Näiteks kui sõlmel on a display: grid or display: inline-grid sellele rakendatud CSS-deklaratsioon, a grid selle kõrval kuvatakse märk. Märgil klõpsamine tõstab lehel esile ruudustiku alad, raja suurused, ridade numbrid ja muu.

Märgid, mida praegu toetatakse FirefoxDevTools on Firefoxis loetletud lähtedokumendid. Näiteks a scroll märk tähistab keritavat elementi. Märgil klõpsamine tõstab ülevoolu põhjustava elemendi esile tähega overflow märk selle kõrval.

In kroom brauserites saate mis tahes sõlmel paremklõpsata ja valida „Märgi seaded…” et avada konteiner, kus on loetletud kõik saadaolevad märgid. Näiteks elemendid koos scroll-snap-type on scroll-snap selle kõrval olev märk, mis klõpsamisel lülitab sisse scroll-snap elemendi peal.

Ekraanipiltide tegemine

Oleme juba mõnda aega saanud mõnest DevToolsist ekraanipilte teha, kuid see on nüüd saadaval kõigis neis ja sisaldab uusi võimalusi kogu lehekülje võtete tegemiseks.

Protsess algab paremklõpsuga DOM-i sõlmel, mida soovite jäädvustada. Seejärel valige sõlme jäädvustamise suvand, mis on tähistatud erinevalt, olenevalt sellest, millist DevToolsi te kasutate.

Korrake samu samme html sõlme täisleheküljelise ekraanipildi tegemiseks. Kui teete seda, tasub aga märkida, et Safari säilitab elemendi taustavärvi läbipaistvuse – Chromium ja Firefox jäädvustavad selle valge taustana.

On veel üks võimalus! Saate teha lehelt "tundliku" ekraanipildi, mis võimaldab jäädvustada lehe kindla vaateava laiusega. Nagu arvata võis, on igal brauseril selleni jõudmiseks erinevad võimalused.

• kroom: Cmd + Shift + M (macOS) või Ctrl + Shift + M (Windows). Või klõpsake ikooni „Inspekteerimine” kõrval olevat ikooni „Seadmed”.
• Firefox: Tööriistad → Brauseri tööriistad → "Reageeriva kujunduse režiim"
• safari: Arendamine → "Sisenege tundliku disaini režiimi"

Chrome'i näpunäide: kontrollige ülemist kihti

Chrome võimaldab teil visualiseerida ja kontrollida ülemise kihi elemente, nagu dialoog, märguanne või modaal. Kui elementi lisatakse #top-layer, see saab a top-layer kõrval olev märk, mis klõpsamisel suunab teid ülemise kihi konteinerisse, mis asub vahetult pärast </html> tag.

Elementide järjekord selles top-layer konteiner järgib virnastamisjärjekorda, mis tähendab, et viimane on üleval. Klõpsake nuppu reveal märk, et hüpata tagasi sõlme.

Firefoxi näpunäide: liikuge ID-le

Firefox seob ID-atribuudile viitava elemendi sama DOM-i sihtelemendiga ja tõstab selle esile allakriipsutusega. Kasuta CMD + Click (macOS) või CTRL + Click (Windows) ), et liikuda identifikaatoriga sihtelemendi juurde.

Pakke kuni

Päris palju asju, eks? On fantastiline, et on olemas mõned uskumatult kasulikud DevToolsi funktsioonid, mida toetatakse nii Chromiumis, Firefoxis kui ka Safaris. Kas kõik kolm toetavad teile muid vähemtuntud funktsioone?

Mul on mõned ressursid, mida hoian lähedal, et olla kursis uudistega. Mõtlesin, et jagan neid siin:

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/