Debuguj aplikację w projekcie IDX

Project IDX oferuje kilka różnych sposobów debugowania aplikacji bezpośrednio z poziomu obszaru roboczego. Aplikacje internetowe i Flutter oferują dostęp do narzędzi Lighthouse i Narzędzi deweloperskich w Chrome w ramach podglądu w przeglądarce Chrome w obszarze roboczym. Aplikacje Flutter umożliwiają podgląd aplikacji na iOS, Androida i przeglądarki w przeglądarce oraz umożliwiają testowanie i sprawdzanie aplikacji podczas programowania. Wbudowana konsola debugowania obsługuje automatyczne debugowanie w przypadku najpopularniejszych języków oraz debugowanie niestandardowe, które możesz zdefiniować w pliku launch.json w swoim obszarze roboczym.

Podgląd aplikacji

IDX obejmuje podgląd aplikacji w obszarze roboczym w przypadku aplikacji internetowych (Chrome i mobilna przeglądarka Safari) oraz aplikacji Flutter (na iOS, Androida i Chrome). Podglądy Androida i Chrome obsługują odświeżanie z pamięci i odświeżanie z pamięci oraz wszystkie funkcje emulatora. Symulatory Safari i iOS oferują wizualny i interaktywny podgląd na różnych urządzeniach z iOS oraz symulują działanie systemu iOS w przypadku aplikacji mobilnych i internetowych.

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

Używanie Narzędzi deweloperskich w Chrome do podglądu w przeglądarce (funkcja eksperymentalna)

Narzędzia deweloperskie w Chrome pomagają diagnozować problemy z aplikacją bezpośrednio z poziomu podglądu w przeglądarce. Dostęp do Narzędzi deweloperskich w Chrome możesz uzyskać w panelu podglądu w przeglądarce IDX w taki sam sposób jak Narzędzia deweloperskie w przeglądarce Chrome.

Ta funkcja jest eksperymentalna, ponieważ pracujemy nad zapewnieniem idealnej wygody użytkownika. Prześlij nam opinię, aby pomóc nam ją ulepszyć.

1. Dodaj Narzędzia deweloperskie w Chrome do obszaru roboczego IDX:

   1. Otwórz okno Ustawienia, klikając ikonę koła zębatego lub naciskając Ctrl + , (w systemach Windows, Linux i ChromeOS) lub Cmd + , (w MacOS).
   2. Znajdź ustawienie IDX: Web Dev Tools i wybierz Włącz Narzędzia deweloperskie w Chrome dla podglądu w przeglądarce (wymagane jest ponowne załadowanie przeglądarki). Jeśli używasz pliku settings.json, możesz też ustawić "IDX.webDevTools": true.
   3. Odśwież okno przeglądarki i załaduj ponownie obszar roboczy IDX.

2. Otwórz podgląd w projekcie IDX: otwórz paletę poleceń (Cmd + Shift + P na Macu lub Ctrl + Shift + P w ChromeOS, Windows i Linux) i wybierz Projekt IDX: Pokaż podgląd w przeglądarce.

3. Panel Narzędzi deweloperskich w panelu podglądu w przeglądarce jest zminimalizowany. Kliknij pasek narzędzi deweloperskich, aby rozwinąć panel, i skorzystaj z narzędzi deweloperskich w panelu podglądu w przeglądarce.

Korzystając z panelu Narzędzi deweloperskich w podglądzie internetowym IDX w taki sam sposób, jak debugujesz aplikację w przeglądarce Chrome.

Uruchom Lighthouse na potrzeby podglądu stron w internecie

Lighthouse sprawdza aplikację na podstawie wybranych przez Ciebie konkretnych kategorii kontroli i zwraca raport z wynikami i sugestiami. Raporty Lighthouse można uruchamiać bezpośrednio w wersji testowej w Projekcie IDX.

1. Otwórz podgląd w projekcie IDX: otwórz paletę poleceń (Cmd + Shift + P na Macu lub Ctrl + Shift + P w ChromeOS, Windows i Linux) i wybierz Projekt IDX: Pokaż podgląd w przeglądarce.

2. Kliknij ikonę sprawdzania skuteczności na pasku narzędzi podglądu w przeglądarce.

3. W panelu Lighthouse wybierz kategorie audytu, które Cię interesują. Możesz wybierać spośród raportów kontroli wydajności, ułatwień dostępu, zgodności ze sprawdzonymi metodami, SEO i skuteczności progresywnych aplikacji internetowych. Kliknij Analizuj stronę, aby wygenerować raporty.

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

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

Korzystanie z konsoli debugowania

Projekt IDX zawiera wbudowaną konsolę debugowania z systemu Code OSS. Użyj tej konsoli, aby debugować swoją aplikację za pomocą gotowych debugerów do najpopularniejszych języków programowania, lub dodać rozszerzenie do debugowania z VSCode Marketplace.

Jeśli chcesz wpisać debugowanie niestandardowe, dodaj do obszaru roboczego plik launch.json.