11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Alors je me retrouve devant un petit problème.
Je voudrais récupérer des variables dans la console pour faire des tests, mais je sais le faire que si elles sont globales


var variable_a_tester;

(function($) {

variable_a_tester = "je suis la variable à tester";

}(jQuery));


Là ça marche comme je veux, c'est à dire que dans la console
variable_a_tester// je suis la variable à tester



Mais je voudrais pourvoir récupérer une variable dépendante de jquery, du style


(function($) {
'use strict';
var variable_a_tester = "je suis la variable à tester";

}(jQuery));


et là ça marche pas et je sais pas faire ?!?
J'ai cru comprendre qu'il fallait utiliser des breakpoints...
Mais je ne sais pas comment faire ...
Modifié par Heillige Leben (03 Aug 2014 - 10:40)
Petite précision,
j'ai pris l'habitude de me mettre en 'use strict'.
Du coup

(function($) {
'use strict';
variable_a_tester = "je suis la variable à tester";
}(jQuery));



n'est pas légal !
j'ai éditer plus haut dans le post précédent !
Modifié par Heillige Leben (03 Aug 2014 - 10:39)
Bonjour.

Tout dépend comment tu veux débugger ton code, si tu veux le contenu de ta variable à un instant précis dans ton code, tu mets un console.log directement à cette endroit là (malgré tout il reste le problème de portée de ta variable).

Mais je ne pense pas que se soit ton problème, sinon effectivement, tu dois utiliser un peu plus ton débuggeur de navigateur (quel navigateur ?), auquel cas après tu peux utiliser les "espions" (watch expressions sous Chrome), en insérant des points d'arrêt (breakpoints) dans ton code JS.
Après tout ceci n'est pas magique non plus, i.e. que si ta variable est définie dans une fonction et que tu arrêtes ton code dans une autre, elle ne sera très probablement plus visualisable.
Merci pour ta réponse,
en fait l'idée de base c'est de tester différents objets javascripts créés avec la librairie backbone.js

Alors pour préciser, je suis sous chrome, et je voudrais directement saisir dans la console du navigateur la variable, ou créer des instances ou obtenir des propriétés, les modifier, les supprimer.

Le problème c'est que j'ai l'habitude de mettre mon code javascript dans un objet jquery du type :

(function($) {
//code ici
}(jQuery));


du coup ça ne marche plus Smiley confus

Je voudrais dans un premier temps directement pouvoir récupérer dans la console sa valeur en inscrivant son nom:

Dans la console
variable_a_tester 


(function($) {
'use strict';
var variable_a_tester = "je suis la variable à tester";

}(jQuery));


et avoir donc :

je suis la variable à tester


Du coup oui, les breakpoints... Mais comment ca marche ???
Mouais, tu ne devrais pas pouvoir faire ce que tu veux avec le débuggeur.

Tu peux peut-être ajouter tes fonctions dans l'objet window, elle seront normalement directement accessible depuis ta console.

Un truc du style :
window.variable_a_tester = "Test"
Oui ca marche Smiley smile
Il suffit d'attacher la variable à l'objet window pour à la fois la déclarer et la rendre globale

(function($){
	'use strict';
	window.variable_a_tester = "je suis la variable à tester";
})(jQuery);


et lorsque dans la console je tape
variable_a_tester

il me rend bien
je suis la variable à tester


Ce qui est bien plus pratique que d’écrire des console.log() partout dans le code...
Modifié par Heillige Leben (28 Aug 2014 - 10:10)
Heillige Leben a écrit :
Oui ca marche Smiley smile
Il suffit d'attacher la variable à l'objet window pour à la fois la déclarer et la rendre globale

Euh.......

Oui, c'est en effet ce que je te suggérais...
Bonjour à toi (j'espère que je n'arrive pas trop tard, car effectivement les solutions proposées ne sont pas très propres - utilisant les variables globales)

Tu peux effectivement utiliser les breakpoints.
Comment ça fonctionne ?

Ca dépend du navigateur que tu utilise mais c'est plus ou moins la même façon de les gérer.
1/ Tu vas dans l'onglet "Scripts", tu choisis la source dans laquelle se trouve la variable que tu souhaite "espionner" (vérifier la valeur)

2/ En cliquant sur le numéro de la ligne tu insérera un "breakpoint" c'est à dire un point d'arrêt lorsque le script arrivera à cette ligne. Le script s'arrête avant que l'instruction ne soit exécutée.

3/ Lorsque ton script à été arrêter sur un breakpoint, tu es capable d'utiliser la console pour vérifier le contenu de tout ce qui est accessible dans le scope d'où se situe le breakpoint.