29 917
modifications
Modifications
Sauter à la navigation
Sauter à la recherche
Ligne 10 :
Ligne 10 : − + Ligne 28 :
Ligne 28 : − Une fois le visualiseur ("Visualize" en anglais) démarré, WebIDE vous affichera l'écran suivant: − [[Fichier:Pi-WebIde-Visu-02.png]] [http://learn.adafruit.com/assets/3438 ]+ + − La barre d'outils (#1) vous permet de parcourir votre programme. Vous pouvez naviguer de la façon désirée , en avant, en arrière, sauter au départ, ou à la fin.+ − Le code (#2) est listé à gauche. Pendant que vous parcourrez votre programme, vous verrez deux flèches dans la gouttière gauche qui vous indiqueront quelle ligne est exécutée (vert), et laquelle sera exécutée en cliquant "Forward" (rouge).+ − La colonne de droite affiche la pile mémoire (#3) que votre programme exécute. Vous verrez l'assignation de vos variables, la création des objets, etc.+ + + + + − + + + + + + + + + − + + + + + + + + + + + + + + + + + + + + − La chose à noter concernant le visualiseur est que votre script entier est exécuté sur le serveur, il vous renvoie les retours de votre script dans WebIDE. ce n'est pas un débogueur en temps réel (mais WebIDE le fait aussi bien!). Par exemple, si vous avez une LED qui doit s'allumer dans votre programme, elle s'allumera rapidement et nous renvoie sa réponse, et au cours de votre programme, la LED ne s'allumera pas comme elle est déjà allumée.+ − +
→Introduction
* "Comment fonctionne la récursivité?",
* "Comment fonctionne la récursivité?",
* "Comment fonctionne l'appel de fonction?",
* "Comment fonctionne l'appel de fonction?",
* "Comment fonctionne les méthodes avec les lists? des méthodes tels que "append"".
* "Comment fonctionne les méthodes avec les listes? des méthodes tels que "append"".
== Démarrer le visualiseur ==
== Démarrer le visualiseur ==
== Le visualiseur ==
== Le visualiseur ==
=== L'interface du Visualiseur ===
Une fois le visualiseur ("Visualizer" en anglais) démarré, WebIDE vous affichera l'écran suivant:
[[Fichier:Pi-WebIde-Visu-02.png]]
La barre d'outils (#1) vous permet de parcourir votre programme. Vous pouvez naviguer a votre guise dans votre programme, en avant, en arrière, sauter au départ, ou à la fin.
Vous y trouverez les boutons/liens suivants:
* '''First''' - Signifiant ''premier'', permet de revenir à la première ligne exécutée.
* '''Back''' - Signifiant ''en arrière'', permet de revenir à la ligne précédemment exécutée.
* '''Forward''' - Signifiant ''en avant'', permet de se déplacer sur prochaine la ligne exécutée.
* '''Last''' - Signifiant ''dernier'', permet de se déplacer sur la dernière ligne exécutée.
Le panneau du bas est la sortie de votre programme (#4). Chaque fois que vous avez une déclaration "print", ou tout autre type de sortie, vous la verrez s'afficher dans cette section.
Le centre de la barre (#1) affiche également le texte "Step 1 of 29" signifiant ''étape 1 de 29''.
Le code (#2) est affiché à gauche. Pendant que vous parcourrez votre programme, vous verrez deux flèches dans la marge gauche qui vous indiqueront quelle ligne est exécutée (vert), et une flèche rouge pour indiqué celle qui sera exécutée en cliquant "Forward" ("Forward" signifie ''en avant/vers l'avant'').
La colonne de droite (#3) affiche l'évolution de pile mémoire au cours de l’exécution des étapes ("''steps''") du programme. Vous verrez l'assignation de vos variables, la création des objets, etc.
Le panneau du bas (#4) affiche la sortie de votre programme. Chaque fois que vous avez une instruction "print", ou tout autre type de sortie, vous le résultat de ces instruction s'afficher dans cette section.
=== En pratique ===
Voici une capture d'écran qui vous montre le déroulement d'un programme :
Voici une capture d'écran qui vous montre le déroulement d'un programme :
[[Fichier:Pi-WebIde-Visu-03.png]] [http://learn.adafruit.com/assets/3439 ]
[[Fichier:Pi-WebIde-Visu-03.png]]
Comme vous pouvez le constater sur l'exemple ci dessus:
* Le visualiseur affiche l'état actuel dans lequel vous pouvez voir l'état des différents variables globale. Notez la valeur de la variable Z.
* Il présente également la fonction foo (en cours d'exécution)
* La ligne juste exécutée est le numéro #31.
* La prochaine étape exécutée est la numéro #24 dans la fonction foo... étape dans laquelle l'on va ajoute la valeur "hello" dans la liste.
Si vous prêtez attention à la ligne #31.
* la fonction foo est appelée avec "z" comme paramètre "lst".
* "z" est aussi une liste (une variable globale).
* En observant l'appel de "foo" dans le visaliser, vous pouvez constater que:
** "lst" pointer vers une liste (où les valeurs sont visibles)
** que la liste en mémoire (les valeurs) est en fait partagé par "lst" et "z"
== Note importante ==
La chose à noter concernant le visualiseur est que votre script est exécuté en entier sur le serveur, puis vous renvoie les retours de votre script dans WebIDE. Ce n'est pas un débogueur en temps réel, même si WebIDE dispose aussi d'un débogueur.
Par exemple, si vous avez une LED qui doit s'allumer dans votre programme, elle s'allumera rapidement au cours de l'exécution par le visualiseur.
Ensuite, pendant que vous parcourez les étapes dans le visualiseur, cette dernière ne s'allumera plus... puisque vous inspectez les étapes dans le visualiseur et '''non re-exécuter''' le programme en mode pas-à-pas.
Le crédit pour le visualiseur est rendu à Philip Guo à[http://pythontutor.com/ pythontutor.com]. Nous avons dérivé, torturé, converti, et modifié cette création open source pour quelle fonctionne simplement avec notre WebIDE.
Le crédit pour le visualiseur est a rendre à Philip Guo de [http://pythontutor.com/ pythontutor.com]. Adafruit Industries à dérivé, converti et modifié cette création open-Source pour quelle fonctionne avec WebIDE.
{{Pi-WebIde-TRAILER}}
{{Pi-WebIde-TRAILER}}