Comment déboguer CSS en divisant en deux

Un des flux de travail que j'utilise pour déboguer CSS

J'ai eu ce problème aujourd'hui.

J'ai ajouté le bouton Paddle à ma nouvelle page de cours en ligne, afin que les gens puissent cliquer sur le bouton «Acheter maintenant» et la belle fenêtre contextuelle Paddle apparaîtrait.

Le popup a un indicateur de chargement, un cercle avec un spinner à l'intérieur, et il y avait un problème: en cliquant sur le bouton "Acheter maintenant", l'indicateur de spinner n'était pas centré à l'intérieur du cercle, comme le montre ce gif:

Je ne savais pas vraiment ce qui causait le problème, alors je réfléchissais à la façon de le résoudre.

Le principe que j'utilise dans ces cas estcouper en deux. Je l'appelle aussidiviser et impera.

J'ai ouvert les DevTools et je suis passé au panneau Sources, qui montrait tous les fichiers chargés dans la page. J'ai recherché l'un de mes fichiers CSS, car mon intuition était que la page CSS interférait avec les propres règles CSS de Paddle.

Alors j'ai enlevétoutle contenu de ce fichier.

Chrome modifie automatiquement l'apparence de la page lorsque vous modifiez les fichiers CSS dans le panneau Sources, j'ai donc pu vérifier et voir que le spinner fonctionnait maintenant correctement!

Donc, l'une des règles de ce CSS est le problème.

Comment trouver quelle ligne?

Le fichier comporte 312 lignes. Je sélectionne de la ligne 150 à 312 et je la supprime. Réessayer. Le problème est toujours là, il doit donc provenir des 149 premières lignes.

J'ai frappé cmd-Z (annuler) pour remettre les lignes que j'ai supprimées et supprimer les lignes 70-149.

Le problème a disparu, donc la ligne problématique est là. J'ai frappé à nouveau cmd-Z pour restaurer les lignes que j'ai supprimées.

Et ainsi de suite, vous avez l'idée. Rincez et répétez jusqu'à ce que vous trouviez la ligne qui vous pose le problème.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: