Accueil

Articles dans la catégorie Navigateurs web

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!

Passer Firefox en mode kiosque

9 février 2013 Boulot, Firefox

Mise à jour 24 mars 2016 : voyez OpenKiosk si vous ne voulez pas vous emmerder avec les bidouilles ci-dessous.


Dans le cadre de mon travail j’ai été amené à travailler avec une borne interactive publique sous Windows qui a elle-même un accès internet sur un site web particulier; or sur une borne publique il ne fallait pas que tout le monde puisse faire ce qu’il veux (comme accéder aux paramètres du navigateur Web, aller sur un autre site web, lancer un programme quelconque, etc). Mon objectif était donc de n’afficher que la zone d’affichage des pages web du navigateur en plein écran (et donc de masquer tout le reste : barre d’état, barre des favoris, menu, etc).

Je partage donc avec vous tous mes trouvailles qui ont solutionnées mon problème.

Mes extensions Firefox préférées

5 juin 2012 Firefox

Mise à jour 29 mars 2016 : cette liste n’est plus du tout à jour.


 

Et voici l’article classique et facile de tout blog parlant de ce qui touche au Web : mes extensions Firefox préférées.
A noter que la plupart des extensions que j’utilise concernent le développement web.