Firefox: Debugging-Tools nutzen

Mit Version 10 brachte der Browser Firefox einige Verbesserungen für Web-Entwickler mit sich. Vieles, was bisher nur durch das Plugin „Firebug“ erreicht werden konnte, kann Firefox selbst und manches davon sogar besser. Ohne die Installation von Firebug, ist der Browser dann natürlich auch noch schneller und somit wird das Entwickeln im Web etwas angenehmer.

Die wichtigsten Funktionen, welche man mit Firefox nun nativ abdecken kann, sind:

  • Debugging-Konsole zum Tracing von Log-Nachrichten
  • Einsicht von HTML Elementen
  • Ansehen/Verändern von CSS Styles
  • JavaScript-Debugging
  • Tests mit unterschiedlicher Bildschirmauflösungen

Gerade das Einsehen von HTML-Elementen setzt Firefox dabei sehr gut (sogar besser als Firebug) um. So gibt es eine 3D-Ansicht der gerenderten HTML-Elemente, welche darstellt die HTML-Blöcke einer Seite übereinander darstellt und somit die Verständlichkeit des Seitenaufbaues drastisch vereinfacht.
Die wichtigsten Tastenkürzel bei der Entwicklung sind:

  • Strg+Umschalten+K: Anzeigen der Debugging-Konsole
  • Strg+Umschalten+I: Einsicht der HTML-Elemente (inkl. Styles und 3D-Ansicht)
  • Strg+Umschalten+S: Web-Debugger (zum Debuggen von JavaScript-Code) öffnen
  • Strg+Umschalten+M: Aufruf des Tools zum Testen von verschiedenen Bildschirmgrößen

All diese Funktionen (und sogar noch ein paar mehr) sind natürlich auch im Firefox-Menü unter dem Punkt „Web-Entwickler“ aufrufbar.

Schreibe einen Kommentar