juillet | 2013 | Royto's Blog

Cet article est en grande partie la traduction de la partie Namespaced Event issus du chapitre Events and Event Delegation de jQuery Fundamentals (un site de présentation des principales fonctionnalités de jQuery très bien fait).

Une des bonnes pratiques pour la gestions des événements en jQuery est de passer par on(). Un des avantages de l’utilisation de on() est la possibilité d’utiliser des « namespaced » events. Quand utiliser ces namespaces ?
Prenons un exemple on l’on doit s’abonner à des événements pour ensuite supprimer certains de ces handlers. La première chose qui nous vient en tête est de faire :

A NE PAS UTILISER !

$( 'li' ).on( 'click', function() {
  console.log( 'a list item was clicked' );
});
 
$( 'li' ).on( 'click', function() {
  registerClick();
  doSomethingElse();
});
 
$( 'li' ).off( 'click' );

Ce code va permettre de se désabonner à tous les événements clic sur les éléments li, ce qui n’est pas ce que nous voulons. L’utilisation d’un namespaced event va permettre de spécifier un handler spécifiquement.

$( 'li' ).on( 'click.logging', function() {
  console.log( 'a list item was clicked' );
});
 
$( 'li' ).on( 'click.analytics', function() {
  registerClick();
  doSomethingElse();
});
 
$( 'li' ).off( 'click.logging' );

Ce code va garder le handler relatif à analytics, et supprimer le handler relatif au logging.

On peut également utiliser les namespaces pour déclencher certains événements :

$( 'li' ).trigger( 'click.logging' );

Chrome est un formidable outil de développement pour le web. Voici quelques trucs et astuces pour bien debuger avec Chrome.

Extensions

Il est possible d’ajouter des extensions à la barre d’outils de développement que vous trouverez sur le chrome webstore dans la catégorie Outils de développement. (toutes les extensions ne se rajoute pas à la barre d’outils).

jQuery Debugger : permet de visualiser rapidement dans votre page le résultat d’un sélecteur jQuery
Pagespeed insights : analyse votre page et vous donne des recommandations pour améliorer les performance de votre site

Canary

Chrome Canary est la version « bêta » de Chrome qui contient pas mal de nouveautés dans la barre d’outils qui seront plus tard intégré dans la version courante de Chrome. C’est une version dédié aux développeurs. Canary s’installe en parallèle de Chrome et on peut donc utiliser les 2 simultanément sans aucun problème.

Activer les expérimentations

Les nouveautés en cours de développement de Chrome ne sont pas activé par défaut mais peuvent l’être via l’interface de gestion des fonctionnalités expérimentales. Il en est de même pour la barre de développement. Pour les activer il faut aller à l’url chrome://flags/, activer l’option Activer les expérimentations dans les outils de développement puis redémarrer.

Un onglet Experiments dans les paramètres de la barre d’outils de développement permet d’activer certaines fonctionnalités.

Snippets

Chrome (canary par défaut et chrome si activation dans les expérimentations) permet la gestion de snippets. Il s’agit de bout de code JavaScript que vous allez pouvoir enregistrer afin de pouvoir les exécuter rapidement au lieu de les taper à la main via la console. Vous trouverez ici une liste de snippets prêt à l’emploi.

Rejouer des appels Ajax

Qui dit développement d’application web riche dit appel AJAX afin de récupérer des données. Il est possible de rejouer des appels AJAX (ou XHR pour XMLHttpRequest) directement depuis la barre d’outils. Pour cela, il faut aller dans l’onglet Networks, clic droit sur l’appel Ajax (XHR) puis cliquer sur Replay XHRs

Pause on exceptions

Chrome possède également une option permettant de mettre en pause le code JavaScript dès qu’une exception est levée. Il y a 3 modes :

Ne pas s’arrêter lors des exceptions. Le mode par défaut.
S’arrêter à toutes les exceptions.
S’arrêter à toutes les exception non catchées (sans bloc try/catch).

Le passage d’un mode à l’autre se fait en cliquant sur le symbole pause en bas de la l’onglet Sources.

Pretty Print JavaScript

Une bonnes pratique pour avoir de bonnes performances consiste a minifier vos scripts JavaScript afin que ceux-ci soit plus léger et donc plus rapide à télécharger. Cependant, vos fichiers ne sont plus facilement débugable (en production). Chrome intègre un outil qui permet de formater un fichier afin de le rendre plus lisible et plus facile à debuger. Il suffit pour cela d’ouvrir un script dans l’onglet Sources et de cliquer sur { }. (le bleu indique que la fonctionnalité est activée)

Désactiver le cache

Le cache du navigateur peut vous amener à perdre du temps lors du développement de votre application web (vous pensez utiliser la dernière version de votre site mais vous utiliser une ancienne version d’un fichier issu du cache de votre navigateur). La barre d’outils Chrome permet de désactiver le cache pour toujours récupérer le fichier du serveur. Pour cela, il faut cocher Disable Cache dans l’onglet General des paramètres de la barre d’outils. Cela n’est pris en compte seulement si la barre d’outils est ouverte.

Changer le thème de la barre d’outils

De nombreux outils de développement permettent de configurer le thème (couleurs, police, …) et la barre d’outils de Chrome n’échappe pas à la règle. En fait, il s’agit d’une application web et il suffit donc de modifier le style CSS afin de satisfaire vos besoins.

Le fichier se nomme Custom.css et se trouve dans :

Windows: « C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\ »
Mac: « ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/ »
Linux: « ~/.config/chrome/Default/User StyleSheets/ »

Vous pouvez trouvez des thèmes prêt à l’emploi ici : http://devthemez.com/themes/chrome-developer-tools (contient également des thèmes pour sublime text 2, vim, …)

Royto's Blog

Le blog de Julien Roy

Archives mensuelles : juillet 2013

JQuery : Namespaced Events

Chrome : Bien débuger avec la barre d’outils