Voici comment j'ai résolu un bug étrange en utilisant des stratégies de débogage éprouvées

Rappelez-vous la dernière fois que vous avez rencontré un bug lié à l'interface utilisateur qui vous a fait vous gratter la tête pendant plusieurs heures? Peut-être que le problème se produit au hasard ou se produit dans une situation spécifique (appareil, système d'exploitation, navigateur, opération utilisateur) ou est simplement caché dans l'une des nombreuses technologies frontales du projet?

J'ai récemment expérimenté la complexité des bogues d'interface utilisateur. J'ai récemment corrigé un bug intéressant qui a affecté certains SVG dans le navigateur Safari sans motif ni raison évident. J'ai recherché des questions similaires, dans l'espoir de trouver des indices, mais aucun résultat utile n'a été trouvé. Malgré les obstacles, j'ai réussi à le réparer.

J'analyse le problème en utilisant des stratégies de débogage utiles que je couvrirai également dans cet article. Après avoir soumis le correctif, je me suis souvenu d'un tweet publié par Chris plus tôt.

Notez l'article que vous souhaitez trouver lors de la recherche de Google.

- Chris Coyier (@chriscoyier) 30 octobre 2017

… Nous sommes ici.

Description du problème

J'ai trouvé le bogue suivant dans un projet en cours. C'est sur un site Web en ligne.

J'ai créé un exemple de codepen pour démontrer ce problème afin que vous puissiez le vérifier vous-même. Si nous ouvrons l'exemple dans Safari, le bouton peut ressembler comme prévu lors du chargement. Cependant, si nous cliquons sur les deux premiers boutons plus grands, le problème apparaîtra.

Chaque fois qu'un événement de dessin de navigateur se produit , le rendu SVG dans le bouton plus grand est incorrect . C'est juste tronqué. Cela peut arriver au hasard lors du chargement. Cela peut même arriver lorsque l'écran est redimensionné. Quelle que soit la situation, cela se produira!

Voici ma solution à ce problème.

Tout d'abord, considérons l'environnement

C'est toujours une bonne idée de revoir les détails du projet pour comprendre l'environnement et les conditions des bogues.

• Ce projet particulier utilise React (mais ce message ne l'exige pas).
• SVG est importé comme un composant React et est incliné dans HTML via WebPack.
• SVG est exporté à partir d'outils de conception et n'a pas d'erreurs de syntaxe.
• SVG applique certains CSS à partir de styles de styles.
• Le SVG affecté est situé dans un HTML<div> À l'intérieur de l'élément.<li> Le problème n'apparaît que dans Safari (noté sur la version 13).</li> <h3 id="Question-approfondie"> Question approfondie</h3> <p> Jetons un coup d'œil à cette question et voyons si nous pouvons faire des hypothèses sur ce qui se passe. Des bugs comme celui-ci peuvent se compliquer et nous ne saurons pas immédiatement ce qui se passe. Nous n'avons pas besoin d'être corrects à 100% lors de la première tentative, car nous allons aller étape par étape, formant des hypothèses que nous pouvons tester pour affiner les causes possibles.</p> <h3 id="Former-des-hypothèses"> Former des hypothèses</h3> <p> Au début, cela ressemble à un problème CSS. Certains styles peuvent être appliqués dans les événements de survol, brisant les propriétés de mise en page ou de débordement des graphiques SVG. Il semble également que le problème se produit de manière aléatoire chaque fois que Safari rend une page (dessin des événements lors de la redimensionnement de l'écran, du plan en planant, du clic, etc.).</p> <p> Commençons par le chemin simple et le plus évident et supposons que CSS est la source du problème. Nous pouvons considérer la possibilité d'un bug dans le navigateur Safari qui fait que le rendu SVG est incorrect lorsque certains styles sont appliqués aux éléments SVG (tels que la disposition Flex).</p> <p> Ce faisant, nous <strong>formons une hypothèse</strong> . Notre prochaine étape consiste à configurer un test qui confirme ou réfute l'hypothèse. Chaque résultat de test produit de nouveaux faits sur le bogue et aide à former d'autres hypothèses.</p> <h3 id="Simplifier-le-problème"> Simplifier le problème</h3> <p> Nous utiliserons une stratégie de débogage appelée <strong>simplification du problème</strong> pour essayer de localiser des problèmes. La conférence CS de Cornell a décrit cette stratégie comme «un moyen d'éliminer progressivement des parties du code qui n'est pas liée aux bogues».</p> <p> En supposant que le problème réside dans CSS, nous pouvons enfin déterminer le problème ou éliminer le CSS de l'équation, réduisant ainsi le nombre de causes possibles et la complexité du problème.</p> <p> Essayons de confirmer nos hypothèses. Si nous excluons temporairement tous les feuilles de style non naval, le problème ne devrait pas se produire. Je le fais dans mon code source en commentant la ligne de code suivante du projet.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre> <p> J'ai créé un exemple de codePen pratique pour démontrer ces éléments qui ne contiennent pas de CSS. Dans React, nous importons des graphiques SVG en tant que composants et ils sont inclus dans HTML à l'aide de WebPack.</p> <p> Si nous ouvrons ce stylo dans Safari et cliquez sur le bouton, nous avons toujours ce problème. Cela se produit toujours lorsque la page se charge, mais sur Codepen, nous devons le forcer en cliquant sur le bouton. Nous pouvons conclure que CSS n'est pas le coupable, mais nous pouvons également voir que seuls deux des cinq boutons sont confrontés à des problèmes dans ce cas. N'oublions pas cela et passons à l'hypothèse suivante.</p> <h3 id="Problèmes-d-isolement"> Problèmes d'isolement</h3> <p> Notre prochaine hypothèse indique que Safari est en HTML<code><div> Il y a un bogue lors de la création de SVG à l'intérieur de l'élément. Étant donné que le problème se produit sur les deux premiers boutons, nous <strong>isolerons le premier bouton</strong> et verrons ce qui se passe.<p> Sarah Drasner explique l'importance de l'isolement, et si vous voulez en savoir plus sur les outils de débogage et autres méthodes, je recommande fortement de lire son article.</p> <blockquote><p> L'isolement est probablement le principe de base le plus fort de tout débogage. Notre base de code peut être énorme, avec différentes bibliothèques, cadres, et peut contenir de nombreux contributeurs, même des personnes qui ne sont plus impliquées dans le projet. Les problèmes de quarantaine nous aident à éliminer lentement les pièces inutiles des problèmes afin que nous puissions nous concentrer uniquement sur la solution.</p></blockquote> <p> Il est également souvent appelé «cas de test simplifié».</p> <p> J'ai déplacé ce bouton vers un itinéraire de test vide séparé (page vierge). J'ai créé le codep suivant pour démontrer le statut. Même si nous avons conclu que CSS n'est pas la cause du problème, nous devons également exclure le bogue avant de découvrir la cause réelle du bogue pour simplifier le problème autant que possible.</p> <p> Si nous ouvrons ce stylo dans Safari, nous pouvons voir que nous <strong>ne pouvons plus reproduire le problème</strong> et <strong>le graphique SVG s'affiche comme prévu après avoir cliqué sur le bouton</strong> . <strong>Nous ne devons pas considérer ce changement comme une correction de bogue acceptable</strong> , mais il fournit un bon point de départ pour créer des exemples reproductibles minimaux.</p> <h3 id="Exemple-reproductible-minimal"> Exemple reproductible minimal</h3> <p> La principale différence entre les deux premiers exemples est la combinaison de bouton. Après avoir essayé toutes les combinaisons possibles, nous pouvons conclure que ce problème ne se produit que lorsqu'un événement de dessin se produit pour un graphique SVG plus grand à côté d'un graphique SVG plus petit sur la même page.</p> <p> Nous avons créé un <strong>exemple reproductible minimal</strong> qui nous permet de reproduire des bogues sans éléments inutiles. En utilisant le plus petit exemple reproductible, nous pouvons étudier le problème plus en détail et identifier exactement la partie du code qui cause le problème.</p> <p> J'ai créé le code de code suivant pour démontrer le plus petit exemple reproductible.</p> <p> Si nous ouvrons cette démo dans Safari et cliquez sur le bouton, nous pouvons voir que le problème se produit et former l'hypothèse que les deux SVG sont en quelque sorte contradictoires. Si nous superposons la deuxième figure SVG sur la première figure, nous pouvons voir que la taille du cercle recadré sur la première figure SVG correspond à la taille exacte de la plus petite figure SVG.</p> <h3 id="Diviser-et-traiter"> Diviser et traiter</h3> <p> Nous avons réduit le problème à une combinaison de deux graphiques SVG. Maintenant, nous allons réduire le problème au code SVG spécifique qui cause le problème. Si nous n'avons qu'une compréhension de base du code SVG et que nous voulons identifier le problème, nous pouvons utiliser <strong>une stratégie de recherche d'arbres binaires</strong> et adopter une approche de division et de conquête. La conférence CS de l'Université Cornell décrit cette approche:</p> <blockquote><p> Par exemple, en commençant par un grand morceau de code, placez un point de contrôle au milieu du code. Si l'erreur ne se produit pas à ce point, cela signifie que l'erreur se produit dans la seconde moitié; Sinon, c'est en première mi-temps.</p></blockquote> <p> Dans SVG, nous pouvons essayer de retirer du premier SVG<code><filter></filter> (ainsi que<defs></defs> Parce qu'il est vide de toute façon). Vérifions d'abord<filter></filter> Le rôle de cet article de Sara Soueidan l'explique le mieux.

  Comme les gradients linéaires, les masques, les motifs et autres effets graphiques dans SVG, le filtre a un élément dédié qui est commodément nommé:<filter></filter> élément.

  <filter></filter> Un élément n'est jamais rendu directement; Son seul but est de le référencer en utilisant l'attribut filter dans SVG ou url() dans CSS.

  Dans notre SVG,<filter></filter> Une légère ombre intérieure est appliquée au bas des graphiques SVG. Après l'avoir supprimé du premier graphique SVG, nous nous attendons à ce que l'ombre intérieure disparaisse. Si le problème persiste, nous pouvons conclure qu'il y a un problème avec le reste de la balise SVG. Si nous allons de<g filter="url(#filter0_ii)"></g> Supprimez les ID restants et l'ombre sera complètement supprimée. que se passe-t-il?

  Jetons un coup d'œil aux<filter></filter> Définition des propriétés et faites attention aux détails suivants:

  <filter></filter> Les éléments ne sont jamais rendus directement; Son seul but est d' être référencé , en utilisant filter dans SVG.

  (Mon accent)

  Par conséquent, nous pouvons conclure que la définition du filtre du deuxième graphique SVG est appliquée au premier graphique SVG et conduit à une erreur.

  Résoudre le problème

  Nous connaissons maintenant le problème et<filter></filter> Propriétés liées. Nous savons également que les deux SVG ont des attributs filter car ils l'utilisent pour créer des ombres intérieures sur les cercles. Comparons le code entre ces deux SVG et voyons si nous pouvons expliquer et résoudre ce problème.

  J'ai simplifié le code pour les deux graphiques SVG afin que nous puissions voir clairement ce qui se passe. L'extrait de code suivant montre le code du premier SVG.

  <code><svg height="46" viewbox="0 0 46 46" width="46"><g filter="url(#filter0_ii)"></g><defs><filter height="46" width="46" x="0" y="0"></filter></defs></svg></code>

  L'extrait de code suivant montre le code du deuxième graphique SVG.

  <code><svg height="28" viewbox="0 0 28 28" width="28"><g filter="url(#filter0_ii)"></g><defs><filter height="28" width="28" x="0" y="0"></filter></defs></svg></code>

  Nous pouvons remarquer que le SVG généré utilise le même ID attribut id=filter0_ii . Safari applique la définition du filtre qu'il lit en dernier (dans ce cas, le deuxième marqueur SVG) et entraîne le raccourcissement du premier SVG à la taille du deuxième filtre (de 46px à 28px). L'attribut ID doit avoir une valeur unique dans le DOM. En ayant deux ou plusieurs propriétés d'ID sur une page, le navigateur ne peut pas comprendre quelle référence s'applique, et les propriétés du filtre sont redéfinies dans chaque événement de tirage, selon les conditions de course qui font apparaître le problème au hasard.

  Essayons d'attribuer une valeur d'attribut d'ID unique à chaque graphique SVG pour voir si cela résout le problème.

  Si nous ouvrons l'exemple Codepen dans Safari et cliquez sur le bouton, nous pouvons le voir en le faisant dans chaque fichier graphique SVG<filter></filter> Les attributs attribuent des ID uniques, nous avons résolu ce problème . Si nous considérons le fait que nous avons des valeurs non uniques pour des propriétés comme ID, cela signifie que ce problème devrait exister sur tous les navigateurs . Pour une raison quelconque, d'autres navigateurs (y compris Chrome et Firefox) semblent gérer ce boîtier de bord sans insectes, bien que ce soit juste une coïncidence.

  Résumer

  C'est un voyage assez long! Nous passons de presque ignorer un problème apparemment aléatoire pour le comprendre et le réparer. Le débogage de l'interface utilisateur et la compréhension des bugs visuels peuvent être difficiles si la cause profonde du problème n'est pas claire ou complexe. Heureusement, certaines stratégies de débogage utiles peuvent nous aider.

  Tout d'abord, nous simplifions le problème en formant des hypothèses , ce qui nous aide à éliminer les composants (styles, balises, événements dynamiques, etc.) qui ne sont pas liés au problème. Ensuite, nous avons isolé le balisage et trouvé le plus petit exemple reproductible, ce qui nous a permis de nous concentrer sur un seul bloc de code. Enfin, nous avons utilisé une stratégie de division et de conquête pour identifier le problème et l'avoir résolu.

  Merci d'avoir pris le temps de lire cet article. Avant de partir, je veux vous laisser avec une dernière stratégie de débogage, qui est également couverte par la conférence CS de Cornell.

  N'oubliez pas de faire une pause entre les tentatives de débogage, de vous détendre et de nettoyer vos pensées .

  Si vous passez trop de temps sur les bugs, les programmeurs se sentiront fatigués et le débogage peut se retourner contre lui. Faites une pause et nettoyez vos pensées; Après le repos, essayez d'y penser sous un angle différent.

  se référer à

  • Cornell University CS 312 Conférence 26 - Technologie de débogage
  • Conseils et conseils de débogage
  • Cas de test simplifiés
  • Filtre SVG 101