console.log affiche une "valeur future" de l'objet passé en paramètre

**Neckara** · 30/10/2017, 20h20

Bonjour,

Je viens de m'apercevoir que console.log affiche une "valeur future" de l'objet passé en paramètre.

Je présume que console.log est asynchrone et conserve une référence de l'objet qui lui est passé en paramètre. Ainsi, si cet objet est modifié après l'appel à console.log, son affichage le sera aussi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// pseudo-code
 
let x = 5;
console.log(x); // affichera 7.
x = 7;

Je suis quelque peu étonné par ce comportement et je souhaiterais savoir s'il y a un moyen de forcer console.log à afficher, lors de son appel, la valeur actuelle de l'objet.
Pour le moment j'utilise console.log( $.extend( true, {}, mon_objet));, est-ce que vous connaîtriez une meilleure méthode, si possible sans utiliser jQuery ?

En vous remerciant d'avance,

**SpaceFrog** · 31/10/2017, 09h25

Tu as du tomber dans un warp espace temps ...
https://jsfiddle.net/n05g7xdx/

J'ai bien 5 en console ...

**Neckara** · 31/10/2017, 13h41

Comme indiqué, c'est du pseudo-code. Le code que j'ai marchera :

si je l'exécute dans un worker ;
si je met un point d'arrêt grâce au débogueur ;
si je l'exécute directement dans la console JavaScript du navigateur.

Je pense que le problème vient du fait que j'ai jusqu'à une seconde de calcul, ce qui retarde l'exécution du console.log.

**SpaceFrog** · 31/10/2017, 13h48

Oui car javascript fonctionne en bulle, la ligne suivant est interprétée avant que ton calcul ne soit terminé

**danielhagnoul** · 01/11/2017, 11h45

C'est parce que le "log" est retardé jusqu'à ce que Chrome ait le temps de l'exécuter, la priorité est donnée à l'exécution du JS.

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<!--
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
				integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
				crossorigin="anonymous">
	-->
	<title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
 
                        {
                                let t = [ 0, 2 ];
                                
                                console.log( t );
                                
                                t[ 0 ] += 2;
                                
                                console.log( t );
                        }
                        
                        {
                                let t = [ 0, 2 ];
                                
                                console.log( t );
                                
                                setTimeout( () => {
                                        t[ 0 ] += 2;
                                        console.log( t );
                                }, 100 );
                        }
 
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>

**danielhagnoul** · 02/11/2017, 10h44

Si vous souhaitez suivre l'évolution d'une ou plusieurs valeurs dans la console (il y a aussi le débogage ligne par ligne), je pense qu'il est préférable de stocker les valeurs dans un Array et de faire un seul console.log() à la fin du script JS.

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<!--
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
				integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
				crossorigin="anonymous">
	-->
	<title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
 
                        {
                                let
                                        x = 5,
                                        y = 2,
                                        arX = [ x ],
                                        arY = [ y ];
                                
                                x = x**y;
                                arX.push( x );
                                
                                y = x - 2 * y;
                                arY.push( y );
                                
                                x = Math.pow( y, x );
                                arX.push( x );
 
                                y = Math.log( x );
                                arY.push( y );
                                
                                console.log( `arX = ${ arX.join( ", "  ) }` );
                                console.log( `arY = ${ arY.join( ", "  ) }` );
                        }
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>

console.log affiche une "valeur future" de l'objet passé en paramètre

JavaScript

Discussions similaires

Partager

Partager