Jak korzystać z konsoli debugowania aplikacji

Jeśli jesteś web developerem, pewnie znasz narzędzia deweloperskie przeglądarki:

To prawdopodobnie najważniejsze narzędzie do debugowania błędów na Twojej stronie.

Aplikacje stworzone z webtoapp.design zazwyczaj działają od razu, przynajmniej zachowują się prawie identycznie jak Twoja strona w Chrome na Androidzie i Safari na iOS. Więc jeśli Twoja strona działa tam poprawnie, nie powinieneś napotkać zbyt wielu problemów.

Jednak czasami możesz chcieć zbadać jakieś nieoczekiwane zachowanie w aplikacji. W takich przypadkach możesz otworzyć wbudowaną konsolę aplikacji.

Jak otworzyć konsolę

Otwieranie konsoli jest celowo ukryte, żeby zwykli użytkownicy aplikacji przypadkowo jej nie otworzyli i się nie pogubili. Ale nawet jeśli na nią trafią, wystarczy zamknąć i ponownie otworzyć aplikację, żeby się jej pozbyć.

Otwieranie konsoli z ekranu ustawień

1. Najpierw otwórz ustawienia swojej aplikacji.
2. Kliknij kartę "O aplikacji".
3. Dotknij dwukrotnie małego obrazka w oknie dialogowym, aby otworzyć konsolę deweloperską.
4. Teraz możesz zamknąć okno dialogowe i ustawienia i korzystać z konsoli podczas przeglądania aplikacji.

Otwieranie konsoli z okna zgłaszania błędów

Jeśli w Twojej aplikacji nie ma dostępu do ustawień, możesz też otworzyć konsolę przez okno informacji diagnostycznych:

1. Otwórz okno zgłaszania błędów, potrząsając urządzeniem.
2. Dotknij dwukrotnie tytułu okna dialogowego.
3. Teraz możesz zamknąć okno dialogowe i korzystać z konsoli podczas przeglądania aplikacji.

Funkcje konsoli aplikacji

Otwórz URL

Otwórz dowolną stronę, wpisując jej adres w oknie dialogowym. To przydatne, jeśli chcesz przejść do ukrytych (nie ma do nich linku na głównej stronie) stron testowych lub środowisk testowych, które możesz mieć.

Uruchom JS

Ta funkcja wykonuje dowolny kod JavaScript, który wpiszesz, i wyświetla wynik w konsoli.

Dodaj Eruda

To dodaje mały przycisk, który otwiera konsolę JavaScript Eruda dla aktualnie przeglądanej strony. Oferuje ona prawie wszystkie funkcje, które znasz z konsoli przeglądarki na komputerze, na przykład eksplorator elementów drzewa DOM. Więcej o Eruda możesz przeczytać w projekcie na GitHubie.

Kopiuj log

Ponieważ logowane wiadomości mogą być trudne do czytania i analizowania, możesz użyć tego przycisku, aby skopiować cały tekst logów i wkleić go gdziekolwiek chcesz. Na przykład możesz wysłać go na komputer, gdzie masz lepszy edytor tekstu.