@RIBAdminio
немного Системный, немного программист.

Как отлаживать react приложения, чтобы можно было отслеживать значения переменных?

В браузере google chrome есть хороший инструмент для отладки скриптов, он позволяет следить за выполнением скрипта поэтапно. Вместе с этим у программиста есть возможность отслеживать изменения локальных переменных.
Обычно для этого достаточно в режиме отладки нажать ctrl+shift+p и выбрать нужный скрипт.
Пояснительные картинки

Выбор скрипта:
65323883e7cc6981915796.png

Пошаговое выполнение скрипта с выводом значений локальных переменных.
653238dab5b90491944915.png


Зачастую в react приложениях есть компоненты содержащие функции, которые бы хотелось отладить таким же образом.
Увы инструментов для этого я найти не смог.
Удалось найти только React Developer Tools - приложение для браузера.
Но он показывает только значения состояний, а не локальные переменные.
Пояснительные картинки по react-dev-tool

65323d8c591a5294476339.png


Подскажите, как можно пошагово проверять значения переменных в функции handleClick ?
Пример кода с функцией handleClick

export default function SomeComponent(){
  function handleClick(){
    ... doSomeStuffWithLocalVariables
  }
  return(<button onClick={handleClick}></button>)
}



P.S.
Не хотелось бы тратить время на console.log или на то, чтобы вытаскивать handleClick в отдельный скрипт.
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Реактовские компоненты и хуки - это обычные функции, их можно дебажить той же самой хренью, которая на первой картинке.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы