Aujourd’hui nous sommes certains d’une chose, le web tel que nous le connaissons ne sera bientôt plus. Les applications vont prendre une place grandissante et deviendra un secteur très important. Il faut dés à présent comprendre cela et anticiper pour ne être dépasser.
En tant que développeur front-end, nous ne devons ( pouvons ? ) pas louper le train qui est déjà en marche, et pour cela il est très important d’avoir les bons outils.
Mais comment être sûr d’avoir les bons outils ? Heureusement Addy Osmani nous a donné des pistes à suivre et de très bonnes idées, voici ces outils regroupés en 4 grandes catégories.
Google Chrome : Devtools
A l’heure actuelle, le navigateur le plus avancé -que ce soit dans la prise en charge des api HTML5 ou en terme de vitrine technologique- est Chrome. Et cela s’explique très simplement : C’est le navigateur de Google. Les développeurs chez Google sont déjà très forts ( GMail, Google Maps, Google Drive … Besoin d’autres exemples ? ) et ils font régulièrement des démos impressionnantes afin de démontrer ce que peut faire Chrome.
Cependant saviez-vous que il existe un navigateur encore meilleur que Google Chrome ? Il s’agit de Google Chrome Canary.
Canary est une version de Chrome spécialement conçue pour les développeurs mise à jour quotidiennement et incluant des “features” inédites et expérimentales.
Performance : Timeline et Frames
Pour une application encore plus que pour un site “classique”, la performance est essentielle : si l’application est lente et peu réactive, l’expérience utilisateur sera désastreuse.
Dans Chrome c’est l’onglet Timeline, qui permettra de débugguer ce genre de soucis.
En effet, il est possible d’enregistrer ses actions et ensuite de vérifier ce qui peut provoquer un problème de performance en regardant les évènements javascripts déclenchés, ce qui est affiché ( injection dans le DOM ) ou encore recalculé ( images, width ou height de div ).
Cette vue permet également de vérifier l’utilisation de la mémoire, grâce à l’onglet “memory” et ainsi de repérer les fuites.
Fuite mémoire : Profiles
L’onglet “Profiles” permet de faire des snapshots ( instantanés ) et de vérifier comment est utilisée la mémoire. Chaque snapshot peut-être analysé pour connaître d’où proviennent les éventuelles fuites mémoires s’il y en a.
Il est également possible de faire plusieurs snapshots et de les comparer entre eux pour obtenir les meilleures performances possibles.
Live Editing + AutoSave
Google Chrome permet d’éditer directement les fichiers CSS et JS dans le devtools et de voir les changements s’opérer automatiquement. Cela s’avère très pratique notamment pour débugguer un script rapidement sans repasser par un IDE.
Maintenant imaginez faire des modifications dans le devtools, et que ces modifications s’enregistrent automatiquement sur votre fichier en local sans que n’ayez besoin d’enregistrer quoi que ce soit. Ou alors l’inverse, faire des modifications dans vos fichiers CSS et que sans recharger votre page, ces modifications soient pris en compte. Et bien cela est rendu possible grâce à Tincr.
Tincr est une extension Chrome qui une fois installée, apparaît dans le devtools. Une fois que vous avez configuré correctement votre projet, vous pourrez donc faire vos modifications en live ou en local et les voir s’appliquer.
Débugguer pour mobiles
Avec Canary il devient beaucoup plus facile de débugguer une webapp pour smartphones. En effet en bas à droite désormais en plus des settings, on peut émuler des fonctions natives d’un smartphone telles que la géolocalisation ou encore l’orientation de l’appareil.
