Debugger Du Javascript, Debugger du javascript

Salut !

Je voudrais juste savoir si quelqu'un conaissait un outil ou procedé pour developper du javascript.

Là je code "à la main", je sauvegarde, fais refresh du browser, clique droit->voir source pour voir le resultat et c'est un peu ... chiant

Il y a pas de compilateur comme pour le Java ?
(que je pourrait lancer avec un GUI d'un facon automatique par exemple)

Le top serait de pouvoir le compiler ou le faire tourner avec un outil externe à un navigateur,
mais peut-être que c'est pas possible à cause des variables environmentales du navigateur ?


Enfin si vous avec des outils (dos/windows) que vous voulez partager, je suis preneur !


Merci

/Ludvig
ps. je me souviens qu'on pouvait facilement integrer IE dans un projet c++ avec
MSVC, au pire je pourrait peut-être en faire un outil moi même mais bon ... reinventer la roue ...

J'utilise différents outils pour les javascript; mais déjà, quand tu parles de "compiler", tu peux oublier. Le Javascript, c'est du script. C'est à dire que c'est interprété (et en général par un navigateur). Vouloir le traiter en dehors d'un navigateur ne me semble pas judicieux : il faudrait alors refaire tout le DOM, cela ne te permettrait pas de vérifier les différences entre navigateurs etc...

Perso, j'utilise les barres plugin d'IE 7 (nécessite .NET2) et celle sous FF (web developper je crois) pour vérifier la conscrtruction HTML et CSS.
Pour le "debugage", je laisse IE me déclencher celui de Visual Studio -- je développe en ASP.NET --(option d'IE : activer le debugger sur les erreurs javascripts ou un truc comme ca) pour repérer plus rapidement les erreurs; mais ca ne t'affranchit pas de réexécuter à chaque fois.

Alors dans mon Firefox j'ai la console d'erreur dont je me sers. Je crois qu'elle est là par défaut.
Ca m'affiche une icone rouge quand il y a une couille, ca me montre l'erreur et la ligne du js.
Autrement j'ai un module javascript debugger installé qui a l'air bien plus complet mais que j'ai pas trop essayé.

Je pense que Firefox est le mieux loti question petit débuggeurs javascript.

Un des plus connus est Firebug http://www.getfirebug.com/ qui intègre tout ce qui peut être utile à un webmaster pour jouer avec le CSS, le Javascript et autre. Ca te rajoute un p'ti icone en bas à droite qui reste vert si pas d'erreur et passe au rouge si y'a un petit soucis. En plus tu peux manipuler les proprietes css sans toucher au code.

Après, de base y'a effectivement la console "Outils" > "Console d'erreur" qui te permet de voir rapidement la ligne, le script où sont les erreurs, tu peux même cliquer sur un message pour ouvrir le script incriminé à la ligne qui déraille.


Côté IE, il existe pas mal de truc différents, le must à mon avis est le déboggage de VStudio qu'à rapidement présenté Kalan.

Tu peux utiliser le plugin Aptana pour Eclipse (je te laisse chercher "aptana" sur google il n'y en a qu'un ). Il inclut un débuggeur particulièrement efficace : tu définis des points d'arrêt et tout Par contre ça marche mieux quand on a un double écran car le navigateur est gelé par le point d'arrêt : avec deux écrans on a l'éditeur (le débuggeur) sur l'un, et le navigateur sur l'autre. Enfin au pire il faut le savoir et organiser les fenêtres en fonction mais c'est un outil extraordinaire et à ma connaissance le seul éditeur proposant ce type de fonctionnalité (+ le merveilleux environnement Eclipse, quoiqu'un peu gourmand en RAM c'est vrai).

Note qu'il inclut également d'office les librairies les plus connues (prototype, mootools, yahoo!ui, scriptaculous, etc...).

Sinon il y a aussi Firebug pour Firefox (très puissant parait-il mais je ne l'ai pas encore utilisé), et la console d'erreurs Opera qui est encore plus bavarde et précise que celle de Firefox.

wouw merci beaucoup, beaucoup de choses a regarder !

juste une (premier) question, vous parlez de quel version de msvc ? J'ai toujours
boudé les .net et suis resté au 6 ça semble très interessant quand même vue
que je ne cherche pas un outil qui me dis où il y a une erreur de script mais
plutôt qui m'aide a voir ce que je code, le resultat quoi.
Je vais quand même regarder le tout vue que le javascript, c'est pour moi un peu nouveau


/Ludvig

Une autre question tant que j'y suis :

J'ai une carte (en image) et un certain nombre d'informations que
le joueur peux decider de faire afficher en cliquant sur des "checkboxes"
qui eux appelle une fontion javascript qui regénère la page (super vite ^^).

Mais là je peux même pas voir le code sortie par mon javascript, le source de la page
montre que le javascript lui même (et les checkboxes), donc je peux evidamment
deduire ce que j'affiche, mais le bugtracking est très fastidieux...

Est-ce que c'est possible de faire tourner un javascript et "sauvegarder" ce qui
en sorte sans passer pas un navigateur (en php par exemple, ou c/c++) ?


/Lud *je suis pas sorti de l'auberge là j'ai comme impression...*

Tout dépend de ce que tu "sors" avec ton javascript.

Un p'ti "pas à pas" avec les outils qu'on t'a présenté devrait te donner une idée quand même, ça ne sert pas qu'à voir les bugs, ça permet aussi de poser des points d'arret pour voir quand et comment s'excute certaines instructions

Firebug et Firefox DOIVENT devenir tes amis. Ce n'est pas un conseil, c'est une... essentialitée .

En lisant ton paragraphe, j'ai l'impression que tu parle de AJAX, c'est à dire mettre à jour une partie précise du site (remplir un DIV de contenu par exemple).

Si c'est le cas, dans Firebug, assure toi que Show XMLhttprequests est coché, puis fait afficher ta mappe, dans l'onglet Console, tu va voir ta requête POST en 3 onglet, celui qui t'intéressera est RESULT, qui affiche précisément ce que retourne ta requete.


De plus, Firefox lui-même offre la possibilité soit d'afficher la source ORIGINALE, soit d'afficher une partie de la source ACTUELLEMENT.

La différence est que si tu fais juste "afficher la source", celle qui s'affichera est celle au moment de charger la page. Si tu as dynamiquement modifié ta source entre temps, tu ne trouvera rien de tes modifications.

Alors il est très pratique de savoir que tu peux sélectionner une partie de ta page (ou toute au complet), cliquer le bouton de droit et faire AFFICHER LA SOURCE DE LA SÉLECTION, ou quelque chose du genre (moi j'ai FF en anglais et c'est View Selection Source)

La source affiché sera celle à l'instant même, pas l'originale.

Ca a l'air d'être ce dont j'ai besoin, merci !

J'avait pensé trouver un sorte de compilateur pour que je puisse faire moi même des petits
outils, mais j'ai comme l'impression que ça n'existe pas de compilateur javascript,
enfin j'ai du coup pas l'occaz de reinventer la roue

/Ludvig