WebDevTeam’s Blog

Ich bin echt überrascht, dass dies so “einfach” funktioniert. Mit der Xenocode Browser Sandbox kann man die folgenden Browser per Plugin direkt vom bzw. im Firefox starten:

• Ie6 / 7 / 8
• Firefox 2 / 3
• Chrome
• Opera
• Safari

Es öffnet sich dann der entsprechende Browser als eigenständiges Fenster. Habe es gerade mit dem IE6 probiert und es geht wunderbar.

Allerdings kamen auf verschiedenen Seiten JavaScript-Fehler, die in anderen Browsern und auch in unserem “richtig” installierten Test-IE6 nicht auftraten, selbst bei Google und die Message Box selbst hat auch Fehler, sodass der eigentliche Sinn des IE6 zum Testen wieder in Frage gestellt wird.

Das Plugin kann im Firefox auch einfach wieder deaktiviert werden (Extras / Addons / Plugins).

via

Gerade bei ajaxian gelesen – MySpace hat eine zu installierende Erweiterung für den Internet Explorer (6+) rausgebracht:

MySpace’s Performance Tracker is a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages.

Wenn man schnell mal einen Wireframe machen möchte, empfehle ich Pencil (Homepage), ein kostenloses Firefox Addon “Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use”.

Quelle: https://addons.mozilla.org/en-US/firefox/addon/8487

Man kann auch weitere “user-defined stencils” ergänzen.

Gerade bei Ajaxian gelesen: Firediff, eine Erweiterung für den Firebug. Damit kann man – Firebug 1.4 vorausgesetzt – Änderungen am DOM und CSS tracken.

Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This
provides insight into the functionality of the application as well as provide a record of the changes that were required to debug and tweak the page’s display. (Quelle)

Ich habe jetzt den Firebug 1.4 Alpha nicht drauf, werde die Erweiterung aber im Auge behalten. Wenn jemand Erfahrungen damit gemacht hat, Kommentare bitte!

Ich hatte vorhin gerade mit einem Kollegen darüber gesprochen. Wenn man sich also HTTP Requests anschauen bzw. modifizieren möchte, sollte man sich folgende Erweiterungen ansehen:

• Tamper Data (Firefox Addon)
• Live HTTP Headers (Firefox Addon)
• Poster (Firefox Addon)
• Fiddler Web Debugger (eigenständig, exe)
• HttpWatch (eigenständig, exe)

Wenn es den Firebug nicht gäbe, wäre die Webdev Welt nur halb so schön, also meine Plugins:

Web Development

• Firebug mit FireCookie, Pixel Perfect, Rainbow, YSlow (weitere Extensions)
• Tamper Data um sich Formulardaten beim Absenden anzusehen bzw. zu manipulieren
• Screengrab für Screenshots des ganzen Viewports oder ausgewählter Bereiche
• Web Developer Toolbar
• HTML Validator
• IE Tab nutze ich selten, da der IE als eigener Browser läuft
• OperaView habe ich vorhin erst gesehen
• iMacros für Makros, sehr gut für automatisierte Klick Tests

Generelle gute Firefox Plugins

• Adblock Plus, ohne das Plugin geht gar nichts
• Deutsches Wörterbuch
• Heute erst entdeckt: Tab Catalog für eine Thumbnail-Ansicht aller Tabs ähnlich der “Top sites page” im neuen Safari 4, so ähnlich wie Firefox Showcase
• Scrapbook zum Archivieren von ganzen Webseiten
• Greasemonkey
• Better GReader und Google Reader Notifier für den Google Reader
• DownThemAll!, Download Manager wo man auch bestimmte Dateitypen auf einer Seite laden kann
• NoScript eher für den privaten Gebrauch zu Hause
• All-in-One Gestures oder Mouse Gestures Redox für Mausgesten
• 10 Tools to Turn Firefox into WordPress’s Little Helper
• BugMeNot wenn man z.B. sich in Foren einfach nur kurz einloggen will um Posts zu lesen ohne einen eigenen Account zu erstellen, tlw. ist der BugMeNot Account aber schon gesperrt
• Google Preview für Vorschaubilder in den Google Suchergebnissen
• Faster Fox ist wohl eher für zu Hause, um die Geschwindogkeit der Seitenaufrufe auf Arbeit nicht zu “verfälschen”
• Colorful Tabs um die Tabs einzufärben
• Download Statusbar für eine Fortschrittsanzeige der Downloads in der Statusbar

Wenn ihr noch interessante Plugins habt, einfach kommentieren. Bin sehr interessiert!

Ich hatte ja schon hier etwas über die Debugbar geschrieben. Allerdings macht sie mehr als nur zu debuggen, wodurch sie einen eigenen Beitrag verdient !

Ein paar nette Features:

Toolbar

• Fenstergröße anpassen (wie die Webdeveloper Toolbar im Firefox)
• Farbpipette! D.h. man kann per Pipette Farben in der Seite abnehmen.
• Screenshot der Seite per Email schicken
• Wenn eine Seite einen JavaScript Fehler hat, kann man dies per Email inkl. Screenshot versenden.

Seitenleiste

• DOM Baum als Baummenü ausklappbar
• Elementauswahl per Fadenkreuz (wie im Firebug “Element untersuchen” bzw. “Inspect Element”)
• Auflistung der Scripte
• Ausführen von JavsScript Funktionen
• Infos zu z.B. Seitengröße in Bytes, Protokoll, Zeichensatz, Rendering Mode usw.
• UND DAS BESTE: Wenn das wirklich stimmt – Man sieht die dem Element zugewiesenen CSS Styles und aus welcher CSS Datei die Selektoren sind!!!
• Layout Anzeige:

Wieder mal bei Cachy gefunden: gui:config. Dort sind viele Einstellungen dann unter “Extras / Erweiterte Einstellungen” zu finden, die man sonst umständlich über about:config raussuchen muss.

This is an extension for advanced preferences. gui:config makes it easier to change preferences that can only be found in the “about:config”.