Wenn Sie Probleme beim Erstellen einer Webseite haben, ist das Nützlichste, was Sie tun können, einen reduzierten Testfall zu erstellen. „Probleme“ können alles sein: Das CSS tut nicht, was es soll, das JavaScript verhält sich nicht richtig, es gibt Probleme mit verschiedenen Browsern usw. Im Prozess der Erstellung eines reduzierten Testfalls werden Sie entweder
- Feststellen, dass es ein Fehler Ihrerseits war, ihn zu isolieren und zu beheben (oder eine großartige Testseite zum Fragen nach Hilfe zu haben)
- Einen echten Fehler entdecken und die perfekte Demo zur Präsentation an die Verantwortlichen erhalten.
Also, was ist ein reduzierter Testfall überhaupt? Ein reduzierter Testfall ist eine Demo/Beispielseite, die Sie erstellen und die das Problem, das Sie haben, mit möglichst wenig Code reproduziert. Nur das HTML, das benötigt wird, um den Problem-Inhalt anzuzeigen. Nur CSS, das mit diesem reduzierten HTML zusammenhängt. Nur das JavaScript, das mit der fraglichen Funktionalität zusammenhängt.
Reduzierte Testfälle sind die absolute, unzweifelhaft, Nummer-eins-Methode zur Fehlersuche. Tatsächlich tragen manche Leute zu Open-Source-Projekten bei, indem sie Fehlerberichte in reduzierte Testfälle für erfahrenere Entwickler umwandeln. Hier ist, wie Sie mit der Erstellung eines für Ihre Probleme beginnen könnten…
1. Machen Sie es statisch
Wenn es sich um ein Frontend-Problem handelt, machen Sie die Seite statisch anstatt dynamisch vom Server generiert (wie bei der Verwendung eines CMS). Das heißt, betrachten Sie den Quellcode der Problemseite, kopieren Sie ihn und fügen Sie ihn in ein neues Dokument ein und beginnen Sie dort mit Ihrem reduzierten Testfall. Legen Sie dieses Dokument in ein neues Verzeichnis, nur für Ihren Testfall.
2. Machen Sie es isoliert
Legen Sie dann alle Ressourcendateien, die das HTML benötigt (CSS, Bilder, JavaScript usw.), ebenfalls in dieses Verzeichnis. Nun haben Sie eine abgeschlossene kleine Umgebung nur für diesen Zweck. Jetzt können Sie diese Ressourcendateien und Markup bearbeiten, ohne sich Gedanken darüber machen zu müssen, etwas Live zu beeinflussen. Dies macht Ihren Testfall auch portabel, falls Sie ihn an jemand anderen weitergeben müssen.
3. Reduzieren, reduzieren, reduzieren!
Entfernen Sie nun nach und nach alles, und testen Sie zwischendurch immer wieder, ob das Problem noch besteht. Beginnen Sie damit, HTML zu entfernen, sodass das, was auf der Seite sichtbar ist, auf das Nötigste reduziert wird. Entfernen Sie dann alles CSS, das nicht mehr benötigt wird. Entfernen Sie dann alles JavaScript, das nicht mit dem Problem zusammenhängt. Wenn es kein JavaScript-Problem ist, entfernen Sie alles davon (es sei denn, Sie glauben, dass JavaScript etwas stört, was das eigentliche Problem ist).
4. Dokumentieren Sie es
Wenn es Teile im Code gibt, bei denen Sie vermuten, dass sie das Problem sein könnten, fügen Sie dort Kommentare ein. Jede Programmiersprache hat eine Möglichkeit, Kommentare einzufügen, die den Code nicht beeinflussen.
5. Stellen Sie es online
Wenn Sie lokal arbeiten, stellen Sie Ihren reduzierten Testfall irgendwo online. Ich habe gesehen, wie Leute das kostenlose Dropbox nutzten, um ein schnelles Beispiel zu hosten. Dies erleichtert es Ihnen, das Problem mit anderen zu teilen, die möglicherweise helfen können.
Aber ich weiß nicht, was das Problem ist! Sie müssen alles sehen!
Sie wissen, was das Problem ist. Es ist, was immer das Problem ist. Jemandem „alles“ zu zeigen, ist oft überwältigend und erschwert ihm das Verständnis. So fühle ich mich jedenfalls. Wenn jemand um Hilfe bittet und 1000 Zeilen CSS-Code ins Forum postet, werden meine Augen meist glasig und ich überspringe es einfach. Ein reduzierter Testfall hingegen ist oft faszinierend und fordert geradezu dazu auf, ihn anzuschauen.
Weitere Ressourcen
- WebKit zu Testfallreduzierung
- CodePen ist eine gute Anwendung, um reduzierte Testfälle zu erstellen.
Kennen Sie weitere gute Diskussionen zu diesem Thema? Lassen Sie es mich wissen, ich verlinke sie.
Ich stimme zu.
Obwohl ich normalerweise nicht mit einer Webseite arbeite, wenn ich einen Fehlerbericht einreiche, erstelle ich fast immer einen Code-Schnipsel, der den Fehler mit so wenig zusätzlichen Informationen wie möglich reproduziert. Das bedeutet, selbst die Komplexität von Dokumenten zu reduzieren, die mit dem Fehler einhergehen, wenn möglich. Das Gleiche würde ich für webseitenbasierte Fehlerberichte tun.
Ich sollte auch anmerken, dass ich dank dieser Taktik in der Regel sehr hilfreiche Antworten erhalte und das schnell.
Auf jeden Fall. Die Idee von RTCs überschreitet das Web definitiv und dringt in fast alles ein, wo etwas schiefgehen kann.
Absolut einverstanden. Ich mache das häufig bei CMS-Builds, wo ich mich bereits in der datengesteuerten Phase befinde, aber später Frontend-Probleme habe. Wenn ich ein statisches Beispiel von etwas machen kann, ist es viel einfacher zu debuggen. Bei CSS-Positionierungs-/Dimensionsproblemen verwende ich gerne absurde Hintergrundfarben für Elemente, wie Rot, Limettengrün, Fuchsia usw. Die Hintergrundfarbe macht Elemente leicht sichtbar und vergrößert sie nicht wie Rahmen. Wenn es JavaScript ist, sind console.log() und alert() entscheidend.
Absolut einverstanden. Ich mache das häufig bei CMS-Builds, wo ich mich bereits in der datengesteuerten Phase befinde, aber später Frontend-Probleme habe. Wenn ich ein statisches Beispiel von etwas machen kann, ist es viel einfacher zu debuggen. Bei CSS-Positionierungs-/Dimensionsproblemen verwende ich gerne absurde Hintergrundfarben für Elemente, wie Rot, Limettengrün, Fuchsia usw. Die Hintergrundfarbe macht Elemente leicht sichtbar und vergrößert sie nicht wie Rahmen. Wenn es JavaScript ist, sind console.log() und alert() entscheidend.
+1
In einigen Foren, denen ich folge, ist es sehr üblich, dass Leute lange Codebeispiele posten, aber wie WC anmerkt, erhalten sie selten Hilfe. Es dauert einfach zu lange, den gesamten Code zu überprüfen.
Es sind normalerweise Anfänger, die lange Codeabschnitte (oder sogar ganze Seiten) posten. Man kann ihnen das nicht verdenken, da es wahrscheinlich etwas ist, das DreamWeaver generiert hat, und sie keine Ahnung haben, was der Code bedeutet.
Bei Anfängern ist es am besten so – indem sie den von ihnen bereitgestellten Code auf den Teil reduzieren, der ihrer Meinung nach problematisch ist, schließen sie normalerweise das Problem aus.
Entweder das, oder sie „theoretisieren“ das Problem so weit, dass man ihre Frage nicht einmal mehr verstehen kann.
Wenn ich ihnen helfen will, wühle ich lieber durch ihren gesamten Code und finde das Problem selbst. Ansonsten ist es nur ein Ratespiel.
Danke für die tollen Infos. Ich hatte vor ein paar Tagen ein Problem, und das hier hätte sehr geholfen, da ich diesen glasigen Blick hatte, als ich nach dem Problem suchte!
Das ist ein großartiger Artikel. Manchmal, je nach Situation, baue ich einen bestimmten Codeabschnitt, der meiner Meinung nach etwas knifflig sein wird, baue ihn auf und bringe ihn unabhängig zum Laufen, bevor ich ihn in mein Projekt integriere. Das reduziert die Fehlersuche meiner Erfahrung nach.
Tolle Empfehlungen.
Ich mache etwas Ähnliches, wenn ich mit Browserproblemen bei CSS konfrontiert bin. Ich beginne mit dem obersten Container und blende ihn mit `display:none` aus. Wenn der Fehler verschwindet, weiß ich, dass er sich irgendwo in diesem Container befindet. Dann gehe ich Schicht für Schicht nach unten und blende Elemente aus, bis ich finde, was das Problem tatsächlich verursacht. Normalerweise kann ich verrückte Fehler damit in 5 Minuten oder weniger beheben :)
Ja, CSS tut nicht, was ich denke, besonders bei IE6. Ich verwende „float:left“ oder „clear:both“, um das zu tun. Es ist wirklich eine gute Methode, Dropbox zum Online-Stellen zu nutzen. Aber Leute aus China können Dropbox nicht direkt aufrufen, genauso wie Blogger, Twitter, Facebook.
Guter Punkt. Ich habe darüber nachgedacht, wie ich das Gleiche sagen kann.
Wenn ich etwas wirklich Kompliziertes programmiere, bekomme ich am Ende RIESIGE Gewinne, indem ich mir die Zeit nehme, es in eine SEHR einfache kleine `test.html`, `test.js`-artige Sache aufzuteilen ... und mich auf das EXAKTE Problem zu konzentrieren, auf eine sehr einfache, reduzierte Weise.
Ich sehe, dass neuere Programmierer das nicht verstehen. Sie verlieren sich ... sie sind verwirrt. Das größte Problem ist „nicht im Kaninchenbau verloren gehen“. Wenn Sie das können, ist alles in Ordnung.
Code ist wirklich kompliziert, auch wenn Sie denken, Sie wären ein Genie. Wenn Sie die kognitive Gesamtbelastung reduzieren, wird es bemerkenswert schneller gehen.
Das ist der beste Ansatz für Probleme. Ich könnte nicht mehr zustimmen.
Sie können dem Problem eine völlig neue Perspektive geben und es sogar besser machen als ursprünglich konzipiert.
Sehr guter Rat! Ich selbst mache das seit Jahren, ohne jemals daran zu denken, diesen Tipp weiterzugeben…
Das ist die Art von Rat, die im Web fehlt: Wie man einen Fisch fängt. Hören Sie auf, Fische zu verschenken!
Guter Tipp(s). Und 1000 Zeilen CSS in ein Forum posten? Igitt! Wenigstens ist CSS kinderleicht. 1000 Zeilen Perl in einem Forum könnten mir Angst machen, aber wer Hilfe beim Finden eines Fehlers sucht, sollte niemals so viel von irgendetwas posten!
Sehr schöne Tipps, vielen Dank
Ausgezeichneter Artikel, danke fürs Teilen, gute Arbeit.
Ich mache das Gleiche!
Ich kopiere die Seite, entferne den unnötigen Code und gebe ihr einen eindeutigen „Test“-Namen wie `index_test.php`, damit ich weiß, dass ich sie später löschen muss.
Das ist ausgezeichneter Rat. Ich wäre überrascht, wenn jemand, der das Programmieren lernt, diese Methode nicht ziemlich oft anwendet.
Ich habe dem vorher nie einen Namen gegeben. Es klingt viel besser, wenn man erklärt, dass es ein Problem gibt und man an einem reduzierten Testfall arbeitet, um das Problem zu lösen.
Danke für die Terminologie!
Genialer Beitrag. Vielen Dank, Kumpel
Das ist in der Regel ein guter Rat für viele Arten von Programmierung, nicht nur für Webentwicklung.
Eine leichte Variante dieses Ansatzes ist die Verwendung von etwas wie jsFiddle. Es hat separate Textfelder für Ihr JavaScript, CSS und HTML. Wenn Sie das Problem dort reproduzieren können, dann können Sie sehr einfach Änderungen vornehmen und sie aktualisieren, und Sie können Ihre Fiddles mit anderen teilen.
Neben dem CSS-Tricks-Forum gibt es auch Stack Overflow und doctype, um schnelle Antworten auf Ihre Probleme zu erhalten…
Großartige Ratschläge, ich gehe selten in Foren um Hilfe zu suchen, aber das ist eine Technik, die wir bei der Backend-Entwicklung viel anwenden. Es ist viel einfacher, einen Fehler in ein oder zwei Zeilen zu erkennen als in 20.
Danke für die Checkliste!
Gut, es ist nützlich für mich, danke