Debugowanie aplikacji w Firebase Studio

Firebase Studio oferuje kilka różnych sposobów debugowania aplikacji bezpośrednio z obszaru roboczego. W przypadku aplikacji internetowych i aplikacji Flutter konsola internetowa i Lighthouse są zintegrowane bezpośrednio z obszarem roboczym. Aplikacje Flutter oferują podgląd na Androidzie i w przeglądarce, dzięki czemu możesz szybko sprawdzić i przetestować aplikację podczas kodowania.

Bardziej zaawansowane debugowanie oparte na punktach przerwania jest też dostępne w przypadku najpopularniejszych języków programowania, dzięki wbudowanej konsoli debugowania, którą można rozszerzyć za pomocą rozszerzeń debuggera z OpenVSX. Do debugowania kodu internetowego frontendu (np. JavaScript) opartego na punktach przerwania możesz nadal używać wbudowanych narzędzi deweloperskich przeglądarki, takich jak Narzędzia deweloperskie w Chrome.

Podgląd aplikacji

Firebase Studio zawiera podgląd aplikacji w obszarze roboczym w przypadku aplikacji internetowych (Chrome) i aplikacji Flutter (Android, Chrome). Podgląd na Androidzie i w Chrome obsługuje szybkie przeładowanie i szybkie odświeżanie oraz oferuje pełne możliwości emulatora.

Więcej informacji o podglądzie w Firebase Studio znajdziesz w artykule Podgląd aplikacji.

Korzystanie ze zintegrowanej konsoli internetowej na potrzeby podglądu w przeglądarce

Zintegrowana konsola internetowa pomaga diagnozować problemy w aplikacji bezpośrednio z podglądu w przeglądarce. Aby otworzyć konsolę internetową w Firebase Studio panelu podglądu w przeglądarce, rozwiń pasek u dołu.

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

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

   1. Otwórz Ustawienia , klikając settings lub naciskając Ctrl + , (w systemie Windows/Linux/ChromeOS) albo Cmd + , (w systemie macOS).
   2. Znajdź ustawienie Firebase Studio: narzędzia dla programistów stron internetowych 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ć Firebase Studio obszar roboczy.

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, Windowsie lub Linuxie) 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. Aby go rozwinąć, kliknij pasek lub przeciągnij go w górę.

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

• Podczas korzystania z aplikacji będą się tam wyświetlać błędy JavaScript 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.
• Za pomocą paska prompta u dołu możesz oceniać dowolny kod JavaScript w kontekście podglądu w przeglądarce.

Uruchamianie Lighthouse na potrzeby podglądu w przeglądarce

Lighthouse sprawdza aplikację na podstawie wybranych kategorii audytu i zwraca raport z wynikami i sugestiami. Raporty Lighthouse możesz uruchamiać bezpośrednio z podglądu w przeglądarce 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, Windowsie lub Linuxie) 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 audytu, które Cię interesują. Możesz wybrać raporty dotyczące skuteczności, dostępności, zgodności z najlepszymi praktykami, SEO i skuteczności progresywnych aplikacji internetowych. Aby wygenerować raporty, kliknij Analizuj stronę.

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

4. Gdy raporty pojawią się w panelu Lighthouse, możesz sprawdzić wyniki w każdej kategorii audytu 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 debuggerów dla najpopularniejszych języków programowania, lub dodaj rozszerzenie 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 Konfiguracja debugowania w Visual Studio Code.

Debugowanie 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ż generować błędy. Gdy wykryje błąd, spróbuje go naprawić. Jeśli stwierdzisz, że nie jest w stanie rozwiązać problemu na podstawie komunikatu o błędzie, możesz wypróbować te metody:

• Opisz problem: w interfejsie czatu opisz problem tak jasno i zwięźle, jak to możliwe. Gemini może mieć dostęp do kontekstu, takiego jak komunikaty o błędach i logi, 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?”

• Dziel złożone problemy: 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 rozwiązywaniu problemów krok po kroku.

• Używaj ogrodzeń kodu: podczas udostępniania fragmentów kodu używaj ogrodzeń kodu, aby zapewnić prawidłowe formatowanie kodu. Ułatwia to Gemini odczytywanie i zrozumienie kodu.

• Iteruj i udoskonalaj: Gemini nie zawsze może podać idealne rozwiązanie za pierwszym razem. Sprawdzaj odpowiedzi, zadawaj pytania wyjaśniające i w razie potrzeby podawaj dodatkowe informacje.

• Unikaj pętli podpowiedzi: jeśli Gemini utknie w pętli lub nie będzie w stanie odpowiedzieć na Twoje pytanie, spróbuj przeformułować podpowiedź lub podać dodatkowy kontekst. Czasami wystarczy przeformułować pytanie, aby Gemini zrozumiało, o co pytasz.

  Jeśli przeformułowanie podpowiedzi nie rozwiąże problemu z pętlą, wypróbuj te metody:

  • 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 uniknięciu błędnych przekonań lub założeń, które Gemini mogło 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 zachowanie.