Debugging-Tipps und -Tricks

Code zu schreiben ist nur ein kleiner Teil dessen, was einen Entwickler ausmacht. Um in unserem Beruf effizient und fähig zu sein, müssen wir auch im Debuggen hervorragend sein. Wenn ich mir etwas Zeit nehme, um neue Debugging-Fähigkeiten zu erlernen, stelle ich oft fest, dass ich mich viel schneller bewegen und mehr Wert für die Teams, in denen ich arbeite, schaffen kann. Ich habe ein paar Tipps und Tricks, auf die ich mich ziemlich stark verlasse und die ich in Workshops immer wieder weitergebe. Hier ist also eine Zusammenstellung einiger davon, sowie einige aus der Community. Wir beginnen mit einigen Kernprinzipien und gehen dann zu spezifischeren Beispielen über.

Hauptkonzepte

Problem isolieren

Isolation ist wahrscheinlich eines der stärksten Kernprinzipien im Debugging. Unsere Codebasen können riesig sein, mit verschiedenen Bibliotheken, Frameworks, und sie können viele Mitwirkende umfassen, sogar Leute, die nicht mehr am Projekt arbeiten. Das Isolieren des Problems hilft uns, unwesentliche Teile des Problems langsam abzutragen, damit wir uns einzeln auf eine Lösung konzentrieren können.

Einige der Vorteile der Isolation umfassen, sind aber nicht beschränkt auf

• Feststellen, ob es tatsächlich die Grundursache ist, die wir denken, oder eine Art Konflikt
• Bei zeitbasierten Aufgaben verstehen, ob eine Race Condition vorliegt oder nicht
• Einen genauen Blick darauf werfen, ob unser Code vereinfacht werden kann, was sowohl beim Schreiben als auch beim Warten helfen kann
• Es entwirren und sehen, ob es ein Problem oder vielleicht mehrere sind

Es ist sehr wichtig, das Problem reproduzierbar zu machen. Ohne die Möglichkeit, genau zu erkennen, was das Problem ist, und es reproduzieren zu können, ist es sehr schwierig, es zu lösen. Dies ermöglicht es Ihnen auch, es mit einem funktionierenden, ähnlichen Modell zu vergleichen, damit Sie sehen können, was sich geändert hat oder was zwischen den beiden unterschiedlich ist.

Ich habe viele verschiedene Methoden der Isolation in der Praxis. Eine besteht darin, einen reduzierten Testfall auf einer lokalen Instanz oder einem privaten CodePen oder einem JSBin zu erstellen. Eine andere besteht darin, Breakpoints im Code zu setzen, damit ich sehen kann, wie er schrittweise ausgeführt wird. Es gibt einige Möglichkeiten, Breakpoints zu definieren

Sie können buchstäblich debugger; inline in Ihren Code schreiben. Sie können sehen, wie dies kleine Stücke einzeln auslöst.

Sie können dies in Chrome DevTools noch einen Schritt weiter gehen und sogar die nächsten ausgelösten Ereignisse durchlaufen oder spezifische Event-Listener auswählen

Der gute alte console.log ist eine Form der Isolation. (Oder echo in PHP, oder print in Python usw.). Sie nehmen ein winziges Stück Ausführung und testen Ihre Annahmen oder prüfen, ob etwas verändert wird. Dies ist wahrscheinlich die zeitgeprüfteste Form des Debuggens, die unabhängig davon, wie fortschrittlich Sie werden, immer noch ihre Verwendung hat. Pfeilfunktionen in ES6 haben es uns auch ermöglicht, unser Konsolen-Debugging-Spiel zu verbessern, da es jetzt viel einfacher ist, nützliche Einzeiler in der Konsole zu schreiben.

Die Funktion console.table ist ebenfalls ein Lieblingswerkzeug von mir, besonders gut, wenn Sie viele Daten darstellen müssen - große Arrays, große Objekte und dergleichen. Die Funktion console.dir ist ebenfalls eine nette Alternative. Sie protokolliert eine interaktive Auflistung der Eigenschaften eines Objekts.

Seien Sie methodisch

Wenn ich Workshops gebe und Studenten in meiner Klasse helfe, ist das Wichtigste, was sie beim Versuch, ein Problem zu debuggen, zurückhält, dass sie nicht methodisch genug sind. Das ist wirklich eine Schildkröte-und-der-Hase-Situation. Sie wollen verständlicherweise schnell vorankommen, also ändern sie viele Dinge auf einmal, und wenn dann etwas nicht mehr funktioniert, wissen sie nicht, welche Änderung den Fehler verursacht hat. Dann ändern sie zum Debuggen viele Dinge auf einmal und verlieren sich ein wenig darin, herauszufinden, was funktioniert und was nicht.

Das tun wir alle bis zu einem gewissen Grad. Wenn wir mit einem Werkzeug versierter werden, können wir mehr und mehr Code schreiben, ohne eine Annahme zu testen. Aber wenn Sie neu in einer Syntax oder Technologie sind, ist es vorteilhaft, langsam und vorsichtig zu sein. Sie haben eine viel bessere Chance, ein Problem, das Sie sich selbst unwissentlich zugezogen haben könnten, rückgängig zu machen. Und tatsächlich mag es zwar langsamer erscheinen, wenn Sie ein Problem nacheinander beheben, aber es deckt genau auf, welche Änderungen vorgenommen wurden und wo der Fehler liegt, auf eine Weise, die ein *scheinbar* schnelleres Tempo nicht zulässt. Ich sage scheinbar, weil die Zeit auf diese Weise nicht wirklich wieder gutgemacht wird.

Erinnern Sie sich, als Sie ein Kind waren und Ihre Eltern sagten: "Wenn du dich verlaufst, bleib, wo du bist?" Meine Eltern taten es zumindest. Das liegt daran, dass wir, wenn sie nach mir suchten und ich mich auch bewegte, um sie zu finden, weniger Chancen hatten, uns zu begegnen. Code funktioniert genauso. Je weniger bewegliche Teile Sie haben, desto besser - je konsistentere Ergebnisse Sie erzielen, desto einfacher wird es sein, Dinge zu verfolgen. Versuchen Sie also beim Debuggen, nichts zu installieren oder neue Abhängigkeiten hinzuzufügen. Wenn Sie jedes Mal einen anderen Fehler sehen, sollten Sie ein statisches Ergebnis erhalten. Das ist ein großes Warnsignal, dem Sie mit Ihrem Spürhut auf der Nase nachgehen sollten.

Wählen Sie gute Werkzeuge

Es gibt eine Million verschiedener Werkzeuge zur Lösung einer Vielzahl von Problemen. Ich werde einige der Werkzeuge durchgehen, die ich am nützlichsten finde, und dann verlinken wir zu einer Fülle von Ressourcen.

Syntaxhervorhebung

Sicher, es macht verdammt viel Spaß, die neuesten und besten Farben und Geschmacksrichtungen für Ihr Syntaxhervorhebungsthema auszuwählen, aber etwas Zeit für Klarheit hier zu investieren, ist wichtig. Ich wähle oft dunkle Themen, bei denen ein Syntaxfehler meinen gesamten Code heller färbt. Ich finde Fehler sind sofort sehr leicht zu erkennen. Ich mag Oceanic Next oder Panda, aber wirklich, jedem das Seine. Es ist wichtig zu bedenken, dass beim Suchen nach einem guten Syntaxhervorheber das Aussehen großartig ist, aber die Funktionalität, Ihre Fehler hervorzuheben, am wichtigsten ist, und es ist absolut möglich, beides zu tun.

Linting

Linting hilft, verdächtigen Code zu kennzeichnen und Fehler hervorzuheben, die wir vielleicht übersehen haben. Linting ist unglaublich wichtig, aber welche Linter Sie wählen, hängt stark davon ab, in welcher Sprache/welchem Framework Sie schreiben, und darüber hinaus, welchem vereinbarten Code-Stil Sie folgen.

Verschiedene Unternehmen haben unterschiedliche Code-Stile und Regeln. Persönlich mag ich AirBnB's, aber seien Sie vorsichtig und verwenden Sie nicht einfach irgendeinen alten Linter. Ihr Linter erzwingt Muster, die, wenn Sie sie selbst nicht erzwingen wollen, Ihren Build-Prozess verlangsamen können. Ich hatte einen CSS-Linter, der sich beschwerte, wenn ich einen Browser-Hack schrieb, und musste ihn so oft umgehen, dass er nutzlos wurde. Aber ein guter Linter kann kleine Fehler beleuchten, die Sie vielleicht übersehen haben.
Hier sind einige Ressourcen

• Ich habe kürzlich diesen Linter für responsive Bilder gefunden, der Ihnen sagt, welche Möglichkeiten Sie haben, picture, srcset oder sizes zu verwenden.
• Hier ist ein ziemlich guter Überblick über einige JS-Linter

Browser-Erweiterungen

Erweiterungen können wirklich großartig sein, weil sie so leicht aktiviert und deaktiviert werden können und weil sie mit sehr spezifischen Anforderungen arbeiten können. Wenn Sie mit einer bestimmten Bibliothek oder einem Framework arbeiten, ist es wahrscheinlich, dass die Aktivierung ihrer Erweiterung für DevTools Ihnen alle möglichen Klarheiten verschafft, die Sie sonst nicht finden würden. Seien Sie jedoch vorsichtig - Erweiterungen können nicht nur einen Browser verlangsamen, sondern sie haben auch die Berechtigung, Skripte auszuführen. Machen Sie sich also ein wenig schlau über den Autor der Erweiterung, Bewertungen und den Hintergrund. Trotzdem sind hier einige meiner Favoriten

• Barrierefreiheitserweiterung von Dequeue Systems
• React DevTools meiner Meinung nach unerlässlich, wenn Sie mit React arbeiten, um deren virtuellen DOM zu sehen
• Vue DevTools gleiche Empfehlung wie oben.
• Codopen: bringt Sie aus dem Editor-Modus in ein Debugging-Fenster für CodePen. Vollständige Offenlegung: Mein Mann hat dies als Geschenk für mich gemacht, weil er es satt hatte, mir beim manuellen Öffnen des Debugging-Fensters zuzusehen (bestes Geschenk aller Zeiten!)
• Pageruler: ermittelt Pixelabmessungen und misst alles auf einer Seite. Ich mag dieses, weil ich superanalytisch bei meinem Layout bin. Das hilft mir, das Biest zu füttern.

DevTools

Dies sind wahrscheinlich die offensichtlichsten Debugging-Tools, und es gibt so viele Dinge, die Sie damit tun können. Sie können so viele integrierte Funktionen haben, die leicht zu übersehen sind. Im nächsten Abschnitt mit spezifischen Tipps werden wir einige Favoriten eingehend behandeln.

Umar Hansa hat großartige Materialien, um zu lernen, was die DevTools können. Er hat einen wöchentlichen Newsletter und GIFs, einen neuen Kurs, der im letzten Abschnitt verlinkt ist, und einen Artikel auf unserer Website.

Eine meiner liebsten neueren ist diese CSS-Tracker-Erweiterung, die hier mit Erlaubnis von Umar gezeigt wird. Diese zeigt das gesamte ungenutzte CSS, damit Sie die Leistungsauswirkungen verstehen können.

Diverse Werkzeuge

• What input ist ein globales Hilfsprogramm zur Verfolgung der aktuellen Eingabemethode (Maus, Tastatur oder Touch) sowie der aktuellen Absicht - dies kann sehr gut zur Aufdeckung von Barrierefreiheitsproblemen sein (Huttipp an Marcy Sutton, Barrierefreiheitsexpertin für diesen Tipp)
• Ghostlabapp ist ein ziemlich schickes Werkzeug, wenn Sie responsive Entwicklung betreiben oder etwas auf einer Vielzahl von Geräten testen. Es bietet synchronisierte Webentwicklung, -tests und -inspektion.
• Eruda ist ein großartiges Werkzeug, das beim Debuggen auf Mobilgeräten hilft. Ich mag es sehr, weil es einen Simulator einen Schritt weiter bringt, eine Konsole und echte Devtools bietet, um Ihnen zu helfen, Verständnis zu gewinnen.

Spezifische Tipps

Ich bin immer daran interessiert, was andere Leute zum Debuggen tun, also habe ich die Community über den CSS-Tricks-Account und meinen eigenen gefragt, was sie wirklich mögen. Diese Liste ist eine Mischung aus Tipps, die mir gefallen, sowie eine Zusammenfassung von Tipps aus der Community.

Barrierefreiheit (Accessibility)

$('body').on('focusin', function() {
  console.log(document.activeElement);
});

Dies protokolliert das aktuell fokussierte Element, nützlich, da das Öffnen der Devtools den `activeElement` verwischt

–Marcy Sutton

CSS-Debugging

Wir haben eine ganze Reihe von Antworten erhalten, dass Leute rote Rahmen auf Elemente setzen, um zu sehen, was sie tun.
https://twitter.com/malchata/status/842029469246324736
Das mache ich auch, ich habe sogar eine kleine CSS-Datei, die ein paar Klassen einführt, auf die ich leicht zugreifen kann, um verschiedene Farben zu erhalten.

Statusprüfung in React

@sarah_edo <pre>{JSON.stringify(this.state, null, 2)}</pre>

— MICHAEL JACKSON (@mjackson) 15. März 2017

Lob an Michael, dies ist eines der nützlichsten Debugging-Tools, die ich kenne. Dieser Ausschnitt "pretty prints" den Status der Komponente, mit der Sie arbeiten, auf die Komponente, damit Sie sehen können, was vor sich geht. Sie können validieren, dass der Status so funktioniert, wie Sie es erwarten, und es hilft, Fehler zwischen dem Status und der Art und Weise, wie Sie ihn verwenden, aufzudecken.

Animation

Wir erhielten viele Antworten, dass sie die Animation stark verlangsamen.

@sarah_edo @Real_CSS_Tricks * { animation-duration: 10s !important; }

— Thomas Fuchs (@thomasfuchs) 15. März 2017

Ich habe dies in einem Beitrag erwähnt, den ich hier auf CSS Tricks über das Debuggen von CSS Keyframe-Animationen geschrieben habe. Es gibt noch weitere Tipps, z. B. wie man hardwarebeschleunigt, oder wie man mit mehreren Transformationen in verschiedenen Prozentwerten arbeitet.

Ich verlangsame auch meine Animationen in JavaScript - in GreenSock sähe das so aus: timeline.timeScale(0.5) (Sie können die gesamte Timeline verlangsamen, nicht nur einzelne Elemente, was sehr nützlich ist), in mo.js sähe das so aus {speed: 0.5}.

Val Head hat einen großartigen Screencast, der sowohl Chrome als auch Firefox Devtools für Animationen behandelt.

Wenn Sie die Chrome Devtools Timeline für Performance-Audits verwenden möchten, ist es erwähnenswert, dass das Painting die teuerste der Aufgaben ist. Wenn alles andere gleich ist, achten Sie etwas genauer auf einen hohen Prozentsatz davon.

Überprüfung verschiedener Verbindungsgeschwindigkeiten und Lasten

Ich arbeite normalerweise mit schnellen Verbindungen, daher drossle ich meine Verbindung, um zu prüfen, wie die Leistung für Leute aussehen würde, die nicht meine Internetgeschwindigkeit haben.

Dies ist auch in Verbindung mit einem Hard-Reload oder mit geleertem Cache nützlich

@sarah_edo Kein so geheimer Trick. Aber viele Leute sind sich immer noch nicht bewusst. Sie brauchen offene DevTools und klicken dann mit der rechten Maustaste auf den Aktualisieren-Button. pic.twitter.com/FdAfF9Xtxm

— David Corbacho (@dcorbacho) 15. März 2017

Timed Debugger setzen

Dieser Tipp stammt von Chris. Wir haben dazu eine ausführliche Abhandlung direkt hier.

setTimeout(function() {
  debugger;
}, 3000);

Es ähnelt dem `debugger;`-Tool, das ich bereits erwähnt habe, außer dass Sie es in eine `setTimeout`-Funktion einfügen und noch feinere Informationen erhalten können.

Simulatoren

@Real_CSS_Tricks Und nur für den Fall, dass einige Mac-Benutzer dies nicht wussten: iOS-Simulator + Safari ist großartig. pic.twitter.com/Uz4XO3e6uD

— Chris Coyier (@chriscoyier) 15. März 2017

Ich habe vorhin Simulatoren mit Eruda erwähnt. iOS-Benutzer erhalten auch einen ziemlich guten Simulator. Ich wollte Ihnen sagen, dass Sie zuerst XCode installieren müssen, aber dieser Tweet zeigte einen anderen Weg.

@chriscoyier @Real_CSS_Tricks Oder Sie können diesen Ansatz verwenden, wenn Sie sich nicht mit der Installation von xCode herumschlagen möchten: https://#/WtAnZNo718

— Chris Harrison (@cdharrison) 15. März 2017

Chrome hat auch eine Geräte-Umschaltfunktion, die hilfreich ist.

Remote Debugger

@chriscoyier @Real_CSS_Tricks https://#/q3OfWKNlUo ist ein gutes Werkzeug.

— Gilles 💾⚽ (@gfra54) 15. März 2017

Dieses Werkzeug kannte ich tatsächlich nicht, bis ich diesen Tweet gesehen habe. Ziemlich nützlich!

CSS Grid Debugging

Rachel Andrew hielt eine Präsentation bei Smashing und erwähnte ein kleines Waffel-Ding, auf das man in Firefox klicken kann, das die Ränder im Grid hervorhebt. Ihr Video erklärt es sehr eloquent.

Array-Debugging

Wes Bos mit einem sehr nützlichen Tipp zum Suchen eines einzelnen Elements in einem Array

Wenn Sie nur nach einem einzelnen Element suchen, ist `array.find()` 🔥 https://#/AuRtyFwnq7

— Wes Bos (@wesbos) 15. März 2017

Weitere Debugging-Ressourcen

Jon Kuperman hat einen Frontend Masters-Kurs, der Ihnen helfen kann, DevTools zu meistern. Er begleitet diese App.

Es gibt einen kleinen Kurs bei Code School namens Discover DevTools.

Umar Hansa hat einen neuen Online-Kurs namens Modern DevTools.

Julia Evans hat einen großartigen Artikel über das Debuggen hier, Huttipp an Jamison Dance, der ihn mir gezeigt hat.

Paul Irish macht fortgeschrittene Performance-Audits mit Devtools, wenn Sie super nerdy sind wie ich und in die Timeline eintauchen wollen.

Schließlich füge ich eine bittersüße Ressource hinzu. Mein Freund James Golick, ein exzellenter Programmierer und noch besserer Mensch, hielt vor vielen Jahren einen großartigen Konferenzvortrag über das Debuggen von allem. Leider ist James verstorben, aber wir können immer noch seiner Erinnerung Ehre erweisen und von ihm lernen.