Scriptorama.nl

De moderne Webdeveloper leeft voornamelijk uit zijn Editor en vanuit z'n Browser in plaats vanuit ingewikkelde IDEs. Een overzicht van webdevelopment tools voor alle grote browsers:

Webdevelopment tools voor Mozilla Firefox

• Firebug - Die kent iedereen hopelijk inmiddels: live CSS/HTML editing, Javascript debugging & Profiling en pageload statistieken. Een absolute must

• FirePHP - FirePHP, een uitbreiding op Firebug, biedt PHP ontwikkelaars de mogelijkheid om debug output vanuit PHP in de FirePHP console te plaatsen.

• YSlow - YSlow van Yahoo!, een Firebug uitbreiding, analyseert websites en geeft tips over hoe je de performance eventueel kunt verbeteren.

• Firecookie - Met Firecookie, een uitbreiding op Firebug, heb je overzicht en complete controle over de cookies die de huidige site heeft gezet.

• Hammerhead - Performance testen is een van de dingen die webontwikkelaars ook moeten doen en Hammerhead, een Firebug uitbreiding, is daar een handig gereedschap voor.

• Webdevelopment Toolbar - biedt een hoop informatie over de huidige pagina en biedt de mogelijkheid om verschillende features van de browser (zoals cookies, javascript, etc..) te beheren.

• LiveHTTPHeaders - Bekijk live precies wat Firefox verstuurd en ontvangt om de pagina op het scherm te tonen.

• Colorzilla - Selecteer een kleur uit de huidige pagina en kopieert deze naar het clipboard.

• Tamper Data - Tamper Data maakt het mogelijk om HTTP requests (denk aan een form submit) af te vangen en wijzigen voordat deze verstuurd wordt.

• MeasureIT - De digitale lineaal voor de webdeveloper

• Zend Studio Firefox Plugin - Start een Zend Studio Debugging of Profiling sessie direct vanuit je browser. Een soortgelijk iets bestaat ook voor XDebug (zie hier), handig als je Scriptorama's XDebugClient gebruikt ;-)

Webdevelopment tools voor Opera

• Webdeveloper toolbar - Een webdeveloper toolbar met ruw weg dezelfde features als de Webdeveloper toolbar voor Firefox, misschien zelfs wel iets meer!

• Opera DragonFly - De verbeterde webdeveloper tools voor Opera 9.5+ waarin uiteindelijk ongeveer dezelfde functionaliteit als Firebug zal zitten

Webdevelopment tools voor Safari / WebKit

• Drosera - Een javascript debugger voor WebKit. Je hoeft enkel een nightly build van WebKit te downloaden en WebKit vertellen dat je graag Drosera wilt gebruiken.

• WebInspector - Een soort DOM inspector voor WebKit. Voor WebInspector geldt hetzelfde als voor Drosera: even een nightly downloaden en een setting activeren voor gebruik.

• SafariStand - Biedt (onder andere) een Page Info dialoog waarin je de bestandsgroottes kunt bekijken, een syntax-highlighted View-Source en de mogelijkheid om de cookies van de huidige site te bekijken.

• SafariTidy - Verifieer of het huidige (X)HTML document voldoet aan de standaarden

• Safari Debug menu - Het Safari Debug menu biedt o.a. Page Load Testing (meet hoe groot een pagina is en hoe snel je dit inlaadt) en een Javascript Console.

• Xyle Scope - Michiel noemt dit in de comments een voorloper van Firebug, niet gratis overigens.

Webdevelopment tools voor Internet Explorer

• IE DOM Explorer - De Webdeveloper Toolbar voor Internet Explorer

• DebugBar - Een firebug-achtige extensie voor Internet Explorer, met o.a. cookie beheer, DOM inspector en Javascript console. Gratis voor persoonlijk gebruik.

• Fiddler - Een HTTP Proxy die je de mogelijkheid biedt om HTTP requests op te vangen en te bekijken of te wijzigen alvorens ze bij de webserver aankomen.

• Script Debugger - Een simpele javascript debugger voor Internet Explorer.

• Virtual PC image met IE6 - Aangezien we voorlopig nog even niet van IE6 af zijn: een Virtual PC image met een volledige Windows XP + IE6 installatie. De laatste versie bevat ook de IE DOM Explorer en de Script Debugger.

• Virtual PC image met IE8 - Internet Explorer 8 komt er aan. Voorlopig kun je risico vrij testen door een virtual image met IE8 te gebruiken.

Google Chrome

• WebInspector - Google Chrome is gebaseerd op WebKit en bevat daarom dezelfde webdeveloper tools als Safari: WebInspector