Post Category → Debug

Activer le compteur FPS dans votre navigateur Chrome

A quoi ça sert ?

Cet outil, intégré au navigateur Google Chrome, permet de connaître le nombre d’images par secondes (FPS ou Frame Per Seconds) affichées par un site web : ce qui équivaut à la latence… Il est mis à jour en temps réel et s’affiche en sur-impression d’un site ce qui vous permet de mesurer le niveau de latence via 3 indicateurs :

  • Frame rate (nombre d’images par secondes)
  • GPU (Graphical Process Unit) Raster
  • GPU (Graphical Process Unit) Memory

Les deux indicateurs liés au GPU permettent de voir le niveau de saturation de la carte graphique. Elle l’est rarement puisque les performances des cartes de nos jours nous permettent de faire de nombreux calculs en parallèle (largement suffisant pour nos sites webs)

Activation

  1. Tapez chrome://flags/ dans votre barre d’adresse
  2. Recherchez l’extension FPS counter
  3. Activez le flag en cliquant sur “Enable”
  4. Relancez Chrome

Et voilà le travail, le compteur FPS s’affiche en haut à droite de chacune de vos pages (voir ci-dessous):

Capture d’écran 2016-03-08 à 07.29.16

Rien ne s’affiche ?

  1. Ouvrir le Chrome Dev Tools
  2. Options > More tools > Rendering Settings
  3. Activer le flag “Show FPS meter”

Capture d’écran 2016-03-08 à 07.34.25

Debugger Node.js avec node-inspector (Chrome Dev Tools)

La première solution pour débugger la partie serveur en Node est de créer des traces via des console.log, console.info, console.error etc… mais ce n’est pas le but de cet article puisqu’il existe une autre manière beaucoup plus efficace de debugger ce code là grace au plugin node-inspector (Chrome Dev Tools).

Au cas où, je mets quand même les différentes options pour ceux qui souhaitent débugger dans la console :

  • console.log([data], […]);
  • console.info([data], […]);
  • console.error([data], […]);
  • console.warn([data], […]);
  • console.dir(obj);
  • console.time(label);
  • console.timeEnd(label);
  • console.trace(label);
  • console.assert(expression, [message]);

Utiliser son browser

Le gros avantage de debugger dans le Chrome Dev Tools c’est de faire du pas à pas et de pouvoir examiner les variables, objets etc à la volée! Pour en profiter, il suffit d’installer le package node-inspector (à propos de package).

[javascript]npm install -g node-inspector[/javascript]

Au moment du démarrage du serveur, il faudra simplement rajouter le flag –debug

[javascript]node –debug server.js[/javascript]

Ou pour mettre un break sur le serveur dès son démarrage…

[javascript]node –debug-brk server.js[/javascript]

Le serveur a été démarré en mode debug, dernière étape, il faut maintenant lancer node-inspector qui va démarrer sur un autre port : 8080

[javascript]node-inspector &[/javascript]

nodeinspector_command_line

Votre debugger est prêt à l’URL : http://127.0.0.1:8080/debug?port=5858

node_inspector_debugger_tool

Et voilà! Vous pouvez debugger côté serveur like a boss.