Nützliche Helfer zum Debuggen von Javascript, CSS, HTML & Co

18. Feb 2011

Dieser Artikel zeigt nützliche Helfer für den Aufbau und die Arbeit eines Projektes auf.

Häufig steht man bei Projektumsetzungen vor dem Problem, dass bestimmte (CSS) Formatierungen angepasst werden sollen, Javascript Fehler auftauchen oder sonstige Probleme mit der HTML-Struktur auftauchen. Hier bietet der Browser Mozilla Firefox wie auch Google Chrome einige nützliche Erweiterungen / Addons als Werkzeug an.

Erweiterungen zu Mozilla Firefox

Nachfolgend eine Auflistung von empfohlenen Firefox-Erweiterungen, die für eine Projektumsetzung/-anpassung auch in Weblication® CMS sehr dienlich sind:
(in Kursivschrift jeweils die Beschreibungen von der jeweiligen Homepage)

  • Firebug
    Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...
    siehe auch: getfirebug

  • Web Developer
    The Web Developer extension adds various web developer tools to a browser.

  • MeasureIt
    Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

  • Cache Status
    Easy cache status & management from status.

  • X-Ray
    See the tags on a page without viewing the sourcecode.

  • etc.

Diese Firefox-Addons können Sie einfach über den Browser im Menüpunkt 'Extras - Addons' installieren oder auch manuell von der Mozilla-Homepage herunterladen (siehe weiterführende Informationen).

Erweiterungen zu Google Chrome

Nachfolgend eine Auflistung von empfohlenen Chrome-Erweiterungen, die für eine Projektumsetzung/-anpassung auch in Weblication® CMS sehr dienlich sind:
(in Kursivschrift jeweils die Beschreibungen von der jeweiligen Homepage)

  • Entwicklertools
    Die Developertools sind in aktuellen Chrome-Versionen bereits standardmässig enthalten.
    siehe hierzu auch: Chrome Developer Tools - Google Developers 

  • Firebug Lite for Google Chrome (alternativ zu den Entwicklertools)
    Firebug Lite...

  • Web Developer
    Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

  • MeasureIt
    Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

  • etc.

Diese Chrome -Addons können Sie einfach über den Browser im Menüpunkt 'Google Chrome anpassen - Tools' oder auch manuell über die Google-Chrome-Seiten herunterladen (siehe weiterführende Informationen).

Entwicklerbereich Weblication® CMS - © Scholl Communications AG