Webbutveckling och Firebug

Firebug

Ett mycket smidigt verktyg för webbutvecklare är Firebug-tillägget till Firefox. Oavsett vilken inriktning man har i utvecklandet så finns det funktioner man kan ha nytta av. De mest tillgängliga är nog HTML och CSS inspektion. I HTML-läget kan man navigera bland taggarna i en trädstruktur och vid behov ändra, lägga till eller ta bort noder och förändringarna sker direkt på sidan. Det samma går att göra med CSS, där man kan ändra styling, kanske framförallt för att testa mindre förändringar, eller dölja objekt etc..

Att kunna se HTML-taggarna i en trädstruktur förenklar väldigt mycket när man jobbar med dynamiskt genererad kod där indenteringen inte alltid är den mest lättlästa. Det finns dock en sak man måste tänka på med denna funktion – nämligen att trädet fylls ut med noder som inte nödvändigtvis finns med i källkoden. Ett exempel är att en tabell i Firebug automatiskt får noden <tbody>. Detta kan ställa till problem om man t. ex. är ute efter X-path sökvägen till en viss nod. Ytterligare en problematik är att det som visas är X-HTML vilket t. ex. gör att HTML-”<br>” skrivs ut som X-HTML-”<br />”. Det samma gäller andra (i X-HTML) självslutande taggar. I de fallen finns det inte mycket alternativ till att titta i själva källkoden. Å andra sidan finns det möjlighet att se noder skapade genom JavaScript – vilka inte går att se i källkoden.

Ytterligare ett väldigt användbart verktyg är konsolen. Den ger tillgång till ett flertal funktioner som man snabbt undrar hur man kunnat leva utan. Dels går det att profilera JavaScript, vilket kan avslöja var en sida – som laddas långsamt – har problem. Det går att få ut både minnesanvändning och exekveringstid på enskilda skript. Dessutom går det att exekvera funktioner definierade i JavaScript-taggar direkt, genom att ange funktionsnamnet i konsolprompten. Men en av de allra viktigaste funktionerna är att kunna se Ajax-kommunikation. Med konsolen aktiverad går det att se vad som skickas i ett Ajax-anrop och också se svaret direkt. Detta gör det möjligt att snabbt identifiera var ett fel ligger om man t. ex. anropar ett PHP-skript via Ajax. Om skriptet t. ex. returnerar ett PHP fel, så går det snabbt att se; alternativt så kan man se att returdatan är korrekt och att felet troligtvis ligger i JavaScript delen på sidan. Utöver detta kan man dessutom se eventuella syntaxfel i JavaScript vilket – allt sammantaget – gör konsolläget närmast oumbärligt.

Med all denna funktionalitet skulle man kanske nöja sig där, men det kommer mer. Firebug är visserligen ett tillägg i sig självt, men det går dessutom att skriva tillägg för Firebug. Ett väldigt smidigt tillägg är Firecookie, som gör att man kan se och modifiera cookies på samma sätt som man modifierar HTML eller CSS. Detta möjliggör att debugga problem med cookies, vilket annars kan vara ganska problematiskt.

Detta inlägg är publicerat i Blogg och har etiketter , , , . Bokmärk detta inlägg.

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

Följande HTML-taggar och attribut är tillåtna: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Sökmotoroptimering

Marknadsföring som fungerar! Sökmotoroptimering som möter era behov och krav!

Sökmotormarknadsföring

Annonsera på sökmotorerna! Syns när någon söker efter era produkter eller tjänster!

Website

Sökmotoroptimerad Webbdesign som lönar sig för er verksamhet!