Artikel mit Tag firebug

Firebug 1.10 - kein Neustart, kürzere Ladezeiten und weitere Funktionen für das Entwickler Plugin

Nachdem im Januar die letzte Version des Firefox Plugins veröffentlicht wurde, folgt nun mit Firebug 1.10 die nächste.

Das neue Tool bringt 15 große Änderungen bzw. neue Funktionen mit sich, wobei sich die meisten wohl über schnellere Ladezeiten des Firefox bei aktiviertem Add-on freuen dürften. Denn mit Version 1.10 wurde ein verzögertes Nachladen implementiert, was für mehr Geschwindigkeit sorgt.
Daneben wurde gleichzeitig auf eine Bootstraped Installation umgestellt, was dem Anwender den Neustart bei der Installation erspart, sehr praktisch.

firebug

Alles weiteren Neuerungen beziehen sich auf die Kernfunktionen des Firebugs, so kann nun praktischerweise zwischen dem Farbcodierungsformat hin und her geschaltet werden.

Farben-Format

Auch ganze CSS Regeln kann das Tool deaktivieren oder per Autovervollständigung einfach befüllen. Alle Features sind ausführlich bei Mozilla Hacks beschrieben.

  • Bootstrapped Installation
  • Delayed Load
  • Cookies
  • Command Editor Syntax Highlighting
  • Autocompletion
  • Trace Styles
  • New Command: help
  • Link to Web-font Declaration
  • Support For Media Queries
  • Displayed Entities Format
  • Displayed Color Format
  • Tooltips for Menu Items
  • Support for “focus” CSS pseudo class
  • HTTP Requests From BFCache
  • Delete CSS Rule

Download Firebug

Praktische Tools um Schriftarten auf Webseiten zu erkennen

Nicht nur für Webdesigner ist es interessant zu wissen welche Schrift eine Webseite verwendet. Um nicht gleich in den Quellcode schauen zu müssen gibt es verschieden Möglichkeiten beziehungsweise Tools um Schriftarten von Webseiten auszulesen.

WhatFont

WhatFont ist eine einfache Erweiterung für Chrome, die sich als Button in die Add-on Leiste einbindet. Sobald das Tool per Klick aktiviert wurde, muss nur noch der Mauszeiger auf das gewünschte Schriftbild der Webseite gezogen werden und die Schriftart wird angezeigt. Wer mehr Informationen wie Schriftgröße, Schriftfamilie oder Farbcode möchte benötigt einen weiteren Mausklick um ein nettes InfoPopup einzublenden.

whatfont

Für Firefox Nutzer steht ein Bookmarklet zur Verfügung, welches gleiche Funktionalität wie die Erweiterung bietet.

Download

Font Finder

Wer für den Firefox Browser lieber eine Erweiterung anstatt des Bookmarklets möchte, der wird eventuell beim FontFinder fündig. Die Erweiterung bindet sich ebenfalls in die Add-on Leiste ein und zeigt ähnlich wie WhatFont alle relevanten Werte zum gewünschten Textausschnitt an (Color, Font, Spacing, Decoration). Zusätzlich können weitere Funktionen per Rechtsklick aufgerufen werden. So können Werte wie Schriftgröße, Farbe oder Schriftart individuell angepasst oder bei Bedarf komplett deaktiviert werden.

fontfinder

Download

Welche Erweiterung einem schlussendlich am ehesten liegt muss jedem wohl selbst überlassen werden. Optisch und funktional hat mich WhatFont am meisten angesprochen, andererseits verwende ich zur Webseitenanalyse fast immer Firebug, welcher relevante Werte ebenfalls anzeigt, allerdings nicht so komfortabel.

Firebug 1.9 - Top Erweiterung für Webentwickler mit Neuerungen

Firebug zählt schon lange zu den Top 10 Erweiterungen des Firefox Browsers. Kein anderes Add-on erlaubt es so komfortabel Code oder Webseiten zu untersuchen, daneben können HTML oder CSS angepasst und Seiten auf Geschwindigkeit untersucht werden.

firebug

Es gibt fast Nichts was der kleine Helfer nicht kann, mit der neuen Version 1.9 sind einige Verbesserungen dazu gekommen.

Es gibt eine ausführliche Beschreibung mit Screenshots der Neuerungen. Interessierte können sich zusätzlich durch den Release Log lesen oder das Wiki durchforsten.

Version 1.9 bringt kleine aber praktische Neuerungen mit sich und sollte auch in Zukunft auf keinem Entwickler Rechner fehlen.

Sollte sich Firebug nicht automatisch aktualisieren, kann die Feuerwanze hier heruntergeladen werden.

Über 60 Entwickler Tools für Firefox

Firefox hat seinen Erfolg zum Großteil den vielen Plugins zu verdanken. Erst diese machen den Browser zu einer eierlegenden Wollmilchsau. Mozilla hat auf seinem Entwickler Blog eine kleine Auswahl von über 60 Plugins für Entwickler vorgestellt, die ich euch nicht vorenthalten will. Neben bekannten Plugins sind auch einige Erweiterungen für das Firebug Plugin dabei.

aurora_beta_firefox

Links zu den Erweiterungen findet ihr im Originaleintrag

  • Accessibility Evaluation Toolbar
  • All in One Sidebar
  • Cache Status: Cache Verwaltung
  • CacheToggle: Browser Cache löschen
  • Colorzilla: Farben Manager
  • Console²: ersetzt die JavaScript Console
  • CSS Reloader: CSS einer Seite neu laden
  • DOM Inspector: DOM untersuchen
  • Firefogg: Video und Audio encodieren
  • FireFTP: FTP/SFTP Client für Firefox
  • FireUnit: JavaScript Unit Testing 
  • FoxGuide: Layout Tool
  • FoxyProxy. Proxy Verwaltung
  • Geolocater: Standortbestimmungen anpassen
  • GreaseMonkey: Webseiten modifizieren
  • HTML Validator. Validierungstool
  • HttpFox: HTTP analysieren
  • iMacros for Firefox: Firefox automatisieren
  • Jenkins Build Monitor: Jenkins in der Statusleiste
  • jQuery extension: jQuery und jQuery UI  im Browser.
  • JSONovich: Druckt JSON Inhalte
  • JSONView: JSON Dokumente im Browser betrachten.
  • JSView: JS Dateien einzeln betrachten oder laden
  • Link Widgets: Navigation vereinfachen
  • Live HTTP Headers: Zeigt die HTTP Header einer Seite an
  • LiveReload: Seite neu laden
  • MeasureIt: Lineal für Webseiten
  • Modify Headers: HTTP request Header anpassen
  • NoScript: Scripte blockieren
  • PageSpeed: Web Performance messen
  • PixelZoomer: Screenshot und Pixelanalyse Tool
  • Pixlr Grabber: Screenshot Tool
  • Poster: Web Services testen
  • QuickJava: Java, Javascript, Flash, Silverlight über Statusbar aktivieren
  • Rainbow: Farben Management
  • Regular Expressions: Reguläre Ausdrücke testen
  • Remove Cookie(s) for Site: Alle Cookies einer Seite entfernen
  • Screenshot Pimp: Screenshot Tool
  • SQLite Manager: SQLite Datenbanken verwalten
  • Selenium IDE Buttons: Selenium IDE öffnen
  • SeoQuake SEO extension: SEO/SMO Erweiterung
  • ShowIP: IP anzeigen
  • Stylish: Themes und Skins für Google, Facebook, YouTube, Orkut...
  • Tamper Data: HTTP/HTTPS Header anzeigen und anpassen
  • TAW3
  • Tilt 3D: 3D Visualisierung einer Seite (WebGL)
  • Total Validator: Verschiedene Validierungsprozesse
  • TryAgain: Webseite neu laden
  • User Agent Switcher: Browserbenutzer wechseln
  • Wappalyzer: Backend Technologie einer Webseite anzeigen
  • Web Developer: Entwicklersammlung

Firebug Erweiterungen

  • Acebug: Syntax Highlighting
  • Code Coverage: Javascript code coverage.
  • CSS Usage: Verwendete CSS Regeln betrachten
  • Firecookie: Cookieverwaltung
  • Firefinder: Findet HTML Elemente zum passenden CSS Selektor
  • FirePHP
  • FireQuery
  • friendly bug: Einfachere Verwendung
  • Inline Code Finder: Inline JavaScript events, Inline style oder links finden
  • FireRainbow: Javascript syntax highlighting
  • NetExport: Daten aus Firebug in  HTTP Archive oder JSON sichern
  • Pixel Perfect: Overlays entwerfen
  • YSlow: Webseitenperformance messen