💻
React Native
  • 👨‍💻Full-Stack Web Developer
  • 📚Теорія
    • 1️⃣Налаштування робочого середовища
      • Вступ
      • Налаштування середовища розробки
      • Перший проект
      • Налаштування емуляції Android (Android Studio + JDK)
      • Налаштування емуляції Iphone (Xcode)
      • Запуск проекту на віртуальних пристроях
      • Expo Snack
    • 2️⃣Верстка і стилізація
      • Функціональні та класові компоненти
      • Базові компоненти
      • Фундаментальні концепції React в React Native
      • Стилізація компонентів
      • Стилізація залежно від платформи
      • Кольори
      • Зображення
      • Векторна графіка
      • Розташування компонентів
      • Робота зі шрифтами
      • Колекції даних
      • Дебаг застосунку
    • 3️⃣Обробка подій
      • Обробка подій
      • Обробка текстових інпутів
      • Інпути в фокусі
      • Форма для збору даних
      • Робота з клавіатурою
      • Перехоплення подій
    • 4️⃣Навігація
      • Підключення навігації
      • Перемикання екранів
      • Передача параметрів між екранами
      • Хедер екрану
      • Вкладена навігація
      • Нижня навігація
    • 5️⃣Нативні компоненти
      • Камера
      • Мапи
      • Геолокація
    • 👷Практика
      • 1️⃣Завдання 1
      • 2️⃣Завдання 2
      • 3️⃣Завдання 3
      • 4️⃣Завдання 4
      • 5️⃣Завдання 5
      • 6️⃣Завдання 6
      • 7️⃣Завдання 7
    • Додаткові покликання
  • Про мене
    • Про мене
Powered by GitBook
On this page
  1. Теорія
  2. Верстка і стилізація

Дебаг застосунку

PreviousКолекції данихNextОбробка подій

Last updated 1 year ago

При розробці застосунків для мобільних пристроїв потрібно відстежувати стилізацію компонентів, а також перевіряти правильність даних. У веброзробці в браузері використовують для цього devtools.

В React Native також є інструменти для дебагу застосунків. Один з основних інструментів - console.log, який виводитиме дані в терміналі на запущеному проєкті (в нашому випадку в Visual Studio Code).

На деяких стадіях дебагінгу зручно використовувати Alert.

import { Alert } from "react-native";
// код
Alert.alert(`Hello! My name is Oleksandr Khomiak`);

На пристрої та симуляторі також можна відкрити меню розробника (це основний інструмент дебагінгу):

  • На пристрої: потрусити пристрій

  • На емуляторі Android в Windows або Linux: Ctrl +M

  • На емуляторі Android в MacOS: Cmd ⌘ + M

  • На емуляторі iOS в MacOS: Cmd ⌘ + D

В меню розробника можна переоновити застосунок (Reload), показати інспектор компонентів (Element Inspector), увімкнути інструменти для відладки (JS Debugger), увімкнути моніторинг продуктивності (Performance Monitor). Для того, щоб закрити інструмент відладки потібно знову зайти в меню дебагу і вимкнути інструмент.

Посилання на офіційну документацію:

📚
2️⃣
Дебаг застосунку