Accueil

Articles dans la catégorie Développement

Visualisez vos évènements DOM avec Visual Event

15 avril 2016 Javascript, Navigateurs web

Je suis certain que, lors de vos développements d’interface web et de charte graphique, vous aviez voulu à un moment ou à un autre rapidement lister l’ensemble des évènements Javascript définis sur votre page, pour déboguer ou même pour optimiser ces derniers.

Mieux : vous aimeriez les afficher visuellement sur les éléments du DOM, afin de réellement voir où et pour quels types d’évènements ils sont définis. Et pourquoi pas voir également le code des callbacks associés (soyons fous).

Ne cherchez plus : j’ai trouvé, testé et approuvé pour vous un outil qui fait exactement ça. Il s’appelle Visual Event, il est open-source et se présente sous la forme d’un bookmarklet (et donc, sans installation d’extension navigateur). Ce n’est également pas n’importe qui qui l’a conçu : il s’agit du créateur de DataTables.

Pour l’installer, glissez et déposez le lien affiché sur la page officielle (vers le bas dans la section Install) dans votre barre de marque-pages. Puis allez sur un site, et cliquez simplement sur le marque-page fraîchement créé. Cela injectera un fichier Javascript dans la page courante et affichera un truc de ce style (cela peut prendre du temps s’il y a beaucoup d’éléments à traiter) :

Screenshot de Visuel Event

Ça claque non ? Ci-dessus un exemple sur DuckDuckGo où est affiché le détail des évènements de l’icône du menu principal en haut à droite : 4 évènements y sont attachés.

A noter que cela ne fonctionne pas pour les sites protégés par la Content Security Policy.

Les WebSocket sur Firefox enfin visibles

5 avril 2016 Firefox, HTML5, WebSocket

Dieu existe. On peux enfin déboguer les WebSocket sur Firefox (j’avais déjà parlé ici des prémices). C’est tout chaud et c’est disponible sous forme d’extension du nom de WebSocket Monitor qui étends les fonctionnalités des Developers Tools de Firefox.

Screenshot de WebSocket Monitor

Et attention : ce n’est pas n’importe qui qui sont derrière tout ça, il s’agit de l’équipe de développement de Firebug. Avant cette extension, vous deviez utiliser Fiddler ou Chrome.

A propos de Firebug : la prochaine version majeure (la version 3) ne sera plus une extension à proprement parler, mais une amélioration des Developer Tools déjà existants. Ses buts, selon leur site :

  • Firebug has always been an extension (Firefox add-on) and the natural next step is to build the next version on top of existing developer related features and APIs built into Firefox – and extend them. This way Firebug can utilize the existing platform infrastructure and get significant performance, stability and security advantages.
  • Firebug wants to complement Firefox’ built-in tools by adding new functionality, not compete with them. The next Firebug generation starts with introducing a new Firebug theme and bringing the great Firebug user experience with it.
  • Users don’t want two separate tools in Firefox – they want one great and powerful tool!

xip.io en clair

2 avril 2016 Développement, Réseau, Tutos, Web

L’année dernière, j’avais twitté à propos d’un service obscur du nom de xip.io qui permet, je me cite, de « tester la responsivité de vos sites sur un iPhone / Android / etc sur votre machine de développement sans rien configurer ».

Je pense que ce service – gratuit de surcroît – mérite un article dédié afin qu’un maximum de développeurs (front ou back) en comprennent son utilité et puissent ensuite l’utiliser pour se simplifier la vie à fond.

xip.io