Palier au manque de Firebug sous IE et/ou Opera

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Palier au manque de Firebug sous IE et/ou Opera

gatsu35

Blablaté par Harko

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 :

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 :

if (!window.console) {
var console= {
timers: {},
beforeLoadLogs:[],
console:null,
runField:null,
create:function() {
if (console.console) return;
var ie = document.all && window.print && !window.opera;
var subcons = document.body.insertBefore(document.createElement('form'),document.body.firstChild);
subcons.onsubmit = function() {console.eval(); return false;}
subcons.action = "javascript:void(0);";
with(subcons.style) {
margin="0"; padding="0";
}
var subconsInp = subcons.appendChild(document.createElement(ie ? '<input type="text">' : 'input'));
if (!ie) subconsInp.type='text';
with(subconsInp.style) {
width = "95%";
padding = '2px 4px';
border = '1px solid #000';
background = '#fff';
}
var subconsSubmit = subcons.appendChild(document.createElement(ie ? '<input type="submit">' : 'input'));
if (!ie) subconsSubmit.type='submit';
with (subconsSubmit.style) {
position = 'absolute';
visibility = 'hidden';
top = '0';
left = '0';
}
var cons = document.body.insertBefore(document.createElement('div'),document.body.firstChild);
with (cons.style) {
height = '150px';
background = '#fff';
overflow = 'auto';
border = '1px solid #000';
textAlign = 'left';
padding = '5px';
fontFamily = 'Verdana';
fontSize = '11px';
color = '#000';
}
console.console = cons;
console.runField = subconsInp;
},
createAfterLoading:function() {
console.create();
for (var i=0; i<console.beforeLoadLogs.length; i++) {
console.log(console.beforeLoadLogs[i].str, console.beforeLoadLogs[i].realHTML);
}
console.beforeLoadLogs=[];
},
eval:function() {
console.log('<span style="color:#F00">>></span> '+console.runField.value,true);
console.log(eval(console.runField.value));
console.runField.value='';
return false;
},
log: function(str, realHTML) {
if (!document.body) {
console.beforeLoadLogs.push({str:str, realHTML:realHTML});
console.addEvent(window, 'load',console.createAfterLoading);
return;
}
if (!console.console) console.create();
if (typeof(str)=='undefined') return str;
str+="";
if (typeof(str)=='string' && !realHTML) {
str = str.replace(/</g,'<');
str = str.replace(/>/g,'>');
str = str.replace(/\r/g,'<br>');
str = str.replace(/\t/g,' ');
str = str.replace(/\s/g,' ');
}
if (console.console.innerHTML != '') console.console.innerHTML += '<hr>';
console.console.innerHTML += str+'<br>';
console.console.scrollTop = console.console.scrollHeight+10;
return false;
},
error:function(errorType, file, line) {
console.log('<strong style="color:red">/!\\ Error: </strong>'+errorType+', file: <strong>'+file+'</strong>, (line '+line+')',true);
return true;
},
time: function(title) {
window.console.timers[title] = new Date().getTime();
},
timeEnd: function(title) {
var time = new Date().getTime() - window.console.timers[title];
console.log(['<strong>', title, '</strong>: ', time, 'ms'].join(''),true);
},
addEvent:function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
}
window.onerror = console.error;
}

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

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

Publicité

gooopil

pfiew

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

Message cité 1 fois

gatsu35

Blablaté par Harko

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()

FlorentG

Unité de Masse

Gatsu est nommé expert officiel en javascript

Message cité 1 fois

0x90

→

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

Message cité 1 fois

gatsu35

Blablaté par Harko

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

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

0x90

→

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

anapajari

s/travail/glanding on hfr/gs;

Je m'outre devant cette ligne:

Code :

(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]

gatsu35

Blablaté par Harko

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

gatsu35

Blablaté par Harko

anapajari ->

Citation :

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

Code :

subconsSubmit.setAttribute('type','submit');

Publicité

gatsu35

Blablaté par Harko

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

anapajari

s/travail/glanding on hfr/gs;

gatsu35 a écrit :

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 :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple pour Gatsu</title>
<script type="text/javascript">
window.onload = function(){
// input text qui marche sous IE et FF
var inpText = document.createElement('input');
inpText.setAttribute('type', 'text');
document.getElementById('pouet').appendChild(inpText);
// input submit qui marche sous IE et FF
var inpSubmit = document.createElement('input');
inpSubmit.setAttribute('type', 'submit');
document.getElementById('pouet').appendChild(inpSubmit);
// truc qui plante sous IE ( avec setAttribute ou direct .type)
//inpText.setAttribute('type', 'radio');
}
</script>
</head>
<body>
<form action="" method="post" id="pouet">
</form>
</body>
</html>

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

gatsu35

Blablaté par Harko

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

FORUM HardWare.fr

Programmation

HTML/CSS

Palier au manque de Firebug sous IE et/ou Opera

Sujets relatifs
[PHP/MySQL] Wrappers MySQL - manque d'efficacité?	[HTML] Traitement du signe Euro par Opéra (et les autres)
adapter code opera aux autres navigateurs	Fieldset: problème de centrage de la légende sous Opéra
[JS/DOM] Bug sous IE, l'image se s'affiche pas ! [RESOLU]	Problème de validation automatique de forumlaire avec Opera [RESOLU]
[resolu] Caractere d'echappement (il m'en manque un)	[CSS]css non reconnu par ie mais OK avec firefox et opera [Résolu]
me manque PHP_MYSQL.DLL [Résolu]	[CSS] Problème de CSS avec Firefox, mais pas avec Opera ou IE.
Plus de sujets relatifs à : Palier au manque de Firebug sous IE et/ou Opera

Page générée en 0.088 secondes