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 Androida i w internecie, dzięki czemu możesz sprawdzać i testować aplikację podczas pisania kodu.

Wbudowana konsola debugowania umożliwia też bardziej zaawansowane debugowanie oparte na punktach przerwania w przypadku najpopularniejszych języków. Można ją rozszerzać za pomocą rozszerzeń debugera z OpenVSX. Do debugowania kodu internetowego frontendu (np. JavaScript) na podstawie punktów przerwania możesz nadal używać wbudowanych narzędzi deweloperskich przeglądarki, takich jak Narzędzia deweloperskie w Chrome.

Podgląd aplikacji

Firebase Studio obejmuje podglądy aplikacji w przestrzeni roboczej w przypadku aplikacji internetowych (Chrome) i aplikacji Flutter (Android, Chrome). Podglądy na Androidzie i Chrome obsługują szybkie ponowne wczytywanie i odświeżanie oraz oferują pełne możliwości emulatora.

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

Korzystanie ze zintegrowanej konsoli internetowej do wyświetlania podglądu stron internetowych

Zintegrowana konsola internetowa pomaga diagnozować problemy w aplikacji bezpośrednio w podglądzie w przeglądarce. Konsolę internetową możesz otworzyć w Firebase Studiopanelu podglądu internetowego, rozwijając pasek u dołu.

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

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

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

2. Otwórz podgląd w przeglądarce: 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.Firebase Studio

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 Firebase Studiopodglądzie internetowym działa podobnie do innych konsol, np. tej dostępnej w Narzędziach deweloperskich w Chrome:

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

Uruchamianie Lighthouse w przypadku podglądów w przeglądarce

Lighthouse sprawdza aplikację na podstawie wybranych kategorii kontroli i zwraca raport z wynikami i sugestiami. Raporty Lighthouse możesz uruchamiać bezpośrednio z podglądu strony w Firebase Studio.

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

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 wybierać spośród raportów dotyczących wydajności, dostępności, zgodności ze sprawdzonymi metodami, SEO i wydajnoś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 przejrzeć wyniki w poszczególnych kategoriach audytu lub przełączać się między nimi, 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. Dowiedz się więcej o używaniu plików konfiguracji uruchamiania do dostosowywania debugowania w konfiguracji debugowania w 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.

Gemini może pisać kod za Ciebie, 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 napotykasz, 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łędyGemini.

• Zadawaj konkretne pytania: nie bój się zadawać Geminibezpośrednich pytań dotyczących kodu. Na przykład: „Co może powodować wyjątek wskaźnika zerowego w tej funkcji?” lub „Jak mogę zapobiec temu wyścigowi?”.

• Dziel 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 osobnym debugowaniu każdej części i krok po kroku przeanalizuj problemy.

• Używaj bloków kodu: udostępniając fragmenty kodu, używaj bloków kodu, aby mieć pewność, że kod jest prawidłowo sformatowany. Ułatwi to Gemini odczytywanie i zrozumienie Twojego kodu.

• Iteruj i ulepszaj: Gemini nie zawsze za pierwszym razem poda idealne rozwiązanie. 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 Gemini zrozumiał, o co pytasz.

  Jeśli przeformułowanie promptu nie rozwiąże problemu, wypróbuj te techniki:

  • Rozpocznij nowy czat: jeśli korzystasz z Gemini w Firebaseczacie w Codeprzestrzeni roboczej, rozpocznij nową sesję czatu, aby zresetować kontekst Gemini. Może to pomóc w wyeliminowaniu wszelkich błędnych przekonań lub założeń, które Gemini mogła mieć w poprzedniej rozmowie.

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