Debugowanie układu przy użyciu Inspektora układu

[narzędzie] Layout Inspector w Android Studio umożliwia sprawdzanie i debugowanie układu w uruchomionej aplikacji w emulatorze lub na urządzeniu fizycznym. Możesz sprawdzać atrybuty poszczególnych komponentów, porównywać układ aplikacji z makietami projektu i wyświetlać powiększony widok aplikacji.

Możesz też użyć narzędzia Layout Inspector, aby sprawdzić, jak często komponent jest ponownie komponowany lub pomijany. Pomoże Ci to zidentyfikować problemy z aplikacją. Na przykład niektóre błędy w kodzie mogą wymuszać nadmierne ponowne komponowanie interfejsu, co może powodować niską wydajność. Niektóre błędy w kodzie mogą uniemożliwiać ponowne komponowanie interfejsu, a tym samym uniemożliwiać wyświetlanie zmian w interfejsie na ekranie.

Więcej informacji znajdziesz w artykule Debugowanie interfejsu Compose.

Rysunek 1. Wbudowany Layout Inspector w aplikacji Jetchat.

Rozpocznij

Aby uruchomić inspektora układu, uruchom aplikację, otwórz okno Uruchomione urządzenia i kliknij Przełącz inspektora układu Przycisk przełączania
wbudowanego narzędzia do inspekcji układu. Jeśli przełączasz się między wieloma urządzeniami lub projektami, inspektor układu automatycznie łączy się z procesami, które można debugować i które działają na pierwszym planie podłączonego urządzenia.

Oto jak wykonać niektóre typowe zadania:

  • Aby wyświetlić hierarchię widoków i sprawdzić atrybuty poszczególnych komponentów, użyj okien narzędzi Drzewo komponentówAtrybuty. Inspektor układu może wymagać ponownego uruchomienia aktywności, aby uzyskać dostęp do atrybutów.
  • Aby wybrać komponenty, najpierw włącz Przełącz głębokie sprawdzanie Przycisk przełączania szczegółowego sprawdzania, a potem kliknij komponenty. Możesz też przejść do kodu, klikając dwukrotnie komponenty.
  • Aby korzystać z aplikacji, wyłącz Przełącz głębokie sprawdzanie Przycisk przełączania szczegółowego sprawdzania.
  • Aby sprawdzić urządzenia fizyczne, włącz kopiowanie ekranu urządzenia.
  • Aby włączyć aktualizacje na żywo podczas aktualizowania interfejsu aplikacji, sprawdź, czy opcja Edycja na żywo jest włączona.

Wybieranie lub izolowanie komponentu

Komponent zwykle rysuje coś, co użytkownik może zobaczyć i z czym może wejść w interakcję. Drzewo komponentów pokazuje hierarchię aplikacji w czasie rzeczywistym z każdym komponentem kompozycyjnym. Pomaga to w debugowaniu układu aplikacji, ponieważ możesz wizualizować elementy w aplikacji i powiązane z nimi wartości.

Aby wybrać komponent, kliknij go w drzewie komponentów lub w wyświetlaniu układu. Wszystkie atrybuty układu wybranego komponentu pojawią się w panelu Atrybuty.

Jeśli układ zawiera nakładające się komponenty, możesz wyświetlić wszystkie komponenty w regionie, klikając prawym przyciskiem myszy w trybie Szczegółowe sprawdzanie Przełącz przycisk szczegółowej kontroli. Aby wybrać komponent, który nie znajduje się na pierwszym planie, kliknij go w drzewie komponentów.

Aby pracować ze złożonymi układami, możesz wyodrębnić poszczególne komponenty, tak aby w drzewie komponentówwyświetlaczu układu była widoczna tylko część układu. Aby wyodrębnić komponent, kliknij go prawym przyciskiem myszy w drzewie komponentów i wybierz Pokaż tylko poddrzewo lub Pokaż tylko elementy nadrzędne. Aby wrócić do pełnego widoku, kliknij komponent prawym przyciskiem myszy i wybierz Pokaż wszystko.

Ukrywanie obramowań układu i wyświetlanie etykiet

Aby ukryć ramkę ograniczającą lub etykiety komponentów elementu układu, kliknij Opcje widoku przycisk Wyświetl opcje u góry Wyświetlania układu i wyłącz Pokaż obramowania lub Pokaż etykietę widoku.

Przechwytywanie zrzutów hierarchii układu

[narzędzie] Layout Inspector umożliwia zapisywanie migawek hierarchii układu uruchomionej aplikacji, dzięki czemu możesz udostępniać je innym osobom lub korzystać z nich w późniejszym czasie.

Zrzuty zawierają dane, które zwykle widzisz podczas korzystania z Inspektora układu, w tym szczegółowe renderowanie układu, drzewo komponentów układu Compose, widoku lub układu hybrydowego oraz szczegółowe atrybuty każdego komponentu interfejsu. Aby zapisać zrzut, kliknij Eksportowanie/importowanie zrzutu Zrzut
Eksport/import, a potem Eksportuj zrzut.

Wczytaj wcześniej zapisaną migawkę narzędzia Layout Inspector, klikając Import Snapshot.

Porównywanie układu aplikacji z obrazem referencyjnym

Aby porównać układ aplikacji z obrazem referencyjnym, np. makietą interfejsu, możesz w inspektorze układu wczytać nakładkę obrazu bitmapowego.

  • Aby wczytać nakładkę, na pasku narzędzi Inspektora układu wybierz opcję Wczytaj nakładkę. Nakładka jest skalowana tak, aby pasowała do układu.
  • Aby dostosować przezroczystość nakładki, użyj suwaka Przezroczystość nakładki.
  • Aby usunąć nakładkę, kliknij Wyczyść nakładkę.

Samodzielne narzędzie Layout Inspector

Aby uzyskać optymalną wydajność, zalecamy korzystanie z Inspektora układu w domyślnym trybie osadzonym. Jeśli chcesz odłączyć inspektora układu, kliknij Plik (Android Studio na macOS)> Ustawienia > Narzędzia > Inspektor układu i odznacz pole wyboru Włącz osadzonego inspektora układu.

W trybie samodzielnym włącz aktualizacje na żywo, klikając opcję Aktualizacje na żywo na pasku narzędzi Inspektora układu.

Dodatkowe materiały

Wyświetla treści