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 dla programistów w przeglądarce, 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 gorące 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 podziel się 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 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ądarce działa podobnie jak inne konsole, np. ta dostępna w Narzędziach deweloperskich w Chrome:Firebase Studio

• 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 poleceń 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 wydajności, ułatwień dostępu, zgodności z najlepszymi praktykami, SEO i wydajności progresywnych aplikacji internetowych. Aby wygenerować raporty, kliknij Przeanalizuj stronę.

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

4. Gdy raporty pojawią się w panelu Lighthouse, możesz przejrzeć 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 do debugowania kodu 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 okaże się, że nie może 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 zarządzania 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 dopracowuj: Gemini może nie zawsze podać idealne rozwiązanie za pierwszym razem. Przejrzyj odpowiedzi, zadaj pytania wyjaśniające i w razie potrzeby podaj 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.