Unele funcții DevTools pentru browsere încrucișate pe care este posibil să nu le cunoașteți

Petrec mult timp în DevTools și sunt sigur că și tu. Uneori chiar săriesc între ele, mai ales când depanez problemele între browsere. DevTools seamănă mult cu browserele în sine - nu toate caracteristicile din DevTools ale unui browser vor fi aceleași sau vor fi acceptate în DevTools ale altui browser.

Dar există destul de multe funcții DevTools care sunt interoperabile, chiar și unele mai puțin cunoscute pe care sunt pe cale să le împărtășesc cu voi.

Din motive de concizie, folosesc „Chromium” pentru a face referire la toate browserele bazate pe Chromium, cum ar fi Chrome, Edge și Opera, în articol. Multe dintre instrumentele DevTools din ele oferă exact aceleași caracteristici și capacități unele ca altele, așa că aceasta este doar prescurtarea mea pentru a mă referi la toate simultan.

Căutați noduri în arborele DOM

Uneori, arborele DOM este plin de noduri imbricate în noduri care sunt imbricate în alte noduri și așa mai departe. Acest lucru face să fie destul de dificil să-l găsiți pe cel exact pe care îl căutați, dar puteți căuta rapid în arborele DOM folosind Cmd + F (macOS) sau Ctrl + F (Windows).

În plus, puteți căuta și folosind un selector CSS valid, cum ar fi .red, sau folosind un XPath, cum ar fi //div/h1.

În browserele Chromium, focalizarea sare automat la nodul care corespunde criteriilor de căutare pe măsură ce tastați, ceea ce ar putea fi enervant dacă lucrați cu interogări de căutare mai lungi sau cu un arbore DOM mare. Din fericire, puteți dezactiva acest comportament mergând la Setări cont (F1) → Preferințe → Caritate → Căutați în timp ce tastați → Dezactivați.

După ce ați localizat nodul în arborele DOM, puteți derula pagina pentru a aduce nodul în fereastra de vizualizare făcând clic dreapta pe nod și selectând „Derulați în vizualizare”.

Accesați nodurile din consolă

DevTools oferă multe moduri diferite de a accesa un nod DOM direct din consolă.

De exemplu, puteți utiliza $0 pentru a accesa nodul selectat curent în arborele DOM. Browserele Chromium fac acest pas mai departe, permițându-vă să accesați nodurile selectate în ordinea cronologică inversă a selecției istorice folosind, $1, $2, $3, Etc

Un alt lucru pe care browserele Chromium vă permit să îl faceți este să copiați calea nodului ca expresie JavaScript sub formă de document.querySelector făcând clic dreapta pe nod și selectând Copiați → Copiați calea JS, care poate fi apoi folosit pentru a accesa nodul din consolă.

Iată o altă modalitate de a accesa un nod DOM direct din consolă: ca variabilă temporară. Această opțiune este disponibilă făcând clic dreapta pe nod și selectând o opțiune. Această opțiune este etichetată diferit în DevTools ale fiecărui browser:

• Crom: Faceți clic dreapta → „Store ca variabilă globală”
• Firefox: Faceți clic dreapta → „Utilizare în consolă”
• Safari: Faceți clic dreapta → „Element de jurnal”

Vizualizați elemente cu insigne

DevTools poate ajuta la vizualizarea elementelor care se potrivesc cu anumite proprietăți prin afișarea unei insigne lângă nod. Insigne se poate face clic și diferite browsere oferă o varietate de insigne diferite.

In Safari, există un buton de insignă în bara de instrumente a panoului Elemente care poate fi folosit pentru a comuta vizibilitatea anumitor insigne. De exemplu, dacă un nod are un display: grid or display: inline-grid Declarație CSS aplicată acestuia, a grid insigna este afișată lângă ea. Făcând clic pe insignă, vor evidenția zonele de grilă, dimensiunile pistelor, numerele de linii și multe altele pe pagină.

Insignele care sunt acceptate în prezent în FirefoxInstrumentele DevTools sunt listate în Firefox sursă documente. De exemplu, a scroll insigna indică un element care poate fi derulat. Făcând clic pe insigna evidențiază elementul care provoacă debordarea cu un overflow insigna de lângă ea.

In Crom browsere, puteți face clic dreapta pe orice nod și selectați „Setări insignă…” pentru a deschide un container care listează toate insignele disponibile. De exemplu, elemente cu scroll-snap-type va avea a scroll-snap insigna de lângă ea, care la clic, va comuta scroll-snap suprapunere pe acel element.

Realizarea de capturi de ecran

Am reușit să facem capturi de ecran de la unele DevTools de ceva vreme, dar acum este disponibil în toate și include noi modalități de a realiza fotografii pe toată pagina.

Procesul începe făcând clic dreapta pe nodul DOM pe care doriți să îl capturați. Apoi selectați opțiunea pentru a captura nodul, care este etichetat diferit în funcție de instrumentele DevTools pe care le utilizați.

Repetați aceiași pași pe html nod pentru a face o captură de ecran pe toată pagina. Când o faci, totuși, merită remarcat faptul că Safari păstrează transparența culorii de fundal a elementului - Chromium și Firefox o vor captura ca fundal alb.

Există o altă opțiune! Puteți face o captură de ecran „responsive” a paginii, care vă permite să capturați pagina la o anumită lățime a ferestrei de vizualizare. După cum v-ați putea aștepta, fiecare browser are moduri diferite de a ajunge acolo.

• Crom: Cmd + Shift + M (macOS) sau Ctrl + Shift + M (Windows). Sau faceți clic pe pictograma „Dispozitive” de lângă pictograma „Inspectați”.
• Firefox: Instrumente → Instrumente browser → „Modul design receptiv”
• Safari: Dezvoltați → „Intrați în modul Design receptiv”

Sfat Chrome: inspectați stratul superior

Chrome vă permite să vizualizați și să inspectați elementele din stratul superior, cum ar fi un dialog, o alertă sau un modal. Când un element este adăugat la #top-layer, primește a top-layer insigna de lângă ea, care la clic, vă sare la containerul din stratul superior situat imediat după </html> etichetă.

Ordinea elementelor în top-layer containerul urmează ordinea de stivuire, ceea ce înseamnă că ultimul este în partea de sus. Apasă pe reveal insignă pentru a sări înapoi la nod.

Sfat Firefox: Salt la ID

Firefox leagă elementul care face referire la atributul ID la elementul său țintă în același DOM și îl evidențiază cu o subliniere. Utilizare CMD + Click (macOS) sau CTRL + Click (Windows) )pentru a sări la elementul țintă cu identificatorul.

La finalul

Destul de lucruri, nu? Este minunat că există câteva funcții DevTools incredibil de utile care sunt acceptate deopotrivă în Chromium, Firefox și Safari. Există alte funcții mai puțin cunoscute acceptate de toate trei care vă plac?

Există câteva resurse pe care le păstrez aproape pentru a fi la curent cu noutățile. M-am gândit să le împărtășesc aici:

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/