Firebug. Execució en línia de comandes i execució en el navegador

De wikijoan
Salta a la navegació Salta a la cerca


Use Firebug console for interactive testing

Can also use Firebug Lite in Internet Explorer. Not great, but better than nothing


Nota: en l'ordinador del professor per activar i desactivar el FireBug és Fn+F12, doncs F12 a seques activa/desactiva la wireless...

Què és i per a què serveix Firebug?

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

  • Always at your service

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

  • Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

  • Tweak CSS to perfection

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

  • Visualize CSS metrics

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

  • Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.

  • Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

  • Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

  • Explore the DOM

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

  • Execute JavaScript on the fly

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

  • Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

  • Just the way you like it

Using Firebug gives a lot of possibilities for web development to your hands. Though you're feeling something is not working as you would like it to? No problem. Firebug offers a lot of options to adjust it to your needs.

  • Search and you shall find

Sometimes you know what you're looking for, but you can't see it in the panel. Using the quick search box in Firebug's toolbar you can search inside Firebug's panels and see the results highlighted as you type.

  • Cookies

Firebug allows to view and manage cookies in your browser. You can deny cookies for specific sites, filter cookies, create new and delete existing cookies. You can also break into the debugger when specific cookie changes its value and see the line of script that caused the change.

Instal.lació de Firebug a Firefox

Primer de tot hem de mirar quina versió tenim del Firefox, i instal.lar una versió de Firebug compatible amb aquesta versió. Per exemple, si tenim Firefox 11.0 podem instal.lar la versió 1.9.2 del Firebug.

clico sobre el fitxer firebug-1.9.2.xpi i comença el procés d'instal.lació automàtica del add-on de Firefox, que estarà disponible després de reiniciar el Firefox.

Dins del Firefox totes les utilitats del Firebug estan a Tools > Web Developer.

Firebug i la consola/línia de comandes

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

  • Get your hands dirty

If you know your way around the DOM, sometimes there's no faster way to get answers than to just use JavaScript to snoop around. Firebug's command line lets you do just that - enter whatever JavaScript you like. It will be executed as if it were part of the page, and the returned values displayed in the console.

  • Autocomplete

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing "document.b" to cycle thorugh all properties that start with "b". You can even hit tab after a complex expression like "document.getElementsByTagName('a')[0]." to see all properties of the first link in the document.

  • Go big

If one line is making you feel a little cramped, don't panic. Firebug's command line can be expanded to a larger text editor so you can experiment with entire scripts instead of just one-liners.

  • Smart paste

So you've written a bunch of JavaScript in your editor and you want to test it out real quick. Just paste it into the command line. If it's more than one line, Firebug will automatically open the big text editor with your script ready to go.

  • Bookmarklet heaven

Creating bookmarklets has never been easier. Just hit the "Copy" button in the multi-line editor and your script will be copied to the clipboard in bookmarklet format.

  • Don't forget to click

Unlike a traditional command line, the output of each command is not static text, it is living hypertext. Any objects that are output to the console are hyperlinks that you can click to inspect the object in whichever Firebug tab is most appropriate.

  • Don't forget to right-click

Context menus contain a whole world of fun features waiting to be discovered. Different kinds of objects have their own context menus, so when you see a link to an object in the Firebug console, try right-clicking it.

  • Don't forget to middle-click

If you haven't already learned the magic of middle-click and tabbed browsing, now is a good time to learn. Just like when you middle-click a link in the Firefox browser, middle-clicking a link to a file or URL in the Firebug console will open it in a new tab.

For those without a middle mouse button, you can also hold down the control key (or command on Mac) and click for the same effect.

  • Inspect and command

After you've found an HTML element using the Inspect tool, you often want to use the command line to manipulate it. Firebug makes it easy; just use the "$0" variable to reference the last element you inspected, or "$1" for the one before that.

  • Command and inspect

The command line is a wonderful launching pad for using the other tabs to inspect objects. Instead of hitting enter to see the result on the console, hit Shift+Enter and the result will be inspected in either the DOM tab, the HTML tab, the Script tab, or the CSS tab, whichever is most appropriate.

  • Command Line History

The command line maintains its own history of executed expressions and so, you can easily go back and execute an expression again. Just use up & down arrows or click on the red button on the left side of the command line to see a history popup with all entries.

Tasques a realitzar

L'objectiu de l'alumne és familiaritzar-se amb el firebug com a entorn de desenvolupament i depuració, i trobar un workflow que li permeti augmentar la productivitat en l'àmbit d'edició HTML, CSS i Javascript.

Un exemple senzill: demo.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <meta name="generator" content=
    "HTML Tidy for Linux/x86 (vers 25 March 2009), see">
    <title>Title: My First Webpage</title>
      My First Web Page
    <p id="demo">
      My First Paragraph
    <script type="text/javascript">
		document.getElementById("demo").innerHTML="My First JavaScript 1";
		document.getElementById("demo").innerHTML="My First JavaScript 2";
		document.getElementById("demo").innerHTML="My First JavaScript 3";
  • L'alumne posarà tres punts d'inspecció en les tres línies Javascript, i has de veure com s'executa el codi pas a pas i com canvia el contingut de l'etiqueta demo
  • Introdueixes un error de sintaxi:
document.getElementByI("demo").innerHTML="My First JavaScript 2";

L'execució del script s'atura en l'error, però aparentment no s'informa del missatge d'error. Per veure l'error que s'ha produït has d'anar a la Consola, i sota la pestanya Errors pots veure la informació de l'error que s'ha produït i en quina línia. En aquest cas el problema està en què a getElementByI li falta una lletra (error de sintaxi)

  • Pots veure que en la consola de Firebug, a sota de tot, tens el símbol >>>, de manera que pots introduir directament línies de comandes. Prova per exemple:
>>> 2+2
>>> document.getElementById("demo").innerHTML="My First JavaScript 3000";
>>> alert("WEC1");
>>> console.log('WEC2')
>>> console.debug('WEC3');

Fixa't que si treballes amb la consola del Firebug oberta, serà sempre molt millor (o molt més elegant), posar console.logs que no pas fer alerts (en el cas de què vulguis per exemple inspeccionar els valors de les variables).

Firebug tip: Inspector History & Command Line

Allò important en aquest cas és que podem utilitzar el tabulador per fer autocompleció.

Per exemple, en el petit exemple que ens ocupa, podem inspeccionar l'element paràgraf, i veure com podem utilitzar en la consola la variable $0:

>>> $0
<p id="demo">
>>> $0.attributes.item(0)

Casos pràctics

En el següent exemple hi ha un error de sintaxi:

	<script type="text/javascript">
	var str="IMG_0234.JPG*F16*100.0mm*1/320 s*Canon*Canon EOS 550D";
	var arrayFoto = str.split("*");
	document.write("Nom de l'arxiu: "+arrayFoto[0]};

L'error que dóna el firebug és:

missing ) after argument list
[Break On This Error] 	

document.write("Nom de l'arxiu: "+arrayFoto[0]};

creat per Joan Quintana Compte, octubre 2018