Palier au manque de Firebug sous IE et/ou Opera

Palier au manque de Firebug sous IE et/ou Opera - HTML/CSS - Programmation

Marsh Posté le 25-11-2006 à 10:05:33    

Certains d'entre-vous connaissent Firebug qui est une extension firefox extrêmement utile et qui contient une console.

 

Pour faire du debugage JS, il m'arrive souvent de faire du debug à coup de alert(), maintenant avec firebug il suffit juste de faire un simple

Code :
  1. console.log("ma string ou mon objet ou ma variable" )


Et le tour est joué.

 

Pour palier au manque de console sous IE j'ai codé un truc un peu à l'arrache hier. J'ai eu l'idée quand un gus avait codé un truc du même genre mais qui s'ouvrait dans une popup. Et qui ne permettait que le console.log.
Mais, les popups c'est le maaaaalllll, et c'est killé par la plupart des navigateurs

 

Donc sous IE vous pouvez comme sous Firebug faire :
console.log("pouet" );
console.time("nomdutimer" ) <== lance un temp "nom du timer". (utile pour regarder à quel vitesse s'éxécute un script).
console.timeEnd("nomdutimer" ) <== affiche le temps d'éxécution. (idem pour lire le temps à la fin)

 

voici le code de la console. J'y ai rajouté une barre de saisie pour taper des fonctions dans la page et voir le résultat.

 
Code :
  1. if (!window.console) {
  2. var console= {
  3.     timers: {},
  4.  beforeLoadLogs:[],
  5.  console:null,
  6.  runField:null,
  7.  create:function() {
  8.   if (console.console) return;
  9.   var ie = document.all && window.print && !window.opera;
  10.   var subcons = document.body.insertBefore(document.createElement('form'),document.body.firstChild);
  11.   subcons.onsubmit = function() {console.eval(); return false;}
  12.   subcons.action = "javascript:void(0);";
  13.   with(subcons.style) {
  14.    margin="0"; padding="0";
  15.   }
  17.   var subconsInp = subcons.appendChild(document.createElement(ie ? '<input type="text">' : 'input'));
  18.   if (!ie) subconsInp.type='text';
  19.   with(subconsInp.style) {
  20.    width = "95%";
  21.    padding = '2px 4px';
  22.    border = '1px solid #000';
  23.    background = '#fff';
  24.   }
  25.   var subconsSubmit = subcons.appendChild(document.createElement(ie ? '<input type="submit">' : 'input'));
  26.   if (!ie) subconsSubmit.type='submit';
  27.   with (subconsSubmit.style) {
  28.    position = 'absolute';
  29.    visibility = 'hidden';
  30.    top = '0';
  31.    left = '0';
  32.   }
  33.   var cons = document.body.insertBefore(document.createElement('div'),document.body.firstChild);
  34.   with (cons.style) {
  35.    height = '150px';
  36.    background = '#fff';
  37.    overflow = 'auto';
  38.    border = '1px solid #000';
  39.    textAlign = 'left';
  40.    padding = '5px';
  41.    fontFamily = 'Verdana';
  42.    fontSize = '11px';
  43.    color = '#000';
  44.   }
  45.   console.console = cons;
  46.   console.runField = subconsInp;
  47.  },
  48.  createAfterLoading:function() {
  49.   console.create();
  50.   for (var i=0; i<console.beforeLoadLogs.length; i++) {
  51.    console.log(console.beforeLoadLogs[i].str, console.beforeLoadLogs[i].realHTML);
  52.   }
  53.   console.beforeLoadLogs=[];
  54.  },
  55.  eval:function() {
  56.   console.log('<span style="color:#F00">&gt;&gt;</span>&nbsp;'+console.runField.value,true);
  57.   console.log(eval(console.runField.value));
  58.   console.runField.value='';
  59.   return false;
  60.  },
  61.  log: function(str, realHTML) {
  62.   if (!document.body) {
  63.    console.beforeLoadLogs.push({str:str, realHTML:realHTML});
  64.    console.addEvent(window, 'load',console.createAfterLoading);
  65.    return;
  66.   }
  67.   if (!console.console) console.create();
  68.   if (typeof(str)=='undefined') return str;
  69.   str+="";
  70.   if (typeof(str)=='string' && !realHTML) {
  71.    str = str.replace(/</g,'&lt;');
  72.    str = str.replace(/>/g,'&gt;');
  73.    str = str.replace(/\r/g,'<br>');
  74.    str = str.replace(/\t/g,'&nbsp;');
  75.    str = str.replace(/\s/g,'&nbsp;');
  76.   }
  77.   if (console.console.innerHTML != '') console.console.innerHTML += '<hr>';
  78.   console.console.innerHTML += str+'<br>';
  79.   console.console.scrollTop = console.console.scrollHeight+10;
  80.   return false;
  81.  },
  82.  error:function(errorType, file, line) {
  83.   console.log('<strong style="color:red">/!\\&nbsp;Error:&nbsp;</strong>'+errorType+', file: <strong>'+file+'</strong>, (line '+line+')',true);
  84.   return true;
  85.  },
  86.     time: function(title) {
  87.       window.console.timers[title] = new Date().getTime();
  88.     },
  89.     timeEnd: function(title) {
  90.       var time = new Date().getTime() - window.console.timers[title];
  91.       console.log(['<strong>', title, '</strong>: ', time, 'ms'].join(''),true);
  92.     },
  93.  addEvent:function( obj, type, fn ) {
  94.   if (obj.addEventListener)
  95.    obj.addEventListener( type, fn, false );
  96.   else if (obj.attachEvent) {
  97.    obj["e"+type+fn] = fn;
  98.    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  99.    obj.attachEvent( "on"+type, obj[type+fn] );
  100.   }
  101.  }
  102. }
  103. window.onerror = console.error;
  104. }
 

A noter que :
-sous IE la console se lance dès qu'il y a une erreur de générée, sous Opera c'est la console de Opera qui catche l'erreur
-la console n'apparait que si on fait un console.log();
-le console.log ne permet pas comme firebug de faire : console.log(var1, var2, var3), il faut dans ce cas faire console.log(var1+","+var2+","+var3);
-le console.log transforme le HTML pour l'afficher dans la console, mais si vous voulez laisser le HTML comme du vrai HTML il faut faire : console.log("ma <strong>chaine</strong> HTML",true)

 

URL de test : http://gatsu.ftp.free.fr/html/consolelog.html
A tester sous :
-IE : tout fonctionne, le catch des erreurs aussi
-Opera : tout fonctionne saus le catch des erreurs
-Safari : pas testé, safari permet le console.log lorsqu'on lui active sa console JS donc j'en sais rien si ca marche
-Firefox : si firebug vous ne verrez pas de console, si pas fierbug vous verrez la console. Pour le catch des erreurs, j'en sais rien j'ai pas testé et j'ai la fleme de tester, et puis c'est inutile, autant installer firebug.

 

j'attends vos avis et vos demande pour améliorer la bête.
Merci de ne pas me demander de coloration syntaxique :o


Message édité par gatsu35 le 25-11-2006 à 10:20:56
Reply

Marsh Posté le 25-11-2006 à 10:05:33   

Reply

Marsh Posté le 25-11-2006 à 11:06:09    

L'idée est très interressante :)  Je vais tester ça un peu plus avant...

Message cité 1 fois
Reply

Marsh Posté le 25-11-2006 à 11:34:19    

gooopil a écrit :

L'idée est très interressante :)  Je vais tester ça un peu plus avant...


C'est surtout que c'est mieux de faire des console.log que des alert()

Reply

Marsh Posté le 25-11-2006 à 13:54:11    

Gatsu est nommé expert officiel en javascript

Message cité 1 fois
Reply

Marsh Posté le 25-11-2006 à 16:51:28    

Petit patch vite-fait pour ajouter les multi-arguments à console.log [:cupra] :
http://www.deuxfleurs.org/weberies/consolelog.html

Message cité 1 fois
Reply

Marsh Posté le 26-11-2006 à 15:53:41    

FlorentG a écrit :

Gatsu est nommé expert officiel en javascript


J'aurai du mal à être expert, chui quand même loin d'être une bete en JS :o
 

0x90 a écrit :

Petit patch vite-fait pour ajouter les multi-arguments à console.log [:cupra] :
http://www.deuxfleurs.org/weberies/consolelog.html


Merci chérie pour l'idéée de séparer en 2 fonctions distinctes. je vais le faire ce soir :o

Reply

Marsh Posté le 26-11-2006 à 16:05:43    

si tu fait console.log("<br>" ); ça bug un peu quand même, il escape pas le dump de ce qu'on tape.

Reply

Marsh Posté le 27-11-2006 à 09:38:54    

Je m'outre devant cette ligne:

Code :
  1. (ie ? '<input type="text">' : 'input')


C'est absolument a vomir. Et me sors pas le coup du "sinon ça marche pas sous IE" because tu sais très bien que ça marche avec un setAttribute.
 
Sinon c'est beau [:dawa]

Reply

Marsh Posté le 27-11-2006 à 11:00:02    

oui vient changer le type d'un input en live [:moule_bite]

Reply

Marsh Posté le 27-11-2006 à 11:08:52    

anapajari ->

Citation :


Cette commande n'est pas prise en chage. (line 30) [:dawa]


Code :
  1. subconsSubmit.setAttribute('type','submit');


 

Reply

Marsh Posté le 27-11-2006 à 11:08:52   

Reply

Marsh Posté le 27-11-2006 à 11:14:55    

Ce n'est pas la premiere fois que IE me fait le coup [:dawa]
ce con de IE empêche la modification du type d'un input que ce soit via .type ou un setAttribute les seules méthodes que j'ai trouvé sont de créer directement l'élément via ceci :  
document.createElement('<input type="submit">') c'est crade mais ca fonctionne très bien.
 
si on veut modifier le type d'un input déjà présent dans une page, j'ai aussi une méthode, c'est e changer ton outerHTML
 
J'ai déjà posté ça sur HFR

Message cité 1 fois
Reply

Marsh Posté le 27-11-2006 à 11:58:41    

gatsu35 a écrit :

Ce n'est pas la premiere fois que IE me fait le coup [:dawa]
ce con de IE empêche la modification du type d'un input que ce soit via .type ou un setAttribute les seules méthodes que j'ai trouvé sont de créer directement l'élément via ceci :  
document.createElement('<input type="submit">') c'est crade mais ca fonctionne très bien.
 
si on veut modifier le type d'un input déjà présent dans une page, j'ai aussi une méthode, c'est e changer ton outerHTML
 
J'ai déjà posté ça sur HFR


 
Naaan [:dawa], je sais que tu as déjà posté ça et je te répondrais la même chose que la dernière fois.
Avec IE tu ne peux pas CHANGER le type d'un input, mais tu peux tout à fait l'initialiser en utilisant setAttribute. C'est lié à la façon dont IE construit les inputs dans une page.
Et puis ça change rien à ce que j'ai toujours dit je vois pas dans quel cas tu peux avoir besoin de CHANGER le type d'un input.
Pour prouver ce que je dis ( testé FF et IE6):

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  5. <head>
  6.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  7.   <title>Exemple pour Gatsu</title>
  8.   <script type="text/javascript">
  9.   window.onload = function(){
  10.     // input text qui marche sous IE et FF
  11.     var inpText = document.createElement('input');
  12.     inpText.setAttribute('type', 'text');
  13.     document.getElementById('pouet').appendChild(inpText);
  14.     // input submit qui marche sous IE et FF
  15.     var inpSubmit = document.createElement('input');
  16.     inpSubmit.setAttribute('type', 'submit');
  17.     document.getElementById('pouet').appendChild(inpSubmit);
  18.     // truc qui plante sous IE ( avec setAttribute ou direct .type)
  19.     //inpText.setAttribute('type', 'radio');
  20.   }
  21.   </script>
  22. </head>
  23. <body>
  24. <form action="" method="post" id="pouet">
  25. </form>
  26. </body>
  27. </html>


Bon sinon j'arrête là car je fais devier un topic de qualitaÿ qui n'en a vraiment pas besoin.

Reply

Marsh Posté le 27-11-2006 à 12:04:35    

Toute remarque est bonne à prendre et ne fera que remonter la qualitaÿ du topic :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed