Jeder Webanwendungsentwickler benötigt einen CSS- und HTML-Debugger , um die Produktivität zu steigern. Gegenwärtig enthalten die meisten Browser einen Debugger dieses Typs pro Defekt. Ich werde mich auf die beiden Browser konzentrieren, die am häufigsten von Blog-Nutzern verwendet werden, nämlich FireFox, dicht gefolgt von Chrome.
Um auf den Debugger zuzugreifen, klicken Sie einfach mit der rechten Maustaste auf ein Element des Webs, das Sie debuggen möchten (z. B. einen Link oder ein Bild), und wählen Sie die Option „Inspect element“.
Nachdem Sie die obigen Schritte ausgeführt haben, werden einige Symbolleisten mit CSS- und HTML-Code angezeigt, damit Sie sie überprüfen und debuggen und optimieren können. Wir können den Code sogar direkt ändern und das Ergebnis auf dem Bildschirm sehen.
Firefox CSS und HTML Debugger.
Der Debugger, den es standardmäßig bringt, ist ziemlich vollständig und einfach. Um alle Optionen auf dem Bildschirm anzuzeigen, müssen Sie “Stil” (ALT + S) und das “Markierungsfeld” (ALT + M) aktivieren. Es wird sowohl CSS- als auch HTML-Code angezeigt.
Eine Besonderheit des FireFox-Debuggers ist die „3D-Ansicht“, mit der wir die verschiedenen Ebenen von HTML-Elementen im Relief sehen und den Code auf intuitive und visuelle Weise verstehen können.
Als Standardwerkzeug ist es sehr gut und seine Verwendung kann Ihnen Arbeitsstunden ersparen.
Chrome und CSS CSS-Debugger.
Es ist ähnlich wie FireFox, aber die Benutzeroberfläche ist etwas anders. Es zeigt uns direkt den HTML-Code und das CSS. Es hat einen Vorteil gegenüber FireFox und zeigt Farben vom Hexadezimalwert in einem kleinen Quadrat an. Wenn wir auf dieses Quadrat klicken, können wir gleichzeitig in einem Farbwähler eine andere Farbe auswählen.
In Bezug auf die Funktionalität ist es komplexer als FireFox und bietet dem Entwickler mehr Optionen und Möglichkeiten, aber es ist komplexer.
Wenn Sie Chorme als Browser verwenden, ist der Standard-CSS- und HTML-Debugger ausreichend. Ich würde kein Plugin oder keine Erweiterung für ältere Benutzer verwenden.
FireBug der beste CSS- und HTML-Debugger.
Dieser Debugger wurde ursprünglich für FireFox entwickelt, obwohl es heute eine Lite-Version für Chrome gibt. Es muss gesagt werden, dass dieser Debugger sein volles Potenzial unter Verwendung von FireFox ausschöpft, was ich empfehle, da Sie in Chrome den Debugger als einen Effekt verwenden können, den der Browser bringt.
Zuerst müssen Sie FireBug auf FireFox von der offiziellen Website installieren .
Sobald die Anwendung installiert ist, ist es sehr einfach, mit der rechten Maustaste auf ein Element zu klicken und auf “Element mit FireBug untersuchen” zu klicken. Die beiden Bildschirme mit CSS-Code und HTML-Code werden angezeigt. Wir können FireBug auch über das neue Symbol aktivieren / deaktivieren, das in der FireFox-Symbolleiste oben rechts angezeigt wird.