Najlepsze narzędzia i metody debugowania aplikacji React Native!

Debugowanie to jedna z kluczowych czynności podczas tworzenia oprogramowania. Odnosi się do procesu identyfikowania błędu w aplikacji, który powoduje problemy z wydajnością, a następnie analizowania problemu i wreszcie rozwiązywania go. Debugowanie umożliwia weryfikację kodu i rozwiązywanie problemów przed wypchnięciem aplikacji na etap produkcyjny. Jednak problemy z debugowaniem mogą pojawić się w różnych fazach — rozwoju, testowania, a nawet produkcji/po wdrożeniu. A wdrożenie odpowiednich narzędzi i metodologii debugowania przyspieszy rozwój i zwiększy wydajność produktu końcowego.

Nadchodzi debugowanie React Native; framework składa się z różnych środowisk, z których najważniejsze to Android i iOS. W rezultacie debugowanie aplikacji staje się trudne ze względu na wiele zaangażowanych platform. Co więcej, React Native oferuje ogromną różnorodność narzędzi do debugowania, co wydaje się mylące dla wielu, zwłaszcza początkujących. Ten post poprowadzi Cię przez kilka skutecznych praktyk i przydatnych narzędzi React Native i React debugger, które pomogą Ci zidentyfikować problemy i naprawić je jak ekspert.

React Native metodologie debugowania i najlepsze praktyki

Identyfikowanie i adresowanie błędów, ostrzeżeń i dzienników konsoli

Błędy i ostrzeżenia konsoli są widoczne w postaci powiadomień na ekranie z czerwoną lub żółtą plakietką.

Błędy

Błędy będą wyświetlane wewnątrz RedBox za pomocą polecenia console.error(). Ten RedBox zawiera opis błędu, a także sugestię, jak go rozwiązać. Spójrz na ten przykład. Jeśli piszesz właściwość stylu, której framework React Native nie obsługuje, lub jeśli piszesz właściwość, która ma być używana dla określonego elementu (np. BackroundImage musi być ustawiony dla elementu View), wtedy RedBox wyświetla błąd wraz z listą obsługiwanych właściwości stylu, które można zastosować do widoku.

Ostrzeżenia

Ostrzeżenia będą wyświetlane w YellowBox z poleceniem console.warn() Takie ostrzeżenia zawierają informacje o problemach związanych z wydajnością i przestarzałym kodzie. Większość z tych ostrzeżeń wskazuje na złe praktyki w kodzie. Przykłady ostrzeżeń obejmują powiadomienie o obecności eventListener, który nie jest usuwany, obecność przestarzałych funkcji i zależności itp.

Dzienniki

Do wydawania dzienników użyj polecenia react-native log-android lub użyj konsoli Chrome z poleceniem console.log(string str)

Deweloperzy React Native mogą w razie potrzeby ukryć powiadomienia dotyczące błędów i ostrzeżeń za pomocą polecenia LogBox.ignoreAllLogs(), na przykład podczas demonstracji produktów. Możesz również ukryć powiadomienia na podstawie per-log za pomocą polecenia LogBox.ignoreLogs(). Ta metoda działa w scenariuszach, w których nie można rozwiązać hałaśliwego ostrzeżenia, tak jak w przypadku zależności innej firmy. Ale za każdym razem, gdy ignorujesz dzienniki, pamiętaj o utworzeniu zadania, aby później naprawić te ignorowane dzienniki.

Debugowanie za pomocą wbudowanego trybu debugowania React Native

Sprawdź, jak korzystać z wbudowanego trybu debugowania oferowanego przez ekosystem React Native z przeglądarkami takimi jak Safari czy Chrome.

Debugowanie w Chrome

Zainstaluj te narzędzia React-dev, aby wspierać React Native: Yarn i NPM. Następnie użyj trybu programistycznego, aby otworzyć menu programisty w aplikacji; tutaj rozpoczynasz proces debugowania, aktywując opcję debugowania.

Z menu programisty wybierz opcję Debuguj JS zdalnie. Ta akcja otwiera kanał do debugera JS. Otworzy się nowa karta; tutaj z menu Chrome wybierz Narzędzia – Narzędzia programistyczne; do otwierania devtools.

Inne najbardziej widoczne opcje do wykorzystania w menu programisty w aplikacji do debugowania aplikacji to:

Enable Live Reload: do automatycznego ponownego ładowania aplikacji, Enable Hot Reloading: do identyfikacji modyfikacji, które powodują zmianę pliku, a Start Systrace uruchamia narzędzie do profilowania oparte na znacznikach Androida. Opcja Przełącz inspektora pomaga w przełączaniu interfejsu inspektora. W ten sposób programiści mogą sprawdzać elementy interfejsu użytkownika obecne na ekranie i badać ich właściwości. Następnie prezentowany jest interfejs; ten interfejs zawiera inne karty, takie jak sieć do wyświetlania wywołań HTTP, a także kartę związaną z wydajnością. Opcja Pokaż monitor wydajności śledzi wydajność Twojej aplikacji.

Debugowanie za pomocą Safari

Wersję Twojej aplikacji na iOS można debugować za pomocą Safari, a tutaj nie musisz włączać „Debuguj JS zdalnie”. Po prostu otwórz Preferencje, a następnie wybierz następujące opcje:

• Preferencje
• Zaawansowany
• Pokaż menu Develop na pasku menu

Następnie wybierz JSContext swojej aplikacji:

Programowanie – Symulator – JSContext

Teraz otworzy się inspektor sieciowy Safari i będziesz mógł wyświetlić debuger i konsolę. I za każdym razem, gdy ponownie ładujesz aplikację, ręcznie lub przy użyciu szybkiego odświeżania (przeładowanie na żywo), zostanie utworzony nowy JSContext. Pamiętaj, aby zaznaczyć opcję Automatycznie pokazuj inspektory sieci Web dla JSContexts; w przeciwnym razie najnowszy JSContext zostanie wybrany ręcznie.

Prominent React/React natywne narzędzia debugera

React DevTools

Ten zestaw narzędzi React służy do debugowania hierarchii komponentów Reacta i działa dobrze w operacjach front-end. Korzystając z tego zestawu narzędzi, możesz zobaczyć, co znajduje się głęboko w drzewie komponentów – wybierz stan opcji komponentu i edytuj bieżące właściwości.

React Developer Tools to rozszerzenie przeglądarek Firefox i Chrome. Jednak aby debugować aplikacje wbudowane w React Native, musisz użyć autonomicznej wersji React DevTools i uruchomić to polecenie na swoim terminalu – npm install –g refresh-devtools. Następnie uruchom aplikację, uruchamiając polecenie React-devtools; wybierz opcję Pokaż inspektora z menu programisty w aplikacji, aby sprawdzić elementy interfejsu aplikacji.

Jeśli używany jest Redux, musisz użyć React DevTools wraz z ReduxDev Tools, aby w pełni zrozumieć stan swojego komponentu. W tym celu należy osobno zainstalować Redux DevTools, a tutaj narzędzie React Native Debugger również okazuje się całkiem przydatne.

Natywny debuger React

React Native Debugger jest niezwykle przydatny, jeśli Redux jest używany podczas tworzenia aplikacji React Native. Jest to samodzielne narzędzie działające w systemach Linux, Windows i macOS. To narzędzie służy do rejestrowania lub usuwania zawartości magazynu asynchronicznego, wykrywania i diagnozowania problemów z wydajnością oraz badania żądań sieciowych.

Najlepsze jest to, że integruje React DevTools oraz Redux DevTools w ramach jednej aplikacji, dzięki czemu nie ma potrzeby używania dwóch oddzielnych aplikacji do debugowania aplikacji dla środowisk React i Redux. Narzędzie oferuje interfejsy, w których można badać i debugować elementy React, a także przeglądać logi Redux i powiązane akcje.

Debuger React Native przewyższa Chrome DevTools pod względem wykorzystywania inspektora przełączania do sprawdzania elementów React Native. Poza tym debugger React Native zapewnia funkcjonalność edycji stylów; ta funkcja nie jest dostępna w Chrome DevTools.

Płetwa

Flipper to wieloplatformowe narzędzie służące do debugowania aplikacji JavaScript, a także dzienników urządzenia i JS. Uruchamia symulatory do zarządzania urządzeniami, może łączyć się z kilkoma urządzeniami jednocześnie w celu debugowania aplikacji na wielu platformach i obejmuje jednoetapowy proces debugowania, w tym punkty obserwacyjne i punkty przerwania.

Flipper edytuje komponenty w locie, a następnie odzwierciedla te zmiany w czasie rzeczywistym w aplikacji i integruje się z Inspektorem układu aplikacji. Jego zdolność do zintegrowanego zarządzania uruchamianiem umożliwia programistom definiowanie konfiguracji i wykorzystywanie ich do testów jednostkowych bez konieczności replikowania konfiguracji w kilku miejscach. Co więcej, ma architekturę opartą na wtyczkach i niezliczone przydatne funkcje; więcej funkcji jest spodziewanych w nadchodzących latach.

Dzięki aplikacji Flipper możesz przeglądać, sprawdzać i sterować swoimi aplikacjami za pomocą prostego interfejsu na pulpicie. Flipper może być używany w niezmienionej postaci lub rozszerzony poprzez zastosowanie wtyczek API.

Odwiedź ten blog, aby uzyskać więcej informacji na temat innych ważnych narzędzi do debugowania aplikacji React Native!

Dolna linia

Wyżej wymienione narzędzia i metodologie umożliwiają efektywniejsze i bezbłędne debugowanie aplikacji, zupełnie jak profesjonalista. Te narzędzia i najlepsze praktyki zdziałają cuda, przyspieszając rozwój, zwiększając produktywność programistów i poprawiając wydajność produktu końcowego.

Czy chciałbyś współpracować z wykwalifikowanymi programistami aplikacji, którzy rozumieją działanie Twoich aplikacji React Native, od razu identyfikują problemy i natychmiast naprawiają błędy? Jeśli tak, warto wypróbować Biz4Solutions, wybitną firmę outsourcingową zajmującą się tworzeniem oprogramowania! Specjalizujemy się w oferowaniu kompetentnych usług programistycznych React Native i dbamy o cały cykl życia produktu, od pomysłu aplikacji do utrzymania po wdrożeniu.

Aby dowiedzieć się więcej o naszych innych podstawowych technologiach, skorzystaj z poniższych łączy:

Rozwój aplikacji Swift
Tworzenie aplikacji .Net
Tworzenie aplikacji Java