Brico-Info - le blog de Bruno CATTEAU

Aller au contenu | Aller au menu | Aller à la recherche

Balise - firefox

Fil des billets - Fil des commentaires

jeudi 14 décembre 2006

Firebug 1.0 : Optimisation des css

Par Bruno le jeudi 14 décembre 2006, 18:15 - Informatique

Pas un jour sans que cette extension de Firefox ne m'etonne !

Le CSS (Cascading Style Sheets ) porte bien son nom, on a bien une notion de cascade dans l'application des styles. Simple de le dire, plus difficile de le retrouver. Avec cette nouvelle version de Firebug, vous passez en mode "inspection", vous vous baladez sur la page jusqu'à l'élément à inspecter. vous avez alors sur la fenêtre en bas à gauche la source générée (si vous séléctionnez HTML) et sur la droite les proprietés DOM ou CSS.

La source générée est interessante, surtout dans le domaine de l'AJAX où la source envoyée par le serveur n'a rien à voir avec la source réèlle de la page.

Quand on selectionne l'onglet CSS dans la partie droite de la fenêtre Firebug, on obtient l'ensemble des styles appliqués à l'élément dans l'ordre. Les styles qui ne sont pas appliqués car écrasés par d'autres sont même barrés !

Dans nos formations AJAX, il y a presque un an nous parlions des outils suivants :

Maintenant, nous utilisons le shell pour les démos en "ligne de commande" (mais nous pourrions aussi les faire avec Firebug car la nouvelle version permet le multi-ligne) et Firebug 1.0.

Pour l'alteration des données, Tamper data est toujours valable, mais nous l'utilisons surtout pour mettre en evidence les différentes connexions lors de l'appel d'une page. Par exemple, la home de Loîc Lemeur entraine une cinquantaine de téléchargements sur plusieurs serveurs différents. Les fichiers.css, .js, .gif  et .jpg sont mis en cache alors que le fichier .html est récupéré à chaque fois. Cette extension permet de connaitre les temps de téléchargement de chaque fichier, ce que permet aussi Firebug depuis peu...

Utilisation de Tamper Data

Utilisation de l'onglet "Net" de Firebug

aucun commentaire aucun rétrolien

vendredi 20 octobre 2006

Tests sur les nouvelles versions des navigateurs

Par Bruno le vendredi 20 octobre 2006, 20:23 - Informatique

En cette periode de sortie des nouvelles versions de Internet Explorer et Firefox, j'ai voulu vérifier ce que l'on dit (IE c'est nul, Opéra, il parait que c'est hyper rapide, etc...)

J'ai testé un ensemble de petits scripts javascript téléchargeables ici. En gros, le principe est de faire en boucle plusieurs fois une même action pour mettre en evidence une lenteur ou une rapidité relative... A noter que ce n'est peut etre pas l'action en elle même qui crée une lenteur, mais peut être la succession de cette action. L'exemple typique est d'executer 10 000 fois document.getElementById('id_div').innerHTML += 'toto'; ...

Les navigateurs séléctionnés sont les suivants :

                                                          
Opera 9.0  Firefox 1.5  Firefox 2.0  Internet Explorer 6  Internet Explorer 7

 Voilà le tableau des résultats (les temps ont été pondérés pour être comparables)

  innerHTML += innerHTML = objet image getElementById getElementById innerHTML DOM
Opera 9 4,483 1,83 3,2 4,56 1,748 6,72
FF 1.5 11,83 7,407 5,92 6,28 7,936 10,78
FF 2.0 8,875 5,625 10,62 5 5,688 8,59
IE 6  3,437 9,705 3,44 9,4 12,752 6,88
IE 7 3,922 9,189 4,7 9,4 11,124 5,31

et en image :

Mes conclusions :

  • La nouvelle version de Internet Explorer et de Firefox est meilleure que l'ancienne (on pouvait l'esperer...) (Sauf sur lacréation de l'objet image pour IE7, mais c'est peut être mon test qui est à remettre en cause...)
  • Opera est plus rapide, c'est plus qu'une idée reçue, c'est vrai... (ou au moins vérifié par Bruno CATTEAU...). Par contre, ils ont encore des progrès à faire au niveau des CSS...
  • Firefox n'est pas si rapide que ça par rapport à Internet Explorer, mais dans le chargement de la page, il accèpte d'afficher le début d'un tableau ou d'un div même s'il n'a pas rencontré la balise de fermeture, ce qui augmente l'impression de vitesse, et c'est ça le plus important. Opera a l'air de jouer beaucoup sur ce dernier point, on le voit même dans mon script test_innerHTML.html.
  • Au niveau de la gestion des erreurs, Firefox est très loin devant, surtout quand il est associé à l'extention Firebug. C'est certainement pour ça qu'il est tant apprecié des développeurs AJAX (en plus de mieux respecter les standards). Développer une application AJAX avec Internet Explorer c'est comme reparer un magnétoscope dans le noir (désolé, je n'ai pas trouvé mieux...).
  • Si vous êtes utilisateur, j'ai envie de vous conseiller Opera.
  • Si vous êtes développeur, vous devez déjà utiliser Firefox... et testez vos applis sur le moins bon des navigateurs pour voir si la pire version est acceptable. Eviter d'utiliser innerHTML += dans une boucle doit devenir une habiture...

 

aucun commentaire aucun rétrolien

lundi 2 octobre 2006

Problème de focus...

Par Bruno le lundi 2 octobre 2006, 13:04 - Informatique

Si vous cherchez des infos sur la façon de contourner l'erreur javascript suivante, vous êtes au bon endroit :

Error: [Exception... "'Permission denied to get property
XULElement.selectedIndex' when calling method:
[nsIAutoCompletePopup::selectedIndex]"  nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)"  location: "JS frame :: filename> :: onmouseover :: line 1"  data: no]

Cette erreur est apparue chez moi au moment de donner le focus à un champ que je venais de créer (par les DOM ou par un innerHTML). C'est un bug connu chez Firefox qui n'est pas bloquant.

Après recherche et lecture des pages suivantes :
 - http://groups.google.ca/group/netscape.public.mozilla.dom/browse_thread/thread/821271ca11a1bdbf/46c87b49c026246f?lnk=st&q=+focus+nsIAutoCompletePopup+selectedIndex&rnum=1#46c87b49c026246f
 - https://bugzilla.mozilla.org/attachment.cgi?id=143270

Voilà les solution pour contourner le problème :

Sous Firefox, il faut ajouter la proprieté autocomplete="off" au champ sur lequel on veut faire le focus,

Sous Internet Explorer, il faut laisser le navigateur respirer avant de trouver le champ pour lui donner le focus : setTimeout(function(){$('saisie').focus();},100);

 

un commentaire aucun rétrolien

lundi 3 juillet 2006

Changer le navigateur par défaut

Par Bruno le lundi 3 juillet 2006, 09:37 - Informatique

Vous allez dans outils, option, cocher "vérifier si Internet Explorer / Firefox est votre navigateur par défaut au démarrage" me direz vous, hé bien pas si simple !

Une fois sur deux ça ne marche pas !

Voici donc setbrowser, un petit soft de 42Ko tout mouillé qui permet de choisir en trois étapes (obligatoires) son navigateur par défaut. Et ça marche !

 

aucun commentaire aucun rétrolien

mercredi 28 juin 2006

Le traceur de flux de firebug

Par Bruno le mercredi 28 juin 2006, 23:15 - Général

En complément du post sur les extensions Firefox, voilà une démonstration du traceur de requetes XMLHttpRequests. Pour l'activer, c'est dans le menu options, "show XMLHttpRequests". 

Ensuite, vous allez sur un site qui exploite la technologie AJAX, et vous pouvez comprendre quand est ce que le client demande des infos au serveur. Par exemple, sur Google maps, il faut faire glisser la carte relativement loin pour avoir une nouvelle connexion. Sous Gmail, on constate que le XMLHttpRequest est utilisé en parallèle des iframes.

Enfin, sur un exemple de contrôle de formulaire qui consulte le serveur pour savoir si ce qui a été saisi est correct. L'émission envoie dans la requête l'élément saisi et la réponse retourne le resultat en format JSON. Vous allez pouvoir oublier le célèbre document.location =''; pour le débugage !

 

aucun commentaire aucun rétrolien

- page 1 de 2