Discussion :

[st3ff]

Bonjour,
je travaille actuellement sur une bibliothèque javascript pour quelques projets persos. J'ai fini de rajouter les fonctionnalités,et à peu près fini de debugger (si on a fini un jour...).(Si vous voulez la voir ou essayer, elle est en Beerware license, j'ai crée un post sur DVP pour la présenter, et le code est hébergé sur GitHub) Maintenant, j'aimerais utiliser les outils de profilages de Chrome (ou Firefox) dans le but d'optimiser le code et surtout débusquer les fuites de mémoires.
Via Google, on trouve plein de sites décrivant les outils des navigateurs (devtool ou firebug), à quoi ils servent, etc… mais aucun exemple de leur utilisation en 'vrai'.

Connaîtriez vous un tutoriel (même vidéo, en français ou anglais) qui explique comment les utiliser, par exemple, à partir d'un code 'mal fait' (des reflows permanent, des listeners sur des events oubliés…), on montre quels outils/informations utiliser (dans la masse qu'on obtient!) pour détecter le problème, trouver où dans le code il se trouve, quand il apparait, etc…
Merci beaucoup.

[SylvainPV]

Salut,

J'ai assisté à cette conf où Samuel utilise en live les dev tools de Chrome pour chasser une memory leak. Si l'anglais ne te fait pas peur, tu y apprendras sûrement des choses:

Sinon j'ai bossé sur une lib très similaire à la tienne (http://syllab.fr/projets/web/databinder/), mais j'ai laissé tombé le développement quand j'ai découvert RiotJS et Vue.js. Ces libs sont juste géniales, je ne voyais plus l'intérêt de chercher à les concurrencer. Je prépare aussi un article sur le data-binding pour Developpez, ça m'intéresse d'avoir tes retours quand il sera publié.

[st3ff]

merci beaucoup! Bon, y'a X-Files ce soir, mais après je me fais la vidéo.
Je connaissais pas Vue et RiotJS, je vais me documenter dessus, et merci pour le lien vers ton projet, c'est toujours bien de voir comment les autres ont résolus les problèmes auxquels on est confronté.
Pour ton article, ce sera avec plaisir que je le lirais. Si je peux être utile.
Et si tu as 2 secondes pour essayer la mienne et me donner ton avis, ce serait super!

[SylvainPV]

Yep je suis en train, je te fais mes retours sur le topic d'origine.

[st3ff]

Parfait! La vidéo explique exactement ce que je voulais savoir! Je conseille à tous les devs javascript d'y jeter un coup d’œil (j'avais même pas remarqué le bouton pour déclencher le GC manuellement dans les barres d'outils). Je ferais mes tests ce weekend, merci encore.

[st3ff]

Bonjour,
pour continuer sur les outils de profilage et leur utilisation, je suis tombé sur cette vidéo de google. Ils y expliquent la différence entre les 2 types de profilages (structurel et samples), à quoi ils servent et quelles informations ils donnent, comment filtrer les informations obtenues (parce que c'est vrai que ça fait peur la première fois qu'on essaye ces outils) et l'utilisation des méthodes console.time et console.timeEnd avec le profilage structurel et rechercher plus précisément les parties du code qui prennent du temps. (en anglais, désolé)