menu
  Home  ==>  articles  ==>  web  ==>  javascript_debugger   

Débugger Javascript - John COLIBRI.

  • résumé : un script Javascript qui affiche sur la page Web des message de mise au point
  • mots clé : Javascript - débugger - log - journal - TEXTAREA
  • logiciel utilisé : Windows XP, Delphi 6.0
  • matériel utilisé : Pentium 1.400Mhz, 256 M de mémoire, 140 Giga disque dur
  • champ d'application : Delphi 1 à 2005 sur Windows
  • niveau : développeur Delphi
  • plan :


1 - Introduction

Pour effectuer des traitements Web du côté client (validation de saisie, affichage de grille, navigation, analyse XML ...), nous pouvons utiliser soit des exécutables téléchargés (ActiveX, Java), soit des scripts clients (JavaScript, VBScript). Comme certains internautes (y compris moi) interdisent le téléchargement sur leur machine d'exécutables ayant la possibilité d'effectuer n'importe quel traitement, les ActiveX sont souvent refusés. Restent donc les scripts. Nous avons opté pour JavaScript. Pas de gaîté de coeur, oh non. Mais il n'y a pas d'autre moyen d'effectuer des traitements Client sans exécutable.



Javascript est interprété, et il n'y a pas de compilateur pour vérifier la syntaxe. De plus le langage est "sans erreur": une faute de syntaxe, la plus minime fut-elle, interrompt l'interprétation sans aucun message. Même Basic savait afficher "Syntax Error".



Cet article présente ici un petit script que nous utilisons dans toutes nos aventures au pays JavaScript et qui nous permet simplement de produire des traces indentées de l'exécution des scripts. La copie, quasi conforme, de display que nous utilisons en Delphi depuis pratiquement 10 ans.




2 - Principe

2.1 - L'affichage

Pour afficher sur une page Web, nous allons utiliser un contrôle Memo (TEXTAREA en HTML) auqel nous ajoutons les lignes du journal.

Notre page par défaut a l'allure suivante:

  • la moitié de gauche comporte la zone de traitement "normale"
  • la moitié de droite comporte le Memo avec deux boutons (ou ancres) pour tester l'affichage et vider le Memo (clear):
debug js



2.2 - L'affichage

Le script du journal (log) comporte deux fonctions:
  • do_display(p_texte) qui affiche le message, en indentant au besoin et en défilant le texte du Memo
  • do_clear_display() qui purge le Memo
Notons que nous avons utilisé do_display() plutôt que display() pour réduire les risques de collision avec un quelconque display() qui existerait dans d'autres scripts ou librairies Javascript système.




3 - Le Log Javascript

3.1 - Le script

Voici le texte de notre page debug.html:

<HTML>
  <HEAD>
    <SCRIPT language="JavaScript">
      var g_indentation=0;
      function do_display(p_string)
        {
          var spaces="";
          if (p_string.substring(0, 1)=="<")
            {
              g_indentation-= 2;
            }
          for (l_index=0; l_index< g_indentation; l_index++)
            {
              spaces+= " ";
            }
          l_memo_ref= window.document.debug_form.debug_memo;
          l_memo_ref.value += spaces+ p_string + "\n";
          l_memo_ref.scrollTop = l_memo_ref.scrollHeight;
          if (p_string.substring(0, 1)==">")
            {
              g_indentation+= 2;
            }
        } // do_display
      function do_clear_display()
        {
          window.document.debug_form.debug_memo.value= "";
        } // do_clear_display
    </SCRIPT>
  </HEAD>
  <BODY>
    <TABLE border= 1 width=100%><TBODY><TR>
      <TD width=40% valign=top>
        <SCRIPT>
          function display_ok()
            {
              do_display("ok");
            } // display_ok
          // g_total= 3 -;
          function has_error(p_value)
            {
              do_display("> has_error");
              if (p_value= 5)
                {
                  do_display("in_test_5");
                }
              // l_total= 3 -;
              do_display("< has_error");
            } // display_ok
        </SCRIPT>
        <A href="#" onClick="display_ok(); return false;">display_ok</A><BR>
        <A href="#" onClick="has_error(3)">has_error</A><BR><BR>
      </TD>
      <TD valign=top>
        <!-- debug display -->
        <TABLE border= 0><TBODY>
          <TR><TD>
            <A href="#" onClick="do_display('Hello'); return false;">test</A>
            <A href="#" onClick="do_clear_display(); return false;">clear</A>  
          </TR></TD>
          <TR><TD>
            <FORM name="debug_form">
              <TEXTAREA name="debug_memo" rows=10 cols=40></TEXTAREA>
            </FORM>
          </TR></TD>
        </TR></TBODY></TABLE>
      </TD>
    </TR></TBODY></TABLE>
  </BODY>
</HTML>



Notez que:

  • le script du Log a été placé directement dans l'en-tête <HEAD> de la page
  • nous accédons au Memo par

         l_memo_ref = window.document.debug_form.debug_memo;

  • et nous ajoutons du texte par

         l_memo_ref.value = l_memo_ref.value+ "xxx";

  • l'instruction:

         scrollTop = scrollHeight

    permet de défiler le Memo pour laisser la dernière ligne ajoutée visible
  • la globale g_indentation nous permet de gérer l'indentation:
    • la valeur initiale est 0
    • si le texte à afficher comporte ">" en premier caractère, nous post-incrémentons l'indentation de 2
    • si le texte à afficher comporte "<" en premier caractère, nous pré-décrémentons l'indentation de 2


La page contient deux exemples d'utilisation:
  • l'ancre "display_ok" affiche ok dans le Memo
  • l'ancre "has_error" met en évidence une erreur:
    • nous appelons has_error(3)
    • nous testons

          if (p_value= 5)

      qui réussit alors que le test devrait échouer. La raison est que nous avons utilisé l'affectation C = au lieu du test ==


Notez aussi que l'affichage ne résoud pas tous les problèmes. Si nous insérons une erreur de syntaxe dans "has_error" (la partie en commentaire actuellement dans le .HTML):

    l_total= 3 - ;

ou, pire, des guillemets en nombre impair:

    l_name= "alice;

l'interprète Javascript interrompt tout traitement:

  • la frappe pour appeler "has_error" ne présentera pas les textes du log (pas même le texte AVANT l'erreur)
  • le click sur "display_ok" sera aussi inopérent


La seule solution est par conséquent un travail incrémental très prudent:
  • frappe de quelques lignes
  • test
  • frappe de quelques lignes
  • test
  • etc.
Et en cas d'absence de réponse:
  • mise en commentaire /* */ de toutes les parties ajoutées, et sortie progressive des lignes ajoutées
  • éventuellement retour à la dernière version qui marche, et ajout par couper / coller des nouveautés


3.2 - Mon bêtisier Javascript

Parmi les erreur que je commets le plus souvent:
  • utilisation de = au lieu de == dans les tests
  • erreurs de majuscules

        var table= new array()  
         ... innerHtml ...

    au lieu de

        var table= new Array()  
         ... innerHTML ...

  • oubli des parenthèses du constructeur ou des appels de fonction

        var table= new Array;
        l_result= compute_total;

    au lieu de

        var table= new Array();
        l_result= compute_total();

  • à l'intérieur d'un constructeur, utilisation de VAR au lieu de THIS

        function f_c_table()
          {
            var m_row_count= 0;
          }

    au lieu de

        function f_c_table()
          {
            this.m_row_count= 0;
          }

    (VAR est légal pour une variable utilisée localement, mais permet pas de déclarer un attribut de l'objet)

  • et parallèlement, oubli de THIS pour accéder à un attribut

        function f_c_table()
          {
            this.m_row_count= 0;
            function display_table()
              {
                for (l_indice=0; l_indice< m_row_count; l_indice++)
                 { ... }
              } // display_table
          } // f_c_table

    au lieu de

        function f_c_table()
          {
            this.m_row_count= 0;
            function display_table()
              {
                for (l_indice=0; l_indice< this.m_row_count; l_indice++)
                 { ... }
              } // display_table
          } // f_c_table

  • déclaration de variables ou de fonctions ayant le même nom

        function f_c_table()
          {
            var l_value= 0;
             ...
            var l_value= "Delphi";
          }

    (la seconde déclaration est légale, mais "masque" la première)

  • erreurs de guillemets

        l_name= "alice';
        l_name= 'alice";
        l_name= "alice;

  • erreur d'orthographe

        function f_c_table()
          {
            this.m_row_count = 0;
             ...
            this.m_row_coun += 1;
          } // f_c_table

  • erreur de frappe (l'astérisque qui traîne à la fin de la ligne)

        l_amount+=5;*



Mentionnons que je ne fais du Javascript que depuis quelques semaines, et que je suis convaincu que je parviendrai sans effort à faire encore beaucoup d'erreurs plus étranges et bizarres dans le futur.




4 - Améliorations

Nous pourrions
  • envoyer les messages de log sur une autre page
  • utiliser <DIV> au lieu de <TABLE> pour partitionner notre page
  • ajouter les messages dans une zone <DIV> plutôt que d'utiliser un TEXTAREA
  • envoyer les texte de l'affichage dans un fichier "log.js", au lieu de le charger dans chaque page que nous débuggons



5 - Télécharger le code source

Vous pouvez télécharger: Ce .ZIP qui comprend:
  • le .DPR, la forme principale, les formes annexes eventuelles
  • les fichiers de paramètres (le schéma et le batch de création)
  • dans chaque .ZIP, toutes les librairies nécessaires à chaque projet (chaque .ZIP est autonome)
Ces .ZIP, pour les projets en Delphi 6, contiennent des chemins RELATIFS. Par conséquent:
  • créez un répertoire n'importe où sur votre machine
  • placez le .ZIP dans ce répertoire
  • dézippez et les sous-répertoires nécessaires seront créés
  • compilez et exécutez
Ces .ZIP ne modifient pas votre PC (pas de changement de la Base de Registre, de DLL ou autre). Pour supprimer le projet, effacez le répertoire.

La notation utilisée est la notation alsacienne qui consiste à préfixer les identificateurs par la zone de compilation: K_onstant, T_ype, G_lobal, L_ocal, P_arametre, F_unction, C_lasse. Elle est présentée plus en détail dans l'article La Notation Alsacienne



Comme d'habitude:

  • nous vous remercions de nous signaler toute erreur, inexactitude ou problème de téléchargement en envoyant un e-mail à jcolibri@jcolibri.com. Les corrections qui en résulteront pourront aider les prochains lecteurs
  • tous vos commentaires, remarques, questions, critiques, suggestion d'article, ou mentions d'autres sources sur le même sujet seront de même les bienvenus à jcolibri@jcolibri.com.
  • plus simplement, vous pouvez taper (anonymement ou en fournissant votre e-mail pour une réponse) vos commentaires ci-dessus et nous les envoyer en cliquant "envoyer" :
    Nom :
    E-mail :
    Commentaires * :
     

  • et si vous avez apprécié cet article, faites connaître notre site, ajoutez un lien dans vos listes de liens ou citez-nous dans vos blogs ou réponses sur les messageries. C'est très simple: plus nous aurons de visiteurs et de références Google, plus nous écrirons d'articles.



6 - L'auteur

John COLIBRI est passionné par le développement Delphi et les applications de Bases de Données. Il a écrit de nombreux livres et articles, et partage son temps entre le développement de projets (nouveaux projets, maintenance, audit, migration BDE, migration Xe_n, refactoring) pour ses clients, le conseil (composants, architecture, test) et la formation. Son site contient des articles avec code source, ainsi que le programme et le calendrier des stages de formation Delphi, base de données, programmation objet, Services Web, Tcp/Ip et UML qu'il anime personellement tous les mois, à Paris, en province ou sur site client.
Créé: avr-05. Maj: aou-15  148 articles, 471 sources .ZIP, 2.021 figures
Contact : John COLIBRI - Tel: 01.42.83.69.36 / 06.87.88.23.91 - email:jcolibri@jcolibri.com
Copyright © J.Colibri   http://www.jcolibri.com - 2001 - 2015
Retour:  Home  Articles  Formations  Développement Delphi  Livres  Pascalissime  Liens  Download
l'Institut Pascal

John COLIBRI

+ Home
  + articles_avec_sources
    + bases_de_donnees
    + web_internet_sockets
      – http_client
      – moteur_de_recherche
      – javascript_debugger
      + asp_net
      – client_serveur_tcp
      – site_editor
      – pascal_to_html
      – cgi_form
      + les_logs_http_bruts
      + les_blogs
      – intraweb_tutorial
      + services_web
      – serveur_web_iis
      – client_serveur_pop3
    + prog_objet_composants
    + office_com_automation
    + colibri_utilities
    + uml_design_patterns
    + graphique
    + delphi
    + outils
    + firemonkey
    + vcl_rtl
    + colibri_helpers
    + colibri_skelettons
  + formations
  + developpement_delphi
  + présentations
  + pascalissime
  + livres
  + entre_nous
  – télécharger

contacts
plan_du_site
– chercher :

RSS feed  
Blog

Formation Perfectionnement Delphi Les techniques avancées : la programmation objet, l'écriture de composants, l'accès aux bases de données, Xml, le multi-tâche, la programmation Internet - 5 jours