So habe ich einen seltsamen Fehler mit bewährten Debugging -Strategien gelöst

Erinnern Sie sich an das letzte Mal, als Sie auf einen Fehler im Zusammenhang mit UI gestoßen sind, mit dem Sie mehrere Stunden am Kopf kratzten? Möglicherweise tritt das Problem zufällig oder in einer bestimmten Situation auf (Gerät, Betriebssystem, Browser, Benutzerbetrieb) oder ist in einer der vielen Front-End-Technologien im Projekt nur versteckt?

Ich habe kürzlich wieder die Komplexität von UI -Bugs erlebt. Ich habe kürzlich einen interessanten Fehler behoben, der einige SVGs im Safari -Browser ohne offensichtliche Muster oder Grund beeinflusst hat. Ich habe nach ähnlichen Fragen gesucht, in der Hoffnung, einige Hinweise zu finden, aber es wurden keine nützlichen Ergebnisse gefunden. Trotz der Hindernisse habe ich es geschafft, es zu beheben.

Ich analysiere das Problem, indem ich einige nützliche Debugging -Strategien verwende, die ich auch in diesem Artikel behandeln werde. Nachdem ich das Fix eingereicht hatte, erinnerte ich mich an einen Tweet, der von Chris früher gepostet wurde.

Schreiben Sie den Artikel auf, den Sie bei der Suche nach Google finden wollten.

- Chris Coyier (@chriscoyier) 30. Oktober 2017

… Wir sind hier.

Problembeschreibung

Ich fand den folgenden Fehler in einem laufenden Projekt. Dies ist auf einer Website, die online ist.

Ich habe ein CodePen -Beispiel erstellt, um dieses Problem zu demonstrieren, damit Sie es selbst überprüfen können. Wenn wir das Beispiel in Safari öffnen, kann die Taste beim Laden wie erwartet aussehen. Wenn wir jedoch auf die ersten beiden größeren Schaltflächen klicken, wird das Problem angezeigt.

Immer wenn ein Browser -Ereignis auftritt , ist das SVG -Rendering in der größeren Taste falsch . Es ist nur abgeschnitten. Es kann zufällig beim Laden passieren. Es kann sogar passieren, wenn der Bildschirm geändert wird. Egal wie die Situation ist, es wird passieren!

Hier ist meine Lösung für dieses Problem.

Betrachten wir zunächst die Umwelt

Es ist immer eine gute Idee, die Details des Projekts zu überprüfen, um die Umgebung und die Bedingungen für Fehler zu verstehen.

• Dieses bestimmte Projekt verwendet React (aber dieser Beitrag erfordert es nicht).
• SVG wird als React -Komponente importiert und über WebPack in HTML eingefügt.
• SVG wird aus Design -Tools exportiert und hat keine Syntaxfehler.
• SVG wendet einige CSS von Stylesheets an.
• Die betroffene SVG befindet sich in einem HTML<div> Im Element.<li> Das Problem tritt nur in Safari auf (in Version 13 angegeben).</li> <h3 id="Eingehende-Frage"> Eingehende Frage</h3> <p> Schauen wir uns diese Frage an und sehen, ob wir einige Annahmen darüber treffen können, was vor sich geht. Fehler wie diese können kompliziert werden und wir werden nicht sofort wissen, was los ist. Wir müssen beim ersten Versuch nicht zu 100% korrekt sein, da wir Schritt für Schritt gehen und Hypothesen bilden können, die wir testen können, um mögliche Ursachen einzugrenzen.</p> <h3 id="Annahmen-bilden"> Annahmen bilden</h3> <p> Zuerst sieht dies wie ein CSS -Problem aus. Einige Stile können in schwebenden Ereignissen angewendet werden, wodurch die Layout- oder Überlaufeigenschaften der SVG -Grafiken gebrochen werden. Es sieht auch so aus, als ob das Problem zufällig auftritt, wenn Safari eine Seite macht (Zeichnen von Ereignissen bei der Größe des Bildschirms, schwebenden, klicken usw.).</p> <p> Beginnen wir mit dem einfachen und offensichtlichsten Weg und nehmen an, dass CSS die Quelle des Problems ist. Wir können die Möglichkeit eines Fehlers im Safari -Browser berücksichtigen, der dazu führt, dass das SVG -Rendering falsch ist, wenn bestimmte Stile auf SVG -Elemente angewendet werden (z. B. Flex -Layout).</p> <p> Auf diese Weise <strong>bilden wir eine Hypothese</strong> . Unser nächster Schritt besteht darin, einen Test einzurichten, der die Hypothese entweder bestätigt oder widerlegt. Jedes Testergebnis erzeugt neue Fakten über den Fehler und hilft, weitere Annahmen zu bilden.</p> <h3 id="Vereinfachen-Sie-das-Problem"> Vereinfachen Sie das Problem</h3> <p> Wir werden eine Debugging -Strategie verwenden, die als <strong>Problemvereinigung</strong> bezeichnet wird, um Probleme zu ermitteln. Cornells CS -Vorlesung beschrieb diese Strategie als "eine Möglichkeit, Teile des Codes, der nicht mit Fehler zusammenhängt, schrittweise zu beseitigen".</p> <p> Unter der Annahme, dass das Problem in CSS liegt, können wir schließlich das Problem bestimmen oder CSS aus der Gleichung beseitigen, wodurch die Anzahl möglicher Ursachen und die Komplexität des Problems verringert werden.</p> <p> Versuchen wir, unsere Annahmen zu bestätigen. Wenn wir alle Nicht-Browser-Stylesheets vorübergehend ausschließen, sollte das Problem nicht auftreten. Ich mache dies in meinem Quellcode, indem ich die folgende Codezeile aus dem Projekt kommentiere.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Ich habe ein praktisches CodePen -Beispiel erstellt, um diese Elemente zu demonstrieren, die kein CSS enthalten. In React importieren wir SVG -Grafiken als Komponenten und sie werden mit Webpack in HTML eingebaut.</p> <p> Wenn wir diesen Stift in Safari öffnen und auf die Schaltfläche klicken, haben wir dieses Problem immer noch. Es geschieht immer noch, wenn die Seite geladen wird, aber auf CodePen müssen wir sie erzwingen, indem wir auf die Schaltfläche klicken. Wir können zu dem Schluss kommen, dass CSS nicht der Schuldige ist, aber wir können auch sehen, dass in diesem Fall nur zwei der fünf Knöpfe Probleme haben. Erinnern wir uns daran und gehen Sie mit der nächsten Annahme weiter.</p> <h3 id="Isolationsprobleme"> Isolationsprobleme</h3> <p> Unsere nächste Annahme besagt, dass Safari in HTML ist<code><div> Es gibt einen Fehler beim Rendern von SVG im Element. Da das Problem bei den ersten beiden Tasten auftritt, werden wir <strong>den ersten Knopf isolieren</strong> und sehen, was passiert.<p> Sarah Drasner erklärt die Bedeutung der Isolation. Wenn Sie mehr über Debugging -Tools und andere Methoden erfahren möchten, empfehle ich dringend, ihren Artikel zu lesen.</p> <blockquote><p> Isolation ist wahrscheinlich das stärkste Kernprinzip in allen Debuggen. Unsere Codebasis kann riesig sein, mit verschiedenen Bibliotheken, Frameworks und vielen Mitwirkenden, selbst Personen, die nicht mehr an dem Projekt beteiligt sind. Quarantäneprobleme helfen uns, unnötige Teile langsam aus den Problemen zu entfernen, damit wir uns allein auf die Lösung konzentrieren können.</p></blockquote> <p> Es wird auch oft als "vereinfachtes Testfall" bezeichnet.</p> <p> Ich habe diese Schaltfläche auf eine separate leere Teststrecke (leere Seite) verschoben. Ich habe den folgenden Codepen erstellt, um den Status zu demonstrieren. Selbst wenn wir zu dem Schluss gekommen sind, dass CSS nicht die Ursache des Problems ist, sollten wir den Fehler auch ausschließen, bevor wir die eigentliche Ursache des Fehlers herausfinden, um das Problem so weit wie möglich zu vereinfachen.</p> <p> Wenn wir diesen Stift in Safari öffnen, können wir sehen, dass wir <strong>das Problem nicht mehr reproduzieren können</strong> und <strong>das SVG -Diagramm nach dem Klicken auf die Schaltfläche wie erwartet anzeigt</strong> . <strong>Wir sollten diese Änderung nicht als eine akzeptable Fehlerbehebung betrachten</strong> , sondern einen guten Ausgangspunkt für die Erstellung minimal reproduzierbarer Beispiele.</p> <h3 id="Minimal-reproduzierbares-Beispiel"> Minimal reproduzierbares Beispiel</h3> <p> Der Hauptunterschied zwischen den ersten beiden Beispielen ist die Button -Kombination. Nachdem wir alle möglichen Kombinationen ausprobiert haben, können wir zu dem Schluss kommen, dass dieses Problem nur dann auftritt, wenn ein Zeichnungsereignis für ein größeres SVG -Diagramm neben einem kleineren SVG -Diagramm auf derselben Seite auftritt.</p> <p> Wir haben ein <strong>minimal reproduzierbares Beispiel</strong> erstellt, mit dem wir Fehler ohne unnötige Elemente reproduzieren können. Unter Verwendung des kleinsten reproduzierbaren Beispiels können wir das Problem genauer untersuchen und genau den Teil des Codes genau bestimmen, der das Problem verursacht.</p> <p> Ich habe das folgende CodePen erstellt, um das kleinste reproduzierbare Beispiel zu demonstrieren.</p> <p> Wenn wir diese Demo in Safari öffnen und auf die Schaltfläche klicken, können wir feststellen, dass das Problem auftritt und die Annahme bilden, dass die beiden SVGs irgendwie miteinander widersprechen. Wenn wir die zweite SVG -Abbildung in der ersten Abbildung überlagern, können wir sehen, dass die Größe des Kreislaufs in der ersten SVG -Abbildung der genauen Größe der kleineren SVG -Abbildung übereinstimmt.</p> <h3 id="Dividieren-und-behandeln"> Dividieren und behandeln</h3> <p> Wir haben das Problem auf eine Kombination von zwei SVG -Grafiken eingeschränkt. Jetzt werden wir das Problem auf den spezifischen SVG -Code eingrenzen, der das Problem verursacht. Wenn wir nur ein grundlegendes Verständnis des SVG-Codes haben und das Problem genau bestimmen möchten, können wir <strong>eine binäre Baumsuchstrategie</strong> verwenden und einen Divide-and-Conquer-Ansatz verfolgen. Die CS -Vorlesung der Cornell University beschreibt diesen Ansatz:</p> <blockquote><p> Wenn Sie beispielsweise mit einem großen Code beginnen, legen Sie einen Kontrollpunkt in der Mitte des Codes. Wenn der Fehler zu diesem Zeitpunkt nicht auftritt, bedeutet dies, dass der Fehler in der zweiten Hälfte auftritt. Ansonsten ist es in der ersten Hälfte.</p></blockquote> <p> In SVG können wir versuchen, aus dem ersten SVG zu entfernen<code><filter></filter> (sowie<defs></defs> weil es sowieso leer ist). Lassen Sie uns zuerst überprüfen<filter></filter> Die Rolle dieses Artikels von Sara Soueidan erklärt es am besten.

  Wie lineare Gradienten, Masken, Muster und andere grafische Effekte in SVG verfügt der Filter über ein dediziertes Element, das bequem benannt ist:<filter></filter> Element.

  <filter></filter> Ein Element wird niemals direkt gerendert; Sein einziger Zweck ist es, es unter Verwendung des filter in SVG oder url() -Funktion in CSS zu verweisen.

  In unserem SVG,<filter></filter> Ein leichter innerer Schatten wird auf den Boden der SVG -Grafiken angewendet. Nachdem wir es aus dem ersten SVG -Diagramm entfernt haben, erwarten wir, dass der innere Schatten verschwindet. Wenn das Problem weiterhin besteht, können wir zu dem Schluss kommen, dass ein Problem mit dem Rest des SVG -Tags besteht. Wenn wir gehen von<g filter="url(#filter0_ii)"></g> Löschen Sie die verbleibenden IDs in und der Schatten wird vollständig entfernt. Was ist los?

  Werfen wir einen Blick auf die oben genannten<filter></filter> Definition von Eigenschaften und achten Sie auf die folgenden Details:

  <filter></filter> Elemente werden niemals direkt gerendert; Der einzige Zweck ist zu referenzieren unter Verwendung filter in SVG.

  (Meine Betonung)

  Daher können wir zu dem Schluss kommen, dass die Filterdefinition des zweiten SVG -Diagramms auf das erste SVG -Diagramm angewendet wird und zu einem Fehler führt.

  Das Problem beheben

  Wir kennen jetzt das Problem und<filter></filter> Eigenschaften verwandt. Wir wissen auch, dass beide SVGs filter haben, da sie es verwenden, um innere Schatten in Kreisen zu erstellen. Vergleichen wir den Code zwischen diesen beiden SVGs und prüfen wir, ob wir dies erklären und beheben können.

  Ich habe den Code für beide SVG -Grafiken vereinfacht, damit wir klar sehen können, was los ist. Der folgende Code -Snippet zeigt den Code für den ersten SVG an.

  <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>

  Der folgende Code -Snippet zeigt den Code für das zweite SVG -Diagramm an.

  <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>

  Wir können feststellen, dass der generierte SVG dieselbe ID -Attribut id=filter0_ii verwendet. Safari wendet die Filterdefinition an, die zuletzt liest (in diesem Fall der zweite SVG -Marker) und bewirkt, dass die erste SVG auf die Größe des zweiten Filters (von 46 px bis 28px) geschnitten wird. Das ID -Attribut sollte im DOM einen eindeutigen Wert haben. Durch zwei oder mehr ID -Eigenschaften auf einer Seite kann der Browser nicht verstehen, welche Referenz angewendet werden soll, und die Filtereigenschaften werden in jedem Ziehereignis abhängig von den Rennbedingungen neu definiert, die dazu führen, dass das Problem zufällig erscheint.

  Versuchen wir, jedem SVG -Diagramm einen eindeutigen ID -Attributwert zuzuweisen, um festzustellen, ob dies das Problem löst.

  Wenn wir das CodePen -Beispiel in Safari öffnen und auf die Schaltfläche klicken, können wir dies sehen, indem wir es in jeder SVG -Graphendatei erstellen<filter></filter> Attribute weisen eindeutige IDs zu, wir haben dieses Problem behoben . Wenn wir die Tatsache betrachten, dass wir nicht eindeutige Werte für Eigenschaften wie ID haben, bedeutet dies, dass dieses Problem auf allen Browsern vorhanden sein sollte . Aus irgendeinem Grund scheinen andere Browser (einschließlich Chrom und Firefox) mit diesem Randfall ohne Fehler zu handhaben, obwohl dies nur ein Zufall sein kann.

  Zusammenfassen

  Dies ist eine ziemlich lange Reise! Wir ignorieren fast ein scheinbar zufälliges Problem zum vollständigen Verständnis und Beheben. Das Debugieren der Benutzeroberfläche und das Verständnis visueller Fehler kann schwierig sein, wenn die Ursache des Problems unklar oder komplex ist. Glücklicherweise können uns einige nützliche Debugging -Strategien helfen.

  Erstens vereinfachen wir das Problem, indem wir Annahmen erstellen , die uns helfen, die Komponenten (Stile, Tags, dynamische Ereignisse usw.) zu beseitigen, die nicht mit dem Problem zusammenhängen. Danach isolierten wir das Markup und fanden das kleinste reproduzierbare Beispiel, das es uns ermöglichte, uns auf einen einzelnen Codeblock zu konzentrieren. Schließlich verwendeten wir eine Kluft- und Eroberungsstrategie, um das Problem zu bestimmen und zu beheben.

  Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen. Bevor ich gehe, möchte ich Sie mit einer letzten Debugging -Strategie verlassen, die auch in Cornells CS -Vorlesung behandelt wird.

  Denken Sie daran , eine Pause zwischen Debugging -Versuchen zu machen, sich zu entspannen und Ihre Gedanken aufzuräumen .

  Wenn Sie zu viel Zeit mit Fehler verbringen, fühlen sich Programmierer müde und debuggen können nach hinten losgehen. Machen Sie eine Pause und räumen Sie Ihre Gedanken auf; Versuchen Sie nach Ruhe, aus einer anderen Perspektive darüber nachzudenken.

  beziehen sich auf

  • Cornell University CS 312 Vorlesung 26 - Debug -Technologie
  • Tipps und Tipps Debugging
  • Vereinfachte Testfälle
  • SVG -Filter 101