Реагируйте на встроенную отладку, как никогда раньше.

Реагируйте на встроенную отладку, как никогда раньше.

Я видел много разработчиков, которым сложно отладить код реакции, даже если я раньше отлаживал свой код с помощью журналирования, а это отнимает очень много времени. Чтобы преодолеть это, я понял, что код React можно отлаживать в WebStorm так же, как и в Android, поэтому больше не нужно вести журнал для целей отладки :)

Давайте сначала создадим собственный проект с реакцией с помощью response-native init myProject.

Откройте свой проект в WebStorm

Справа вверху есть опция «Добавить конфигурацию».

Выберите React Native из заданных шаблонов, добавьте свою платформу и нажмите «Применить».

Вы закончили настройку отладчика :)

Создайте кнопку, свяжите ее с функцией и создайте внутри нее массив, теперь пройдитесь по массиву в цикле for, чтобы мы могли отлаживать значение массива по каждому индексу.

export default class App extends Component<Props> {

  buttonPressed = () =>{
    var array = [];

    for (let i = 0;i<10;i++){
      array.push("Hello, World: "+i);
    }

  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.buttonPressed}>
          <Text> Press me </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Теперь наведите отладчик внутрь цикла for, щелкнув строку кода.

Пришло время запустить ваш код. Щелкните значок отладчика. На этом этапе вы должны увидеть, как работает ваше приложение.

Откройте меню React Native (iOS: command + D, Android: ctrl + M) и нажмите «Debug JS Remotely».

Ниже вы можете увидеть, что отладчик успешно подключен и остановился на своем указателе. Вы можете возобновить отладчик, нажав (Option + command + R)

Лучшая функция отладки WebStorm заключается в том, что мы можем открыть «Evaluate Expression» и запустить определенный код, поэтому нам не нужно перезапускать приложение, чтобы увидеть примененные изменения.

Хочешь нанять меня? Наймите меня на Fiverr https://www.fiverr.com/share/14mek