Techniques de débogage dans Chrome Dev Tools

Question

Ce qui suit est un extrait de code Redux que je débogue, rien de vraiment spécial. Ma question concerne le débogage dans Chrome Dev Tools.

Le problème consiste à définir le point d'arrêt (bp) dans le rappel .then(({ data }) => dispatch({. Je peux définir un bp sur cette ligne mais à cause de la fonction de flèche, je ne peux pas définir un bp sur user: data.results[0], dans cette fonction.

Que puis-je faire pour mettre un pb pour que je puisse inspecter data ou data.results[0]
Puis-je déboguer en quelque sorte dans la chaîne de promesse?

export const login = (username, password) => (dispatch) => { 
    return dispatch({ 
    type: LOGIN, 
    payload: { 
     username, 
     password, 
    } 
    }) 
    .then(({ data }) => dispatch({ 
    type: LOGIN_SUCCESS, 
    payload: { 
     user: data.results[0], 
    }, 
    })) 
    .catch((error) => { 
    dispatch({ 
     type: LOGIN_FAIL, 
     payload: { 
     error: error.message, 
     }, 
    }); 
    }); 
}; 

Answer 1

Avez-vous essayé

debugger; 

?

Il est même du point de rupture, mais ne pas oublier d'enlever après le débogage =)

Answer 2

Remplacer la fonction .alors avec le texte ci-dessous:

.then(function({ data }) { 
    dispatch({ 
     type: LOGIN_SUCCESS, 
     payload: { 
      user: data.results[0], 
     }, 
     }) 
    }) 

Maintenant, vous devriez être en mesure de débogage.

Vous pouvez consulter JavaScript promise resolving with setTimeout pour une meilleure compréhension de => et la fonction() {}