• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Maîtrisez les outils de débugage

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous voilà de véritables experts du développement React Native. Nous sommes capables de gérer une navigation complexe, de transmettre des données dans toute notre application, de jouer des animations et pourtant, on débugue toujours notre application avec des logs. ^^ Il est temps de pousser le débugage de notre application plus loin.

Bien sûr, les logs et les messages qui s'affichent à l'écran sont, à 90 % du temps, amplement suffisants. Mais parfois, on tombe sur une anomalie, un comportement difficile à identifier et, dans ce genre de cas, les logs et les warnings ne suffisent plus.

Il existe plusieurs outils, plus ou moins poussés, pour débuguer son application. Je vais vous présenter chacun d'entre eux. Mais avant cela, reparlons un peu des logs, vous voulez bien ?

Logs

Je ne sais pas si vous avez remarqué, mais depuis que l'on est passé sur une application React Native avec du code natif, plus aucun log ne s'affiche dans notre terminal.

On a encore pété des trucs ? 

Non, je vous rassure et d'ailleurs, c'est normal. À présent, ce sont les projets mobiles natifs qui sont compilés et exécutés, ce sont donc eux qui ont les logs. Vous avez deux solutions, soit vous êtes à l'aise avec les IDE XCode et Android Studio, soit non. :lol:

Avec les IDE

Dans le cas où vous connaissez bien les IDE du développement mobile natif, vous pouvez compiler et exécuter les projets mobiles natifs vous-mêmes, puis, lancer un serveur Node.JS avec la commande  npm start  .

Une fois le projet mobile natif compilé et exécuté depuis XCode ou Android Studio, vous verrez apparaître tous les logs dans l'IDE.

Sans les IDE

Dans le cas où vous ne connaîtriez pas les IDE du développement mobile natif, vous pouvez, dans un terminal, taper les commandes :

$ react-native log-ios
ou
$ react-native log-android

Ici, React Native va simplement copier-coller les logs des projets mobiles natifs et les afficher dans votre terminal.

Personnellement, je préfère amplement cette solution par rapport à la précédente. Non seulement, on ne s'embête pas à ouvrir nos IDE, ce qui est parfois long, mais surtout, on n'a pas à se soucier de compiler et exécuter avec l'IDE, puis de lancer un serveur Node.JS. Dans cette solution, React Native s'occupe de tout.

Menu Debugger

Le menu Debugger, aussi appelé App-Menu Developper, vous permet d'accéder à différentes fonctionnalités de débugage. Rappelez-vous, on y accède :

  • sur device pour iOS / Android : vous devez secouer votre appareil ;

  • sur simulateur iOS : il faut faire +D

  • sur émulateur Android : il faut faire Ctrl( sur Mac) +M

Menu Debugger React Native sur iOS et Android
Menu Debugger React Native sur iOS et Android

La première fois que je vous ai parlé de ce menu, je suis passé très vite pour ne pas vous embêter avec. Mais finalement, je ne vous ai pas expliqué ce qu'il contient. Il vaut mieux tard que jamais, comme on dit : ;)

  • Reload : permet de recharger toute votre application.

  • Debug JS Remotely : permet de débuguer le langage Javascript en dehors de l'application. On va y revenir dans la prochaine sous-partie.

  • Enable Live Reload : permet de recharger toute votre application automatiquement dès qu'un fichier Javascript est modifié. Cette fonctionnalité est activée par défaut sur une CRNA, mais elle ne l'est pas sur une application React Native avec du code natif.

  • Start Systrace (iOS) / Start / Stop Sampling Profiler (Android) : permet d'enregistrer et d'afficher à l'écran le résultat d'un suivi de performance sur votre application. (jamais servi  :-° )

  • Enable Hot Reloading : permet de recharger automatiquement, mais surtout uniquement les fichiers Javascript modifiés. Cette fonctionnalité évite que toute votre application soit rechargée et que vous perdiez le state global, par exemple.

  • Toggle Inspector : permet de sélectionner un élément graphique dans la vue et d'obtenir des informations à son sujet. On y reviendra un peu plus loin dans ce chapitre.

  • Show Perf Monitor : permet d'afficher des informations sur les performances de votre application, en fonction des actions effectuées.

  • Dev Settings (Android) : permet de nous rediriger vers l'écran de réglages de React Native Android. Cet écran permet d'améliorer les performances pour avoir les mêmes qu'en mode release (on perd en contrepartie des fonctionnalités de débugage).

Avec tout ce que je viens de dire, je suis sûr que vous avez très envie de tester le Hot Reloading. ^^Alors allez-y, affichez le menu de debug et cliquez sur "Enable Hot Reloading". Dans votre application, faites une recherche pour afficher des films. Ensuite, côté code, modifiez un component, une fonction, un style, etc., n'importe quoi pour tester. Personnellement, j'ai changé la couleur des titres des films dans le component FilmItem : 

// Components/FilmItem.js
title_text: {
...,
color: 'red'
}

Sauvegardez le fichier Javascript FilmItem.js et retournez sur votre application. Normalement, vous devriez voir ceci :

Hot Reloading sur React Native
Hot Reloading sur React Native

Super, non ? :waw: C'est instantané et on n'a pas à refaire une recherche pour réafficher les films et tester notre modification de style.

Attends, mais ton truc, c'est génial. On peut s'en servir dans nos applications pendant nos phases de développement ?

Oui, tout à fait. Personnellement, je ne l'utilise que très rarement, j'ai souvent eu de mauvaises expériences avec, par le passé : bug, rechargement impossible de l'application, crash, etc.

Toutefois, aujourd'hui, le Hot Reloading s'est beaucoup amélioré. Je commence, petit à petit, à me réconcilier avec. :lol: Et je dois admettre qu'au vu des améliorations faites, il offre une excellente expérience de développement. Je vous conseille d'essayer sur vos futurs projets React Native. Le Hot Reloading peut vous faire gagner beaucoup de temps.

Chrome Developer Tools

Pour cet outil, vous avez besoin, au préalable, d'avoir Chrome installé sur votre machine. Pas Firefox, pas Microsoft Edge, Opera, etc. il faut bien Chrome.

Une fois installé, nous allons pouvoir nous intéresser au Debug JS Remotely, vous savez, la fonctionnalité dans le menu Debugger. 

Comme pour le Hot Reloading, affichez le menu Debugger et cliquez sur "Debug JS Remotely". Normalement, une fenêtre Chrome s'ouvre sur l'URL : http://localhost:8081/debugger-ui/ avec un message : 

Chrome Developer Tools page d'accueil
Chrome Developer Tools page d'accueil

Il faut ensuite afficher le menu développeur de Chrome en faisant la commande indiquée dans le message ou clic droit dans la page web et "inspecter". Dans le menu développeur, à droite, il y a un menu déroulant. Choisissez  debuggerWorker.js, comme ceci : 

Sélection du debugger de Chrome Developer Tools
Sélection du Debugger de Chrome Developer Tools

À présent, vous devriez voir les logs de votre application s'afficher dans le menu développeur de Chrome. Ici, j'ai ajouté un log dans le  render  du component Search : 

// Components/Search.js
render() {
console.log("TEST Chrome Developer Tools")
return (...
Log dans Chrome Developer Tools
Log dans Chrome Developer Tools

OK, c'est bien, mais c'est déjà ce que j'ai avec  react-native log-ios / -android, non ? Pourquoi je m'embêterais à lancer une page web juste pour avoir des logs que j'ai directement dans mon terminal ?

Parce que Chrome Developer Tools est très puissant. Enfin, il l'est, mais pas seul. Pour découvrir toute la puissance de cet outil, il faut le coupler à un autre outil, j'ai nommé : React Developer Tools.

React Developer Tools

Cet outil est l'outil pour débuguer une application React Native. Il permet de décomposer et visualiser la hiérarchie de vos components. Vous allez voir, c'est génial. :) L'installation est très rapide, avec la commande :

$ npm install -g react-devtools

Puis, vous pouvez lancer l'outil avec :

$ react-devtools

Une fenêtre devrait s'afficher sur votre ordinateur, comme ceci :

React Developper Tools
React Developper Tools

Amusez-vous à déplier la hiérarchie de vos components, vous devriez voir apparaître des éléments que l'on connaît :

Dépilement de la hiérarchie de component
Dépliage de la hiérarchie de component

App, Provider, etc. C'est la racine de notre application. Toute notre application et sa hiérarchie de component sont là. Bon, par contre, ouvrir un à un les components, c'est... long. Il est possible de rechercher un élément avec le champ de recherche ou, encore mieux, d'utiliser l'Inspector du menu Debugger

Inspector

L'Inspector permet de cibler un élément graphique et d'obtenir des informations sur celui-ci. Faisons le test avec le 🖤de la vue FilmDetail. 

Ouvrez le menu Debugger une fois dans la vue FilmDetail. Sélectionnez "Toggle Inspector" et cliquez sur le 🖤de la vue FilmDetail. Regardez du côté de la fenêtre de React Developer Tools :

Inspector sur un élément graphique avec React Developer Tools
Inspector sur un élément graphique avec React Developer Tools

À droite, on a plein d'informations sur les styles appliqués sur notre 🖤et même un petit schéma représentant ses dimensions et son positionnement dans l'espace disponible.

On peut même avoir des infos sur les données des components. Si vous remontez dans la hiérarchie des components et que vous cliquez sur FilmDetail, vous aurez ceci :

Inspector sur le component FilmDetail pour connaître ses données
Inspector sur le component FilmDetail pour connaître ses données

Regardez à droite, on a toutes les informations sur son state et ses props. :waw: Si vous ajoutez / supprimez le film des favoris, vous allez voir, en temps réel, la prop favoritesFilm  changer. C'est génial, n'est-ce pas ?

Oui ! Mais on peut faire encore mieux. ;) C'est le moment de coupler React Developer Tools avec Chrome Developer Tools.

L'union fait la force

Activez le Debug JS Remotely du menu Debugger et gardez de côté la fenêtre web ouverte par Chrome Developer Tools. Ensuite, placez-vous sur la vue FilmDetail d'un film et ajoutez le film aux favoris. Utilisez l'Inspector, comme tout à l'heure, pour vous placer sur le component FilmDetail. Retournez sur la fenêtre web de Chrome Developer Tools, affichez le menu développeur de Chrome à droite et assurez-vous d'être sur  debuggerWork.js  . Dans la vue de droite, à côté de la flèche bleue, vous pouvez saisir des commandes dans un champ de texte : 

Champ de texte de Chrome Developer Tools
Champ de texte de Chrome Developer Tools

 Saisissez la commande $r, comme ceci : 

Commande $r dans Chrome Developer Tools
Commande $r dans Chrome Developer Tools

Faites entrée sur le clavier pour valider la commande et observez :

Commande $r dans Chrome Developer Tools
Commande $r dans Chrome Developer Tools

Euh oui, OK ! Tu t'attendais à une ola pour ça ? C'est ce que l'on a côté React Developer Tools, c'est quoi l'intérêt de l'afficher ici aussi ?

L'intérêt est que vous pouvez agir sur les données affichées ici. Dans le tableau  favoritesFilm   des props du component FilmDetail, par exemple, prenez le film que l'on vient d'ajouter aux favoris. Au niveau de la propriété  title  , double-cliquez et remplacez le titre par ce que vous voulez : 

Changement d'une propriété de notre application avec Chrome developer tools
Changement d'une propriété de notre application avec Chrome Developer tools

Dans l'application, rechargez le film. Pour ce faire, vous pouvez revenir sur la vue recherche et recliquez sur le film favori. Ainsi, on va afficher le film avec les nouvelles informations contenues dans votre state global et la variable  favoritesFilm  :

Changement d'une propriété de notre application avec Chrome developer tools (rendu côté application)
Changement d'une propriété de notre application avec Chrome Developer tools (rendu côté application)

Magique ! :magicien: Avec les deux outils React Developer Tools et Chrome Developer Tools, on peut vraiment tout faire, enfin plutôt tout débuguer.

Nuclide

Je vous ai parlé de Nuclide au tout début de ce cours, dans la première partie en vous vantant ses mérites, mais sans jamais vous les montrez. Nuclide est un plugin pour l'IDE Atom. Il est développé par les développeurs Facebook eux-mêmes et offre de nombreuses fonctionnalités pour le développement et le débugage des applications React Native. Autrement dit, c'est le plugin pour développer sur React Native.

Installation

Pour utiliser Nuclide, lancez l'IDE Atom. Dans l'onglet "Atom", puis "Preferences" / "Install" / "Install Packages", recherchez "Nuclide" et installez-le.

Vous aurez besoin de redémarrer votre IDE Atom pour voir toutes les fonctionnalités de Nuclide apparaître. Faites-le, vous devriez avoir un nouveau rendu sur Atom, comme celui-ci :

Nuclide sur Atom
Nuclide sur Atom

Cliquez sur le bouton "Add Project Folder" et ajoutez le projet "MoviesAndMe". Ouvrez le fichier App.js. Normalement, on a tous ceci : 

Projet sur Atom avec Nuclide
Projet sur Atom avec Nuclide

OK, tout est prêt et configuré pour utiliser Nuclide avec notre projet Movies And Me. C'est le moment de découvrir les fonctionnalités de Nuclide. ;) On va commencer par le plus simple.

Un terminal dans Atom

Allez dans l'onglet "View", puis "Toggle Command Palette", un champ de saisie vous permet de rechercher des fonctionnalités. On va commencer par rechercher un terminal :

Command Palette recherche du terminal de Nuclide
Command Palette recherche du terminal de Nuclide

Sélectionnez le terminal de Nuclide et observez un onglet s'ouvrir :

Onglet terminal Nuclide dans Atom
Onglet terminal Nuclide dans Atom

Ici, si vous me suivez toujours, vous allez pouvoir lancer toutes vos commandes React Native. C'est très pratique. Plutôt que de lancer un terminal à côté, on regroupe tout ici. Bien sûr, vous pouvez ouvrir plusieurs terminaux pour en avoir un pour lancer l'application, un pour les logs iOS, un pour les logs Android, etc.

Breakpoints

Les breakpoints, en français points d'arrêt, permettent de bloquer l'exécution de votre code et de connaître l'état de votre application, ses données, à un instant t. C'est une fonctionnalité ultra-utilisée dans le développement mobile natif et vous allez voir que, même pour du développement cross-platform, cette fonctionnalité est redoutable. :pirate:

Faites comme moi, dans le reducer  favoriteReducer  , placez un point d'arrêt au début de la fonction  toggleFavorite  : (c'est le point bleu à gauche ici, il suffit de cliquer à gauche de la ligne de code souhaitée pour ajouter un breakpoint)

Ajout d'un point d'arrêt sur le reducer toggleFavorite
Ajout d'un point d'arrêt sur le reducer toggleFavorite

Vous devriez voir apparaître un menu, à droite :

Menu debugger de Nuclide
Menu Debugger de Nuclide

Il s'agit du menu Debugger de Nuclide. C'est lui qui va vous permettre de gérer et suivre vos breakpoints ; c'est ici que réside toute la puissance de Nuclide, attention les yeux. :lol: Cliquez sur "Launch debugger...", une fenêtre apparaît : 

Launch debugger de Nuclide
Launch debugger de Nuclide

Ajustez un peu la configuration, dans la partie basse de cette fenêtre, en fonction du device cible (iOS / Android / Simulateur / Device). Pour ma part, je teste sur simulateur iOS. Ensuite, cliquez sur le bouton "Launch" et laissez Nuclide gérer.

Une fenêtre console va s'ouvrir sur Atom. C'est Nuclide qui est en train de compiler et exécuter notre application. Une fois la compilation et l'exécution terminées, notre application se lance sur notre device. C'est le moment de tester notre point d'arrêt.

Recherchez un film, affichez son détail et cliquez sur le 🖤pour l'ajouter aux favoris et... Hop ! Notre application se bloque. Notre point d'arrêt fonctionne : :D

Point d'arrêt atteint dans notre application avec Nuclide (ligne bleue)
Point d'arrêt atteint dans notre application avec Nuclide (ligne bleue)

Un champ texte "DEBUGGER >" s'affiche tout en bas de la console et vous permet de saisir des commandes. Allons regarder un peu ce que contiennent les paramètres de notre reducer :

Debugger de Nuclide sur un point d'arrêt
Debugger de Nuclide sur un point d'arrêt

Ici, j'ai tapé  state  , puis  action  et je m'apprêtais à entrer  action.value . Le debugger affiche le contenu de mes données au début de ma fonction  toggleFavorite . Génial, non ? :soleil: Rien ne m'empêche d'ailleurs d'ajouter un point d'arrêt plus loin, juste avant le return de mon reducer, et de vérifier que  nextState  contient bien mon film stocké dans  action.value .

Voilà, j'ai fait le tour des différentes fonctionnalités de débugage. C'est plutôt convaincant, non ? Vous voyez que l'on peut pousser le débugage très loin et analyser nos applications précisément.

Toutefois, je me répète un peu, mais vous aurez très rarement besoin de pousser le débugage aussi loin, en tout cas pas aussi loin que ce que l'on a fait ici. Souvent, on s'en sort très bien avec les messages d'erreur de React Native et les logs que l'on place dans notre code.

Les outils de débugage évoluent rapidement sur React Native et proposent toujours de nouvelles fonctionnalités. Si cela vous intéresse, vous pouvez suivre la documentation debugging de React Native, mise à jour régulièrement avec les nouveaux outils.

On se rapproche tout doucement de la fin. C'est l'heure du dernier chapitre de ce cours. Eh oui, je n'ai plus grand-chose à vous apprendre, maintenant que vous savez tout. :soleil:

On a vu comment fonctionne une application React Native, comment la développer, comment la tester, il ne nous reste plus qu'à voir comment la livrer, c'est-à-dire la préparer pour les stores Apple (App Store) et Google (Google Play). Vous n'imaginiez quand même pas que votre application allait tourner sur votre serveur Node.JS éternellement. :lol:

Exemple de certificat de réussite
Exemple de certificat de réussite