Check my Website: La console fait son festival

Il est désormais possible de visualiser dans la console la façon dont une page se dessine dans le navigateur.

C’est peut-être le festival de Cannes qui vient d’ouvrir ses portes qui nous a inspiré pour cette nouvelle fonctionnalité à découvrir dès à présent dans la console.

Le filmstrip

Cette nouvelle fonctionnalité permet de visualiser la page à ses étapes clés de chargement; la façon dont elle se compose dans le navigateur.

Déroulé visuel du chargement de la page
Déroulé visuel du chargement de la page

Rien de particulier à dire, les images parlent toutes seules. Les deux barres verticales de couleur signalent :

  • DomContentLoaded (la barre bleue) est un événement déclenché quand la page, le document est complètement reçu et interprété, sans attendre le chargement des feuilles de style, images…
  • Load (la barre verte) est un événement déclenché quand la page, le document et toutes ses dépendances sont chargées.

Et ce n’est pas fini : Le mode avancé

L’onglet de préférences des réglages pour un site évolue et propose désormais deux modes de fonctionnement :

  • Un mode simple pour ceux qui veulent aller rapidement à l’essentiel.
  • Un mode avancé pour ceux qui aiment tout contrôler ou qui ont des besoins spécifiques.
Bouton mode avancé dans les préférences
Bouton mode avancé dans les préférences

C’est en cliquant sur le bouton Mode avancé à droite que vous entrez naturellement dans le mode avancé.

Il vous permet d’avoir accès à tous les paramètres possibles pour un contrôle. Que ce soit ceux qui permettent de triturer la requête à envoyer comme vu précédemment, les jeux de règles YSlow ou encore le nombre de tentatives avant notification.

Vous devriez déjà être dans la console !

Olivier Jan

À propos de l’auteur

| Cofondateur de Check my Website

Check my Website est un service pour la supervision et la surveillance à distance de la disponibilité, de la performance et du bon fonctionnement des sites et applications web.

Suivez @olivjan sur Twitter !

Laissez un commentaire

comments powered by Disqus