Niektóre funkcje Cross-Browser DevTools, których możesz nie znać

Spędzam dużo czasu w DevTools i jestem pewien, że Ty też. Czasami nawet odbijam się między nimi, zwłaszcza gdy debuguję problemy z różnymi przeglądarkami. DevTools jest bardzo podobny do samych przeglądarek — nie wszystkie funkcje w DevTools jednej przeglądarki będą takie same lub obsługiwane w DevTools innej przeglądarki.

Istnieje jednak sporo funkcji DevTools, które są interoperacyjne, nawet te mniej znane, którymi zamierzam się z wami podzielić.

Ze względu na zwięzłość używam słowa „Chromium” w odniesieniu do wszystkich przeglądarek opartych na Chromium, takich jak Chrome, Edge i Opera, w artykule. Wiele DevTools w nich oferuje dokładnie takie same funkcje i możliwości, jak inne, więc to tylko mój skrót odnoszący się do nich wszystkich naraz.

Wyszukaj węzły w drzewie DOM

Czasami drzewo DOM jest pełne węzłów zagnieżdżonych w węzłach zagnieżdżonych w innych węzłach i tak dalej. To sprawia, że ​​​​znalezienie dokładnie tego, czego szukasz, jest dość trudne, ale możesz szybko przeszukać drzewo DOM za pomocą Cmd + F (macOS) lub Ctrl + F (Windows).

Dodatkowo możesz także wyszukiwać przy użyciu prawidłowego selektora CSS, np .redlub używając XPath, na przykład //div/h1.

W przeglądarkach Chromium fokus automatycznie przeskakuje do węzła, który odpowiada kryteriom wyszukiwania podczas pisania, co może być denerwujące, jeśli pracujesz z dłuższymi zapytaniami lub dużym drzewem DOM. Na szczęście możesz wyłączyć to zachowanie, kierując się do Ustawienia (F1) → Preferencje → Globalne → Szukaj podczas pisania → Wyłącz.

Po zlokalizowaniu węzła w drzewie DOM możesz przewinąć stronę, aby umieścić węzeł w widocznym obszarze, klikając prawym przyciskiem myszy węzeł i wybierając „Przewiń do widoku”.

Dostęp do węzłów z konsoli

DevTools zapewnia wiele różnych sposobów uzyskiwania dostępu do węzła DOM bezpośrednio z konsoli.

Na przykład możesz użyć $0 aby uzyskać dostęp do aktualnie wybranego węzła w drzewie DOM. Przeglądarki Chromium idą o krok dalej, umożliwiając dostęp do węzłów wybranych w odwrotnej kolejności chronologicznej do historycznego wyboru za pomocą, $1, $2, $3, itp.

Kolejną rzeczą, na którą pozwalają przeglądarki Chromium, jest skopiowanie ścieżki węzła jako wyrażenia JavaScript w postaci document.querySelector klikając prawym przyciskiem myszy węzeł i wybierając Skopiuj → Skopiuj ścieżkę JS, którego można następnie użyć do uzyskania dostępu do węzła w konsoli.

Oto inny sposób uzyskiwania dostępu do węzła DOM bezpośrednio z konsoli: jako zmienna tymczasowa. Ta opcja jest dostępna po kliknięciu węzła prawym przyciskiem myszy i wybraniu opcji. Ta opcja jest oznaczona inaczej w DevTools każdej przeglądarki:

• chrom: Prawy przycisk myszy → „Zapisz jako zmienną globalną”
• Firefox: Prawy przycisk myszy → „Użyj w konsoli”
• Safari: Kliknij prawym przyciskiem myszy → „Element dziennika”

Wizualizuj elementy za pomocą odznak

DevTools mogą pomóc w wizualizacji elementów pasujących do określonych właściwości, wyświetlając plakietkę obok węzła. Odznaki można kliknąć, a różne przeglądarki oferują wiele różnych odznak.

In Safari, na pasku narzędzi panelu Elementy znajduje się przycisk odznaki, którego można użyć do przełączania widoczności określonych odznak. Na przykład, jeśli węzeł ma plik display: grid or display: inline-grid Zastosowano do niej deklarację CSS, a grid obok jest wyświetlona odznaka. Kliknięcie plakietki spowoduje wyróżnienie obszarów siatki, rozmiarów torów, numerów linii i innych elementów na stronie.

Odznaki, które są obecnie obsługiwane w FirefoxDevTools są wymienione w Firefox dokumenty źródłowe. Na przykład scroll znaczek wskazuje element przewijalny. Kliknięcie na znaczek podświetla element powodujący przepełnienie za pomocą an overflow znaczek obok.

In chrom przeglądarek, możesz kliknąć prawym przyciskiem myszy dowolny węzeł i wybrać „Ustawienia odznaki…” aby otworzyć kontener zawierający listę wszystkich dostępnych odznak. Na przykład elementy z scroll-snap-type będzie miał scroll-snap znaczek obok, który po kliknięciu przełączy scroll-snap nałożyć na ten element.

Robienie zrzutów ekranu

Od jakiegoś czasu możemy robić zrzuty ekranu z niektórych DevTools, ale teraz jest to dostępne we wszystkich i zawiera nowe sposoby robienia zrzutów całej strony.

Proces rozpoczyna się od kliknięcia prawym przyciskiem myszy węzła DOM, który chcesz przechwycić. Następnie wybierz opcję przechwycenia węzła, który ma inną etykietę w zależności od używanych narzędzi deweloperskich.

Powtórz te same czynności na html node, aby zrobić zrzut ekranu z całej strony. Kiedy to zrobisz, warto jednak zauważyć, że Safari zachowuje przezroczystość koloru tła elementu — Chromium i Firefox przechwytują go jako białe tło.

Jest inna opcja! Możesz zrobić „responsywny” zrzut ekranu strony, który pozwala przechwycić stronę w określonej szerokości widocznego obszaru. Jak można się spodziewać, każda przeglądarka ma różne sposoby, aby się tam dostać.

• chrom: Cmd + Shift + M (macOS) lub Ctrl + Shift + M (Okna). Lub kliknij ikonę „Urządzenia” obok ikony „Sprawdź”.
• Firefox: Narzędzia → Narzędzia przeglądarki → „Tryb projektowania responsywnego”
• Safari: Develop → „Wejdź w tryb projektowania responsywnego”

Wskazówka dotycząca Chrome: sprawdź górną warstwę

Chrome pozwala wizualizować i sprawdzać elementy górnej warstwy, takie jak okno dialogowe, alert lub modal. Gdy element zostanie dodany do #top-layer, dostaje top-layer znaczek obok, który po kliknięciu przeskakuje do kontenera górnej warstwy znajdującego się tuż za </html> etykietka.

Kolejność elementów w top-layer pojemnik jest zgodny z kolejnością układania, co oznacza, że ​​ostatni jest na górze. Kliknij reveal znaczek, aby wrócić do węzła.

Wskazówka dotycząca Firefoksa: przejdź do identyfikatora

Firefox łączy element odnoszący się do atrybutu ID z jego elementem docelowym w tym samym DOM i wyróżnia go podkreśleniem. Używać CMD + Click (macOS) lub CTRL + Click (Windows) ), aby przejść do elementu docelowego z identyfikatorem.

Zamykając

Sporo rzeczy, prawda? To niesamowite, że istnieje kilka niezwykle przydatnych funkcji DevTools, które są obsługiwane zarówno w Chromium, Firefox, jak i Safari. Czy są jakieś inne mniej znane funkcje obsługiwane przez wszystkie trzy, które lubisz?

Jest kilka zasobów, które trzymam w pobliżu, aby być na bieżąco z nowościami. Pomyślałem, że podzielę się nimi tutaj:

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/