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 obszarem roboczym. Aplikacje Flutter oferują podgląd na Androidzie i w internecie, dzięki czemu możesz sprawdzać i testować aplikację podczas pisania kodu.

Bardziej zaawansowane debugowanie oparte na punktach przerwania jest też dostępne w przypadku najpopularniejszych języków za pomocą wbudowanej konsoli debugowania i można je rozszerzyć za pomocą rozszerzeń debugera z OpenVSX. Do debugowania kodu internetowego frontendu (np. JavaScriptu) opartego na punktach 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ądy aplikacji w obszarze roboczym w przypadku aplikacji internetowych (Chrome) i aplikacji Flutter (Android, Chrome). Podglądy na Androidzie i w Chrome obsługują gorące przeładowanie i gorące odświeżanie oraz oferują pełne możliwości emulatora.

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

Używanie zintegrowanej konsoli internetowej do podglądu stron internetowych

Zintegrowana konsola internetowa pomaga diagnozować problemy z aplikacją bezpośrednio z poziomu podglądu w internecie. Konsolę internetową możesz otworzyć w panelu podglądu internetowego Firebase Studio, rozwijając pasek u dołu.

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

1. Dodaj konsolę internetową do obszaru roboczego Firebase Studio:

   1. Otwórz Ustawienia, klikając lub naciskając Ctrl + , (w systemie Windows/Linux/ChromeOS) lub Cmd + , (w systemie macOS).
   2. Znajdź ustawienie Firebase Studio: Web Dev Tools i włącz je. 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 w przeglądarce w 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 w przeglądarce.

3. Panel konsoli internetowej jest domyślnie zminimalizowany 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 do innych konsol, takich jak ta dostępna w Narzędziach deweloperskich w Chrome:

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

Uruchamianie Lighthouse na potrzeby podglądu w internecie

Lighthouse przeprowadza kontrolę aplikacji na podstawie wybranych przez Ciebie kategorii i generuje raport z wynikami i sugestiami. Raporty Lighthouse możesz generować bezpośrednio z podglądu internetowego w Firebase Studio.

1. Otwórz podgląd w przeglądarce w 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 w przeglądarce.

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

3. W panelu Lighthouse wybierz kategorie kontroli. Możesz wybrać raporty dotyczące wydajności, ułatwień dostępu, zgodności ze sprawdzonymi metodami, SEO i wydajności progresywnej aplikacji internetowej. Aby wygenerować raporty, kliknij Analizuj stronę.

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

4. Gdy raporty pojawią się w panelu Lighthouse, możesz przejrzeć wyniki poszczególnych kategorii kontroli lub przełączać się między kategoriami, klikając wynik i nazwę kategorii.

Korzystanie z konsoli debugowania

Firebase Studio zawiera wbudowaną konsolę debugowania z Code OSS. Użyj tej konsoli, aby debugować aplikację za pomocą gotowych debugerów dla najpopularniejszych języków programowania, lub dodaj rozszerzenie do debugowania z OpenVSX.

Aby dostosować debugowanie, możesz też dodać do obszaru roboczego plik .vscode/launch.json i określić niestandardowe konfiguracje uruchamiania. Więcej informacji o używaniu plików konfiguracji uruchamiania do dostosowywania debugowania znajdziesz w artykule o konfiguracji debugowania w Visual Studio Code.

Debuguj za pomocą Gemini

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

Gemini może pisać kod, ale czasami może też popełniać błędy. Gdy wykryje błąd, spróbuje go naprawić. Jeśli okaże się, że nie jest w stanie rozwiązać problemu na podstawie komunikatu o błędzie, możesz wypróbować te techniki:

• Opisz problem: w interfejsie czatu opisz problem, który wystąpił, tak jasno i zwięźle, jak to możliwe. Gemini może mieć dostęp do kontekstu, takiego jak komunikaty o błędach i dzienniki, ale może nie rozumieć pełnego kontekstu. Opisanie zachowania wraz z komunikatem o błędzie może pomóc Gemini szybciej naprawić błędy.

• Zadawaj konkretne pytania: nie bój się zadawać Gemini bezpośrednich pytań dotyczących kodu. Na przykład: „Co może powodować wyjątek wskaźnika o wartości null w tej funkcji?” lub „Jak mogę zapobiec tej sytuacji wyścigu?”.

• Podziel złożone problemy na mniejsze części: jeśli masz do czynienia ze złożonym problemem, podziel go na mniejsze, łatwiejsze do rozwiązania części. Poproś Gemini o pomoc w debugowaniu każdej części osobno i przeanalizowaniu problemów krok po kroku.

• Używaj bloków kodu: podczas udostępniania fragmentów kodu używaj bloków kodu, aby zapewnić jego prawidłowe sformatowanie. Dzięki temu Gemini łatwiej odczyta i zrozumie Twój kod.

• Ulepszaj i poprawiaj: Gemini może nie zawsze od razu podać idealne rozwiązanie. Przejrzyj 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 przeformułować pytanie, aby Gemini zrozumiała, o co pytasz.

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

  • Rozpocznij nowy czat: jeśli używasz czatu Gemini w obszarze roboczym Code, rozpocznij nową sesję czatu, aby zresetować kontekst Gemini. Może to pomóc w pozbyciu się błędnych przekonań lub założeń, które Gemini mógł przyjąć w poprzedniej rozmowie.

  • Podaj kontrprzykłady: jeśli Gemini przyjmuje nieprawidłowe założenia, podaj kontrprzykłady, aby pomóc mu zrozumieć prawidłowe działanie.