Macht ihr Fehler in eurem Code? Verwendet Web-Debugging-Tools und Ressourcen für die Überprüfung eurer Layouts
Selbst die geschicktesten Web-Entwicklung-Profis machen von Zeit zu Zeit Fehler. Ihr wisst ja selbst, wie kompliziert die Codierung sein kann. Es gibt immer eine Chance, dass etwas schief geht und zwar genau in dem Augenblick, wenn man denkt, dass das Projekt endlich abgeschlossen ist. Also der Testprozess einer Website, die bereits codiert ist und in einem Browser ausgeführt wird, ist schwer zu überschätzen. Nehmt euch Zeit und überprüft eure HTML, CSS oder JavaScript, um die komplette Kompatibilität mit allen Browsern und eine gute Wiedergabe auf allen gängigen Bildschirmgrößen zu gewährleisten.
In Wahrheit befindet sich Web-Technologie in ständiger Prozess der Entwicklung, deshalb ist es heutzutage viel einfacher, eure Website zu debuggen und das Layout zu testen, als es, sagen wir, noch vor einem Jahr war. Immer neue fortschrittliche Tools und Ressourcen erscheinen jeden Tag, die für diesen Zweck entwickelt wurden. Aus dieser Sicht sollte unser Blog-Beitrag ziemlich hilfreich sein, wenn ihr dabei seid, eure Website zu debuggen.
Er enthält über 20 aktuelle Web-Debugging-Tools und Ressourcen. Mit ihrer Hilfe werdet ihr in der Lage sein zu sehen, wie eure Website in verschiedenen Browsern und auf verschiedenen Bildschirmgrößen aussieht. Die unten aufgeführten Tools zeigen euch außerdem die Fehler im Code und identifizieren potenzielle Probleme, die in der Zukunft von Nachteil werden können. Also, seid ihr bereit, euer Layout zu überprüfen und herauszufinden, ob ein paar Fehler sich in eurem Code versteckt haben? Dann schaut euch gern die Liste unten durch und sucht euch das Tool aus, das euch am meisten gefällt.
* * *
Tools für Code-Validierungsarbeiten
Debug Tool Window zeigt die Ausgabe von der Debug-Sitzung für eure Anwendung. Wenn ihr mehrere Anwendungen debuggen möchtet, wird jede ihre Ausgabe in einem Tab nach der entsprechenden Debug-Konfiguration benannt.
* * *
Diese Erweiterung wurde für Entwickler und Web-Enthusiasten gemacht. Sie ermöglicht Benutzern, einfach die Seiten mit dem W3C HTML Validator zu überprüfen. Es ist sehr einfach zu bedienen. Klickt einfach auf den Button und die Seite wird gecheckt.
* * *
Möchtet ihr die Auszeichnungssprache eurer Web-Dokumente überprüfen? Checkt in solchem Fall dieses coole Tool. Es überprüft die Markup-Validität von Dokumenten, die in HTML, XHTML, SMIL, MathML usw. geschrieben sind.
* * *
Das Tool überprüft Cascading Style Sheets (CSS) und (X) HTML-Dokumente. Jetzt könnt ihr sogar den WW3C Validator Suite™ Premium-Service checken. Er überprüft die gesamte Website und bewertet seine Konformität mit W3C Standards, um die Schwachstellen eurer Website zu identifizieren.
* * *
Dieses Tool wird verwendet, um eure HTML-Dokumente aus der Adressleiste zu validieren. Alles ist ziemlich einfach. Klickt einfach auf das Symbol in der Adressleiste, um das aktuelle Dokument ohne die Seite zu verlassen zu validieren. Die Anzahl der Überprüfungsfehler werden im Tooltip angezeigt, und ihre Details werden auf der Registerkarte der Chrome-Entwickler-Tools zu sehen sein.
* * *
Überprüfung der Design-Responsivität
Gebt URL der Website in das Feld in der linken oberen Ecke der Seite ein und checkt, wie es auf verschiedenen Gerätebildschirmen dargestellt wird.
* * *
Hier könnt ihr sehen, wie eure Website auf den Bildschirmen der beliebtesten Geräte aussieht.
* * *
Überprüfung der Browser-Unterstützung
Mit Ghostlab testet ihr nicht nur das einfache Laden der Seite, sondern die komplette Benutzererfahrung. Der leistungsstarke eingebaute Web-Inspektor wird schnell auf den Grund jedes Problems gehen.
* * *
Viele Entwickler halten diesen Service für den Allerbesten und verlassen sich stark auf ihn. Es ist wirklich ein Muss für die meisten von ihnen! Damit seid ihr in der Lage, einen kurzen Blick auf die großen IE Bugs in verschiedenen Ausführungen zu werfen.
* * *
IE Tab für Chrome ist eine Browser-Erweiterung mit dem ihr Internet Explorer verwenden könnt, um Web-Seiten in einem Tab anzuzeigen. Es ist sinnvoll, wenn eine Web-Seite Internet Explorer Funktionen benötigt. Z. B. könnt ihr den IE Tab verwenden, um Webseiten anzuzeigen, die ActiveX-Steuerelemente benötigen, Webseiten mit IE-Rendering-Engine zu testen usw.
* * *
Live, Web-Based Browser Testing
Kurz gesagt, gibt euch dieses Werkzeug einen sofortigen Zugriff auf alle Desktop- oder mobile Browser.
* * *
Automated testing in the cloud for CI
Dieses Werkzeug ist perfekt zum Laufen von allen euren Tests auf einer einzigen leistungsfähigen Plattform.
* * *
Testet eure Website kostenlos in Dutzenden von Browsern und erhaltet sofortige Ergebnisse. Holt euch den Zugang zu mehr als 1 000 Kombinationen von Browsern und Betriebssystem-Plugins.
* * *
Gebt eure Website-URL in das entsprechende Feld ein, wählt den Browser und prüft die Kompabilität. Der Dienst verfügt über eine 7-Tage-Testversion.
* * *
Browserling ist durch HTML5 <canvas> und JavaScript angetrieben, so dass ihr etwas anderes gar nicht zu installieren braucht. Alle Verbindungen zwischen euch und Browserling sind SSL verschlüsselt, deswegen bleibt euer Surfen komplett anonym. Kostenloser Dienst ist verfügbar.
* * *
Keine Installationen erforderlich. Testet jeden Browser sofort online mit einen Klick.
* * *
Das Werkzeug wird für die automatische Kompatibilitätstests angewendet. Es prüft und berichtet über Cross-Browser-Layout-Unterschiede und Skriptfehler auf eurer Website.
* * *
Litmus ist das richtige Werkzeug für einen One-Stop-Browser-Test. Es bietet einen Cross-Browser-Seite-Test zusätzlich zu eurer E-Mail-Vorschau.
* * *
Damit könnt ihr die mobilen Versionen testen: IOS, Android und Blackberry - alle drei in einer Anwendung. Das Tool ermöglicht die Kompatibilitätsprobleme mit Leichtigkeit zu finden, sie direkt im Code zu sehen und bis zu 4 Browser parallel nebeneinander zu testen.
* * *
Haltet eure Website fehlerfrei mit diesem einfachen Service, der euch helfen wird, eure Website in verschiedenen Browsern 24 Stunden am Tag entweder automatisch oder manuell zu testen. Kostenlose Testversion verfügbar!
* * *
CSS & JS Debugging
Dies ist das JavaScript-Code-Qualitätstool. Um es einfach auszudrücken, hebt es Probleme in JavaScript-Programmen. JSLint hilft euch, in einer besseren Sprache programmieren und die meisten Fehler vermeiden zu können.
* * *
CSS Lint hat einen sehr ausdrucksvollen Slogan rausgebracht: "Es wird eure Gefühle verletzen* (und euch helfen, besser zu codieren)". Fügt die CSS in das Eingabefeld ein und checkt, ob etwas damit falsch ist.
* * *
Online Javascript Compression Tool
Dies ist ein Online-JavaScript-Kompressor, der euch JavaScript-Dateien zu komprimieren und zu verkleinern ermöglicht. Sie werden typischerweise bis zu 30-90% reduziert. Solche JavaScript-Dateien sind ideal für Produktionsumgebungen. Der größte Teil der Reduzierung der Dateigröße ist dank dem Entfernen der Kommentare und zusätzlicher Leerzeichen möglich, die nicht unbedingt so notwendig sind.
* * *
Hier findet ihr eine ganze Reihe von Tools, um verschiedene Dateiformaten zu verschönern, zu verkleinern, zu formatieren oder zu komprimieren.
* * *
Zum Abschluss möchten wir gerne euch einige Fragen stellen. Testet ihr immer die erstellten Layouts? Glaubt ihr, dass es wichtig ist? Habt ihr diesen Werkzeugsatz als hilfreich wahrgenommen? Vielleicht habt ihr einige der aufgelisteten Tools schon bereits benutzt und seid bereit, Ihr Feedback mit uns zu teilen? Wir freuen uns immer auf eure Kommentare!
Dieser Artikel wurde aus dem Englischen übersetzt. Das Original findet Ihr hier: Do You Make Mistakes in Your Code? Use Web Debugging Tools and Resources for Testing Layouts.
Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.