"/>

Rechercher les élements du Dom hors cadre

Comment repérer les éléments qui débordent de la page ?

Lors de vos intégrations web, il vous est sans doute déjà arrivé d’avoir une marge à droite avec l’apparition d’une scroll bar horizontale. Il y a un élément dans la page qui sort du flux, mais on ne le voit pas forcément tout de suite. On peut dans ce cas supprimer les blocs un à un via l’inspecteur d’élément jusqu’à trouver l’intrus qui pose problème.

Vous pouvez aussi utiliser le script suivant.

[].forEach.call($$("*"), function(a) {
  a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

Ce script est à insérer directement dans la console, comme ceci :

scroll bar

On peut trouver différentes variantes sur la page de l’auteur, Addy Osmani.  L’outil fait ressortir tous les cadres, margin, padding. Chaque élement est assorti de son cadre pour un aperçu ludique mais aussi surtout très pratique de sa page web.  Les défauts de structure sont immédiatement visibles !

srcoll bar analyse

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.