[IE] Nieuw: Developer Toolbar (Beta) 1.00.0912.0

[RobIII]

Woei! Goed nieuws!

Schijnbaar is 'ie afgelopen vrijdag al gepost op het IE blog maar ik kwam 'm vandaag pas tegen: De Internet Explorer Developer Toolbar (BETA).

Ik bouw als sinds lange tijd mijn sites eerst FireFox om het vervolgens in IE goed te krijgen (i.p.v. andersom). Daarbij is de Web Developer Extension soms wel eens verrekes handig. Het valideren van je (X)HTML/CSS etc doe je nu met 1 druk op de knop. Snel inzicht krijgen in alle DIV's, IMG's en andere elementen doormiddel van outlines en class informatie etc zijn om sommige momenten ("waarom werkt het *kreng* nou niet?") onmisbaar. Tot nu toe hebben we deze handige tool eigenlijk altijd moeten missen in IE (althans, ik heb nooit een goed alternatief gevonden, en de enige die ik me kan herinneren is een "slap probeersel" dat Microsoft zelf ooit eens ter download heeft aangeboden... het zou me verbazen als het nog bestaat...

Het ding zou moeten werken op IE6 en hoger volgens MS.

Wat doet het / kan het?

Wel, download het en probeer het zou ik zeggen Wel even een waarschuwing: Volgens deze url blijkt de plugin je Vista installatie nogal aardig over de rooie te gaan bij een reboot na installatie van dit handigheidje.

Na installatie verschijnt er, zoals je waarschijnlijk al verwacht, een toolbar in je IE. Kan zijn dat je 'm even moet verslepen of aan zetten (rechtsklik op een willekeurige toolbar, "Developer toolbar" aanvinken), maar uiteindelijk ziet 'ie er zo uit:


_{Ik gebruik de "classic" windows look}

Meteen valt op dat de toolbar behoorlijk "geleend" is van de Webdeveloper Toolbar voor FF. Maar dat mag de pret niet drukken: Beter goed gejat dan slecht verzonnen in dit geval

Ik zal even wat handige features door lopen met jullie. Gezien de meesten hier redelijk technisch zijn aangelegd _{* RobIII rent vlucht naar /14} ga ik hier niet alles voorkauwen. Mensen die bekend zijn met de FF toolbar zal dit erg bekend voorkomen.

View DOM
Meteen één van de gaafste features: Je hele DOM tree bekijken en aanpassen! Als je klikt op de "View DOM" knop in de toolbar verschijnt het volgende panel:
^*Clickety
Je kunt met behulp van de treeview aan de linkerkant hiërarchisch door je DOM nodes klikken. Selecteer je een node dan kun je in het middelste venster de attributen van die node bekijken en aanpassen. Tevens zal, bij het selecteren van de node, het betreffende element oplichten in de pagina. In het rechter venster zie je de huidge van toepassing zijnde CSS op die node. Ik heb nog niet ontdekt of je hier de CSS ook kunt aanpassen.
Je kunt dit panel un-pinnen door rechtsboven in het panel op unpin te klikken (Duh)

Disable
Voor de hand liggende opties hier. Je kunt je cache, images, cookies, scripts enz. uitschakelen.

View
Hiermee kun je (o.a.) in een handomdraai alle class en ID informatie laten weergeven, tab-indexen en access keys bekijken.

Outline
Wederom een erg handige feature om je te helpen zoeken waar je fout zit. Hiermee kun je bepaalde elementen zoals tables, div's en zelfs tags die je zelf kiest laten "outline-en". Het komt er op neer dat alle elementen van dat type dan een mooi rood/blauw/groen/etc. border krijgen waardoor je precies kunt zien waar je elementen zich op de pagina bevinden en hoe je pagina dus in elkaar steekt.

Validate
Weer zo'n krachtige feature. Met een simpele druk op de knop kun je je (X)HTML, CSS, RSS feeds etc. laten valideren door de bekende validators. Erg handig is de "Validate set..." waarmee je in 1 klap meerdere validaties kunt uitvoeren. Deze optie mis ik in de FF toolbar.

Images / Resize
Spreken redelijk voor zich...

Misc
Wel weer wat handigheidjes. O.a. een bult "links" naar alle HTML/CSS etc. documentatie van het W3C, het IE Blog en wat opties om je cache en cookies te clearen.

Show ruler
Deze is wel weer erg handig te noemen. Voorheen deed ik dit soort ongein met een screenshot en dan in Photoshop "meten", of met een losse tool (screenruler ofzo). Met deze ruler kun je makkelijk in een willekeurige hoek, of horizontaal / verticaal afstanden meten. Erg handig is de "snap to element" optie, waarmee de ruler dus automatisch "snapped" naar een element. De ruler is, helaas, bij mij nogal buggy. Na het scrollen klopt er namelijk geen hout meer van. Gelukkig is het een BETA release en zal dit nog wel gefixed worden naar ik verwacht.

Conclusie:
Hoewel ik mijn werkwijze niet zal veranderen, vind ik dit wel weer een aardige geste van het IE team om devvers een eind op weg te helpen met fatsoenlijke tools. Ik mis nog een aantal opties die wel handig zouden zijn, zoals HTTP headers weergeven, de complete "CSS" en "Forms" menu's van de FF toolbar, een goede JS debugger en vooral de "View source" knop, waarmee je in 1 klap de source opent in het FF equivalent van deze toolbar (zelfs mooi syntax-colored zelfs). Ik verwacht eerlijk gezegd ook niet dat dit de laatste versie is, ik hoop zelfs dat ze er alles aan doen om de "concurrent" te kunnen evenaren. Niet om Microsoft nu een veer in hun aars te steken omdat ze het zo mooi jatten, maar wel omdat we er (dev-technisch) alleen maar beter van worden. Hoe ze dat juridisch doen is hun probleem Overigens verheug ik me ook op de IE7 beta 2 of final, welke betere ondersteuning van CSS, PNG's etc. belooft te bevattem.

Dank
Met dank aan Webwereld voor het wijzen op het bestaan van dit ding.

Waarom nu dit topic?
Alleen maar om jullie te wijzen op dit toch wel potentieel handige ding.

---

En meteen maar even het "bewijs" dat het nog een beta is

Klik op Outline->Div tags op een "ingewikkelde" pagina (dus niet met 3 divjes, maar wat complexer, zoals deze pagina) et voila. Met een beetje geluk wordt dat gefixored in de final

Bugs reporten doe je hierzo

[ Voor 27% gewijzigd door RobIII op 20-09-2005 12:50 ]

[crisp]

Snel inzicht krijgen in...

Laat dat 'Snel' maar weg, want wat ik ervan gezien heb is eea tergend traag bij mij onder winXP. En nadat IE een paar keer gecrashed was heb ik het maar voor gezien gehouden...

[RobIII]

crisp schreef op dinsdag 20 september 2005 @ 12:40:
[...]

Laat dat 'Snel' maar weg, want wat ik ervan gezien heb is eea tergend traag bij mij onder winXP. En nadat IE een paar keer gecrashed was heb ik het maar voor gezien gehouden...

Het is hier ook niet echt "ontzettend" snel, maar wel "werkbaar" en "acceptabel". En ik geef MS in dit geval het voordeel van de twijfel. Het is nog steeds een Beta.

[ Voor 23% gewijzigd door RobIII op 20-09-2005 12:43 ]

[crisp]

RobIII schreef op dinsdag 20 september 2005 @ 12:42:
[...]

Het is hier ook niet echt "ontzettend" snel, maar wel "werkbaar" en "acceptabel". En ik geef MS in dit geval het voordeel van de twijfel. Het is nog steeds een Beta.

Tsja, maar als ik in javascript een bookmarklet kan schrijven die precies hetzelfde doet als bijvoorbeeld 'outline tables' die wel snel is dan vraag ik me af waarom die toolbar toch zo traag is

[Woudloper]

crisp schreef op dinsdag 20 september 2005 @ 12:40:
Laat dat 'Snel' maar weg, want wat ik ervan gezien heb is eea tergend traag bij mij onder winXP. En nadat IE een paar keer gecrashed was heb ik het maar voor gezien gehouden...

Die ervaring heb ik ook. Probeer helemaal geen outline o.i.d. want dan bevriest je hele IE. * Woudloper vindt het eigenlijk gewoon een rip-off van de 'Web Developer Toolbar'. Het lijkt erop dat het wat nieuws heeft (met name het 'view dom' en de mogelijkheid om dat de 'pin'-en), maar voor de rest is het gewoon een manier 'om aan te geven' dat developers ook best 'Internet Explorer' kunnen gebruiken als core browser...

[RobIII]

Woudloper schreef op dinsdag 20 september 2005 @ 12:57:
[...]

Die ervaring heb ik ook. Probeer helemaal geen outline o.i.d. want dan bevriest je hele IE. * Woudloper vindt het eigenlijk gewoon een rip-off van de 'Web Developer Toolbar'. Het lijkt erop dat het wat nieuws heeft (met name het 'view dom' en de mogelijkheid om dat de 'pin'-en), maar voor de rest is het gewoon een manier 'om aan te geven' dat developers ook best 'Internet Explorer' kunnen gebruiken als core browser...

Dat het geheel wel érg op de 'Web developer toolbar' lijkt zal ik niet ontkennen, evenals dat het waarschijnlijk gewoon een vette rip-off is van ze. Maar als dat betekend dat meer "webdevvers" nu eindelijk gaan snappen waar ze mee bezig zijn, makkelijk kunnen valideren enzovoorts dat "het web 'as we know it' " er uiteindelijk alleen maar van profiteert. Er wordt niemand slechter van deze tool lijkt me.

[ Voor 21% gewijzigd door RobIII op 20-09-2005 13:07 ]

[BtM909]

RobIII schreef op dinsdag 20 september 2005 @ 13:07:
[...]
Er wordt niemand slechter van deze tool lijkt me.

Ik wel, zelfs een willekeurige xxx IE plugin laat m'n browser stabieler draaien zeg

Even bekeken en gelijk weer ge-uninstalled.

[frickY]

Ik krijg het ding niet aan de praat
Na meerdere malen opnieuw installeren krijg ik met geen mogelijkheid een extra werkbalk
In het 'Invoegtoepassingen beheren' scherm zie ik hem wel als Ingeschakelt staan, met als type 'werkbalk', maar kan hem ergens aanvinken

WinXP SP2 NL
IE 6.0 SP2 NL

[Woudloper]

Er ook nog even twee tellen mee gespeelt, maar de 'disable images' e.d. is ook erg buggy als je het mij vraagt. Deze doet een refresh van je browser en haalt hem bij mij zelfs van maximized af...

Overigens ook nog getest onder IE5.5. en daar lijkt ook alles gewoon in te werken, behalve natuurlijk 'view dom'.

[RobIII]

frickY schreef op dinsdag 20 september 2005 @ 13:49:
Ik krijg het ding niet aan de praat
Na meerdere malen opnieuw installeren krijg ik met geen mogelijkheid een extra werkbalk
In het 'Invoegtoepassingen beheren' scherm zie ik hem wel als Ingeschakelt staan, met als type 'werkbalk', maar kan hem ergens aanvinken

WinXP SP2 NL
IE 6.0 SP2 NL

Rechtsklik op een toolbar (met bijvoorbeeld je vorige/volgende knoppen) en daar aanvinken
*Clickety

[edit]

offtopic:
Nou maakt React(?) de thumbnails weer zwart Nieuwe upload, zelfde bestand werkt weer wel

[ Voor 33% gewijzigd door RobIII op 20-09-2005 14:07 ]

[Annie]

* kick *

Voor de liefhebbers: beta 2 is inmiddels al een maandje uit.

[RobIII]

^^

Het versienummer is 1.00.1219.0 geworden.

En daar kan ik dan weer bij vermelden dat 'ie een stuk stabieler werkt.

edit:
Toch niet. Heb al weer 2 (reproduceerbare) crashes veroozaakt... Kop op MS, laat je nou niet zo kennen!

Hoewel ik 'm nog niet vind tippen aan de FF webdeveloper toolbar, is het desalniettemin een handig ding om in IE te hebben.

[ Voor 60% gewijzigd door RobIII op 06-03-2006 17:06 ]

[megamuch]

Geinig ding. Werkt hier voor alsnog prima, maar ben ondertussen wel erg gewend aan FF dev bar.

[RobIII]

megamuch schreef op dinsdag 07 maart 2006 @ 15:49:
Geinig ding. Werkt hier voor alsnog prima, maar ben ondertussen wel erg gewend aan FF dev bar.

Klik eens op "View -> Linkpaths" (op deze pagina), wat doet 'ie dan bij jou?

[ Voor 8% gewijzigd door RobIII op 07-03-2006 16:04 ]

[Verwijderd]

Kleine kick.

Ik krijg die toolbar van z'n leven niet als 'toolbar' in beeld.


*click

Het ding nestelt zich onder in beeld, is wel te vergroten en verkleinen, maar wil niet als bar boven, zeg, de tabbar. En als ik dat dingetje rechts aanklik (zie rode mark) dan wordt-ie 'unpinned' en laadt het ding als volledig nieuw venster. Why?

Ik wil die bar zoals een bar bedoeld is.

[tec]

Het is een vervelend ding. Laatst een halve dag aan het zoeken geweest waarom mn click events in IE toch een vertraging hadden van 300 ms.. na deinstalleren van de ie dev toolbar was het probleem opgelost.. Dat zorgt me toch voor een hoop frustratie zeg..

[BtM909]

Verwijderd schreef op donderdag 31 mei 2007 @ 11:48:

Ik wil die bar zoals een bar bedoeld is.

Fijn, maar Webdesign, Markup & Clientside Scripting is niet bedoeld om support te geven op software... Daarvoor hebben we andere subfora