Debugowanie aplikacji w Firebase Studio

Firebase Studio udostępnia kilka różnych sposobów debugowania aplikacji bezpośrednio z obszaru roboczego. W przypadku aplikacji internetowych i aplikacji Flutter konsola internetowa i Lighthouse są bezpośrednio zintegrowane z platformą Workspace. Aplikacje Flutter oferują podgląd na urządzeniach z Androidem i w przeglądarce, dzięki czemu możesz sprawdzać i testować aplikację podczas pisania kodu.

Bardziej zaawansowane debugowanie oparte na punktach przerwania jest dostępne w przypadku większości popularnych języków za pomocą wbudowanej konsoli debugowania. Można je rozszerzyć za pomocą rozszerzeń debugera z OpenVSX. Aby debugować kod internetowy interfejsu użytkownika (np. JavaScript) na podstawie punktów przerwania, możesz nadal używać wbudowanych narzędzi dla programistów w przeglądarce, takich jak Narzędzia deweloperskie w Chrome.

Podgląd aplikacji

Firebase Studio obejmuje podgląd aplikacji na Workspace w przypadku aplikacji internetowych (Chrome) i aplikacji Flutter (Android, Chrome). Podglądy Androida i Chrome obsługują funkcję szybkiego wczytywania i odświeżania oraz zapewniają pełne możliwości emulatora.

Więcej informacji o Firebase Studio znajdziesz w artykule Wyświetlanie podglądu aplikacji.

Korzystanie z integrowanej konsoli internetowej do wyświetlania podglądów w przeglądarce

Zintegrowana konsola internetowa umożliwia diagnozowanie problemów w aplikacji bezpośrednio z podglądu internetowego. Do konsoli internetowej możesz uzyskać dostęp w Firebase Studio panelu podglądu w internecie, rozwijając pasek u dołu.

Pamiętaj, że ta funkcja jest eksperymentalna i nie jest domyślnie włączona. Aby go włączyć, wykonaj te czynności, a potem podziel się opinią:

1. Dodawanie konsoli internetowej do obszaru roboczego Firebase Studio:

   1. Otwórz Ustawienia, klikając settings lub naciskając Ctrl + , (w systemie Windows, Linux lub ChromeOS) albo Cmd + , (w systemie macOS).
   2. Znajdź ustawienie Firebase Studio: Narzędzia dla programistów stron internetowych i go włącz. Jeśli edytujesz plik settings.json bezpośrednio, możesz dodać "IDX.webDevTools": true.
   3. Odśwież okno przeglądarki, aby ponownie załadować obszar roboczy Firebase Studio.

2. Otwórz podgląd na stronie internetowej: Firebase Studio otwórz paletę poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P w ChromeOS, Windows lub Linux) i wybierz Firebase Studio: Pokaż podgląd na stronie internetowej.

3. Domyślnie panel konsoli internetowej jest zwinięty w panelu podglądu w przeglądarce. Kliknij pasek lub przeciągnij go w górę, aby go rozwinąć.

Panel konsoli internetowej w podglądzie internetowym Firebase Studio działa podobnie jak inne konsole, np. ta dostępna w narzędziach deweloperskich w Chrome:

• Podczas korzystania z aplikacji będą się w niej pojawiać błędy JavaScriptu i wyrażenia console.log.
  • W przypadku błędów i ostrzeżeń możesz też uzyskać pomoc od Gemini, klikając po prawej stronie komunikatu o błędzie przycisk Zrozumieć ten błąd.
• Możesz oceniać dowolny kod JavaScript w kontekście podglądu strony internetowej, korzystając z paska prompta u dołu.

Uruchamianie Lighthouse do wyświetlania podglądów w przeglądarce

Lighthouse przeprowadza audyt aplikacji na podstawie wybranych kategorii audytu i zwraca raport z odkryciami i sugestiami. Raporty Lighthouse możesz uruchamiać bezpośrednio z podglądu internetowego w Firebase Studio.

1. Otwórz podgląd na stronie internetowej: Firebase Studio otwórz paletę poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P na ChromeOS, Windows lub Linux) i wybierz Firebase Studio: Pokaż podgląd na stronie internetowej.

2. Na pasku narzędzi podglądu w przeglądarce kliknij ikonę  Uruchom Lighthouse.

3.  Na panelu Lighthouse wybierz odpowiednie kategorie audytu. Możesz wybrać raporty dotyczące skuteczności, dostępności, zgodności ze sprawdzonymi metodami, SEO i skuteczności progresywnych aplikacji internetowych. Aby wygenerować raporty, kliknij Analiza strony.

   Wygenerowanie raportów może potrwać kilka minut.

4. Gdy raporty pojawią się w panelu Lighthouse, możesz sprawdzić wyniki dla każdej kategorii audytu lub przełączać się między kategoriami audytu, klikając wynik i nazwę kategorii.

Korzystanie z Konsoli debugowania

Firebase Studio zawiera wbudowaną konsolę debugowania z Code OSS. Używaj tej konsoli do debugowania aplikacji za pomocą wbudowanych debugerów dla większości popularnych języków programowania lub dodawaj rozszerzenia debugowania z OpenVSX.

Aby dostosować proces debugowania, możesz też dodać plik .vscode/launch.json do obszaru roboczego i określić niestandardowe konfiguracje uruchamiania. Dowiedz się więcej o używaniu plików konfiguracji uruchomienia do dostosowywania debugowania w konfiguracji debugowania Visual Studio Code.

Debugowanie za pomocą Gemini

Możesz używać Gemini w Firebase, aby debugować kod za pomocą czatu w obszarze roboczym Code lub w App Prototyping agent.

Chociaż Gemini może pisać kod za Ciebie, czasami może też generować błędy. Gdy wykryje błąd, spróbuje go naprawić. Jeśli okaże się, że nie możesz rozwiązać problemu na podstawie komunikatu o błędzie, wypróbuj te metody:

• Opisz problem: w interfejsie czatu opisz problem, z którym się spotykasz, w sposób jak najprostszy i zwięzły. Chociaż Gemini może mieć dostęp do kontekstu, np. komunikatów o błędach i dzienników, może nie rozumieć pełnego kontekstu. Opisanie zachowania wraz z komunikatem o błędzie może pomóc Geminiszybciej rozwiązać problem.

• Zadaj konkretne pytania: nie bój się zadawać Geminibezpośrednich pytań dotyczących kodu. Na przykład „Co może powodować wyjątek null pointer w tej funkcji?” lub „Jak uniknąć tej kolizji?”

• Podziel skomplikowane problemy na mniejsze części: jeśli masz do czynienia ze skomplikowanym problemem, podziel go na mniejsze, łatwiejsze do rozwiązania części. Poproś o pomoc Gemini, aby debugować każdą część osobno i rozwiązywać problemy krok po kroku.

• Używaj nawiasów kodu: udostępniając fragmenty kodu, używaj nawiasów kodu, aby mieć pewność, że kod ma prawidłowy format. Dzięki temu Gemini łatwiej odczyta i zrozumie Twój kod.

• Powtarzaj i doskonal: Gemini może nie zawsze znaleźć najlepszego rozwiązania za pierwszym razem. Sprawdź odpowiedzi, zadaj pytania uściślające i w razie potrzeby podaj dodatkowe informacje.

• Unikaj pętli promptów: jeśli Gemini utknie w pętli lub nie będzie w stanie odpowiedzieć na Twoje pytanie, spróbuj przeformułować prompt lub podać dodatkowy kontekst. Czasami wystarczy zmienić sformułowanie pytania, aby Geminizrozumiał, o co Ci chodzi.

  Jeśli zmiana sformułowania prompta nie rozwiąże problemu z błędnym pętlą, wypróbuj te techniki:

  • Rozpocznij nowy czat: jeśli korzystasz z Gemini w czacie Firebase w Workspace Code, rozpocznij nową sesję czatu, aby zresetować kontekst Gemini. Pomoże to wyeliminować wszelkie błędne założenia lub założenia Gemini, które mogły zostać przyjęte w poprzedniej rozmowie.

  • Podaj przykłady sprzeczne: jeśli Gemini wyciąga błędne wnioski, podaj przykłady sprzeczne, aby pomóc mu zrozumieć prawidłowe działanie.