Реагируйте на собственную отладку с помощью Async / Await

Question

Я недавно начал писать код React Native и испытываю огромные трудности с тем, чтобы отладчик Chrome или отладчик React Native правильно работали с моими функциями Async / Await и функциями стрелок Async / Await.

Я могу успешно прикрепить отладчики к моему коду и пройти большую часть моего кода, но кажется, что когда отладчик попадает внутрь моих асинхронных методов, он теряет отслеживание того, какая строка фактически выполняет , лишить возможности работать продуктивно.

Некоторые точки останова просто не попадают, хотя операторы console.log указывают, что код был выполнен. Когда это происходит, обычно текущая строка отладки переключается на строку объявления функции, а не на фактически выполняющуюся строку.

Я загрузил свое приложение с помощью crna и работаю в Windows 10. Не уверен, что это актуально.

Я вижу много разговоров о похожем поведении с 2016 года на разных форумах, но в последнее время новостей по этому поводу нет, поэтому я бы предположил, что это исправлено. Если нет, то какой обходной путь? Мне нужен способ отладки моего кода.

Answer 1

Я вижу эту проблему всякий раз, когда устанавливаю точку останова после использования оператора ожидания.

Например, у вас может быть функция:

static async makeRequest(request) {
    // Breakpoints here work fine
    request.method = 'GET'
    // Breakpoints not working anymore because of the await operator
    const response = await fetch(request);
    const obj = await response.json();
    obj.debug = true;
    return obj;
}

Установка точки останова после того, как один из операторов ожидания не работает. Однако установка точки останова до того, как оператор await, кажется, будет работать нормально.

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

static async makeRequest(request) {
    request.method = 'GET'
    const response = await fetch(request);
    const obj = await response.json();
    return doSomething(obj);
}

static doSomething(obj) {
    // Putting breakpoints here works fine
    obj.debug = true;
    return obj;
}