Egal, ob Sie Anfänger oder Profi sind, die Fehlerbehebung bei HTML und CSS kann sehr schwierig sein, wenn Sie nicht richtig ausgerüstet sind. Heute werden wir uns ein paar Tools ansehen, mit denen Sie diese nervige Webseite zur Übergabe zwingen können.
Die Standard-Browser-Tools
Bevor wir uns mit Tools, Anwendungen und Erweiterungen von Drittanbietern beschäftigen, sollten Sie die Tools, die Ihnen zur Verfügung stehen, direkt in Ihrem Browser überprüfen. Bei den meisten modernen Browsern sind einige Entwicklertools direkt in die Benutzeroberfläche integriert.
Werfen wir einen kurzen Blick auf einige der Tools, die Safari für Entwickler zur Verfügung stellt.
Debuggen in Safari
Die standardmäßigen Entwicklungswerkzeuge von Safari sind viel stärker, als die meisten Leute ihnen danken. Um sie zu aktivieren, gehen Sie zu den Safari-Einstellungen und aktivieren Sie das Kontrollkästchen unter "Erweitert". Registerkarte mit der Meldung? Entwicklungsmenü in der Menüleiste anzeigen.? Gehen Sie nun im Menü "Entwickeln" zu "Webinspektor anzeigen".
Daraufhin sollte ein Menü am unteren Rand Ihres Fensters erscheinen, das unzählige großartige Optionen zum Überprüfen und Debuggen von Webseiten enthält. Heute konzentrieren wir uns auf zwei Schlüsselbereiche, die Tools für Ihren Debugging-Prozess enthalten: Ressourcen und Elemente.
Auf der Registerkarte Ressourcen sehen Sie alle Dateien, aus denen sich die Website zusammensetzt. Dazu gehören Skripte, Bilder, HTML, CSS usw. Sie können auch sehen, wie lange das Laden jedes Elements dauert und ob während des Ladevorgangs Fehler auftreten.
Auf der Registerkarte Elemente sehen Sie eine erweiterbare Gliederung Ihres HTML-Codes:
Hier können Sie über Teile des Codes fahren und diese auf der oben genannten Site hervorheben. Sie können auch auf die Lupe unten klicken, um direkt alles auszuwählen, was Sie auf der Webseite zur Inspektion sehen. In dem hervorgehobenen Teil der Seitenvorschau können Sie die Auffüllung und die Ränder sehen, die dieses Element betreffen.
Durch Doppelklick auf einen beliebigen Teil des HTML-Codes können Sie alles ändern, was Sie möchten. Beachten Sie, dass dies sichere, nicht permanente Änderungen sind, die nur eine Vorschau der Unterschiede anzeigen, ohne dass dies Auswirkungen auf Ihre Originaldatei hat.
Wenn Sie einen Abschnitt oder ein Objekt ausgewählt haben, können Sie alle mit diesem Objekt verbundenen Stile ganz rechts im Fenster sehen.
Wie beim HTML-Code können Sie debuggen und experimentieren, indem Sie hier Ihre Stile bearbeiten (Doppelklick). Wenn Sie beispielsweise die Farbe des Kopfzeilentexts in Gelb ändern möchten, doppelklicken Sie einfach auf? Weiß? und geben Sie einen neuen Wert ein. Sie können die kleinen Kontrollkästchen auch verwenden, um Teile des Codes für weitere Flexibilität beim Debuggen zu deaktivieren.
Klicken Sie schließlich auf die kleine Stoppschildform mit einem? X? In der unteren rechten Ecke des Bildschirms können Sie alle Fehler sehen, die beim Laden der Seite auftreten (wie oben erwähnt, können Sie diese auch unter Ressourcen sehen).
Wie Sie sehen, ist Safari ein hervorragendes HTML / CSS-Debugging-Tool für sich. Sie können alle zugehörigen Dateien anzeigen und sehen, wie sie geladen werden, einzelne Elemente genau untersuchen, sowohl HTML als auch CSS direkt im Browserfenster bearbeiten und Fehler auswerten.
Debuggen in anderen Browsern
In diesen Artikeln finden Sie weitere Informationen zur Verwendung der Standardentwicklertools in anderen Browsern:
- Webentwicklung mit Firefox
- Entdecken Sie die Internet Explorer Developer Tools
- Opera-Entwicklerwerkzeuge
Feuerfieber
Debugging-Tools können Sie einfach nicht diskutieren, ohne Firebug aufzurufen. Es wird weithin als die beste Option angesehen, um CSS im Browser zu optimieren.
Firebug ist ein kostenloses Add-On für Firefox und enthält zahlreiche leistungsstarke und benutzerfreundliche Funktionen für Webentwickler. Klicken Sie auf das Bild, um die Website herunterzuladen und das Add-On herunterzuladen.
Sobald Sie Firebug installiert und aktiviert haben, wird ein sehr ähnliches Fenster wie in Safari angezeigt, das sich am unteren Rand des Bildschirms befindet. Wie bei Safari gibt es eine schöne Gliederung Ihrer HTML-Datei mit auswählbaren Teilen und intelligenter Hervorhebung in der Vorschau. Hier übertrumpft Firebug Safari jedoch durch Farbcodierung der Ränder und Auffüllung in der Website-Vorschau, um die visuelle Orientierung zu erleichtern.
Wenn Sie auf einen Abschnitt klicken, wird das zugehörige CSS auf der rechten Seite angezeigt.
Alternativ können Sie auf die Registerkarte CSS klicken und Ihre gesamte CSS-Datei in einer vollständig bearbeitbaren Ansicht anzeigen. Wie bei Safari stellen die hier vorgenommenen Änderungen keine tatsächlichen Änderungen an der Datei dar. Sie dienen lediglich der Flexibilität beim Debuggen und Experimentieren.
Dies kratzt nur an der Oberfläche dessen, was Firebug kann. Es gibt viele erweiterte Funktionen für neue und erfahrene Profis. Unabhängig davon, ob Sie ein engagierter Firefox-Benutzer sind oder nicht, sollten Sie Firebug wirklich selbst ausprobieren.
Firebug Lite
Mit dem neuen und verbesserten Safari 5-Erweiterungssystem werden wir hoffentlich bald ein offizielles Firebug-Plugin oder ein ähnliches Drittanbieter-Plugin sehen. In der Zwischenzeit können Sie jedoch mit einem anderen Browser Firebug Lite verwenden, ein Bookmarklet mit vielen (wenn auch definitiv nicht allen) gleichen Funktionen wie Firebug.
Xyle Scope
Cultured Code, die Entwickler der erstaunlichen Produktivitäts-App "Things"? eine beeindruckende kleine Anwendung zum Debuggen und Optimieren Ihrer Webseiten erstellt. Xyle Scope kostete früher 20 US-Dollar, wurde jedoch kürzlich zum kostenlosen Download.
Sie finden auf der Cultured Code-Homepage keinen Link dazu. Ich könnte mir vorstellen, dass sie die Entwicklung für Xyle Scope angesichts des massiven Erfolgs von Things eingestellt haben. Hier ist ein direkter Link zur Download-Seite.
Xyle Scope bietet eine schöne Ansicht mit geteilten Fenstern, links die Website-Vorschau und rechts alle Werkzeuge. Sie können Elemente direkt in der Überprüfung auswählen und alle zugehörigen Attribute anzeigen. Hier gibt es eine Menge Informationen, die untersucht werden müssen, einschließlich der Kaskadenreihenfolge, der angewendeten Stile, der Auswahlelemente, der Seitenhierarchie und mehr. Wie bei Firebug können Sie mit Xyle Scope visuell zwischen den Rändern und der Auffüllung eines Elements unterscheiden.
Sie können beliebige Stile anpassen und die Änderungen sogar speichern. Xyle Scope ist ein äußerst hilfreiches und unterbewertetes Werkzeug zum Anpassen von HTML und CSS. Es ist wirklich bedauerlich, dass möglicherweise keine weiteren Updates für die Unterstützung von CSS3 und HTML 5 angezeigt werden. Wenn jemand anders weiß, lass es mich wissen!
CSS-Debug-Snippet
Das letzte Debugging-Tool, das wir uns ansehen, ist ein cleverer kleiner Hack, den Sie sofort auf Ihr CSS anwenden können, um die Schichtung der Elemente auf der Seite zu untersuchen. Ich bin mir nicht sicher, wer zuerst daran gedacht hat, aber ich habe den Ausschnitt auf einer Reihe von Websites im Internet gesehen (ich habe ihn ursprünglich dort gefunden).
Chris Page beschreibt die Snippets-Funktionalität auf folgende Weise:? Ich verwende das folgende CSS-Element, um die Struktur eines XHTML-Dokuments (oder HTML-Dokuments) zu visualisieren, indem der Rand jedes Elements farbig umrandet wird. Auf jeder Ebene der Hierarchie ändert sich die Farbe, sodass Sie sehen können, wann? Tiefe? Änderungen.?
Die resultierende Seite sollte ungefähr so aussehen wie das Bild unten:
Es gibt auch eine etwas andere Version, bei der ein Hover-Element auf jede Zeile angewendet wird, sodass Sie nur die gepunkteten Linien sehen, wenn Sie mit der Maus über einen bestimmten Abschnitt fahren. Ansonsten erscheint die Seite normal.
Schlussgedanken
Zusätzlich zu den oben genannten Tools sollten Sie immer sowohl CSS als auch HTML überprüfen. Auf diese Weise können Sie unzählige Probleme umgehen und Ihnen unkomplizierte Informationen zur besseren Codierung Ihrer Seiten geben.
Ich hoffe, dass die oben genannten Tools für Sie bei der Suche nach pixelgenauer Site-Gestaltung und Layout hilfreich sind. Teilen Sie uns im Kommentarbereich unten mit, welche Tools Sie zum Debuggen und Optimieren von HTML und CSS verwenden!