[Résolut] Débogger un widget

[sultan87]

Bonsoir
j’ai écrit un widget à partir d’un widget existant
comment débogger
peut etre utiliser console.log mais comment faire
Pierre

[Bison]

Bonsoir,

Outils de développement des navigateurs pour repérer les erreurs JavaScript au besoin, identifier les différents attributs, etc…

[sultan87]

merci pour la réponse mais comment faire
Pierre

[Bison]

Je ne sais pas si tu te rends bien compte que ta question est tellement vaste que je vois pas trop quoi te dire .

https://www.malekal.com/chrome-firefox-outils-de-developpement/

[sultan87]

j’ai mis dans le code de mon widget des 'console.log(‹ xxx ›) pour suivre le déroulement
par exemple

comment visualier ces ‹ console.log ›
Pierre

[sultan87]

  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      
      if ('#colorON#'.match(/#\w+#/i) == null) {
      console.log('1')
        document.documentElement.style.setProperty('--colorON#uid#', '#colorON#');
      }

      if ('#colorTextON#'.match(/#\w+#/i) == null) {
      console.log('2')
        document.documentElement.style.setProperty('--colorTextON#uid#', '#colorTextON#');
      }
      
      if ('#textON#'.match(/#\w+#/i) == null) {
      console.log('3')
        document.getElementsByClassName('switch-label#uid#')[0].setAttribute('data-on', '#textON#');
      }

      if ('#colorOFF#'.match(/#\w+#/i) == null) {
      console.log('4')
        document.documentElement.style.setProperty('--colorOFF#uid#', '#colorOFF#');
      }

      if ('#colorTextOFF#'.match(/#\w+#/i) == null) {
      console.log('5')
        document.documentElement.style.setProperty('--colorTextOFF#uid#', '#colorTextOFF#');
      }
      
      if ('#textOFF#'.match(/#\w+#/i) == null) {
      console.log('6')
        document.getElementsByClassName('switch-label#uid#')[0].setAttribute('data-off', '#textOFF#');
      }

      if ('#width#'.match(/#\w+#/i) == null) {
      console.log('7')
        document.documentElement.style.setProperty('--buttonWidth#uid#', '#width#');
      }

      if ('#height#'.match(/#\w+#/i) == null) {
      console.log('8')
        document.documentElement.style.setProperty('--buttonHeight#uid#', '#height#');
      }

      if ('#border#'.match(/#\w+#/i) == null) {
      console.log('9')
        document.documentElement.style.setProperty('--buttonBorder#uid#', '#border#');
      }
      
      if ('#gradient#'.match(/#\w+#/i) == null) {
      console.log('10')
        document.documentElement.style.setProperty('--colorGradient#uid#', '#gradient#');
      }


      if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
      console.log('12')
        if (jeedom.cmd.normalizeName('#name#') == 'on') {
        console.log('13')
          $('.cmd[data-cmd_id=#id#]').hide();
          $('.switch-input#uid#').prop('checked', false);   
        }else{
        console.log('14')
          $('.cmd[data-cmd_id=#id#]').show();
          $('.switch-input#uid#').prop('checked', true);    
        }
      } else {
      console.log('15')
        if (jeedom.cmd.normalizeName('#name#') == 'off') {
        console.log('16')
          $('.cmd[data-cmd_id=#id#]').hide();
          $('.switch-input#uid#').prop('checked', true);  
        }else{
          $('.cmd[data-cmd_id=#id#]').show();
          console.log('17')
          $('.switch-input#uid#').prop('checked', false);     
        }
      }

    }
    jeedom.cmd.update['#id#']({display_value:'#state#'});
    $('.cmd[data-cmd_uid=#uid#] .switch#uid#').off().on('click', function () {
    console.log('18')
      jeedom.cmd.execute({id: '#id#'});
    });
  </script>

[Bison]

@sultan87

comment visualier ces ‹ console.log ›

Dans la console de l’outil de développement (voir le lien pour plus details sur la façon de l’activer)

[sultan87]

Bonjour
je suis peut être dur à comprendre

une explication s’impose
merci d’avance
Pierre

[Bison]

As-tu juste cliqué sur le lien que je t’ai donné pour … comprendre ?

Les outils de développements sont intégrés au navigateur. Donc par exemple depuis Chrome :

Quand c’est ouvert tu peux accéder à la partie « console » :

[sultan87]

merci pour la réponse
dans le précédent message je n’avais pas le lien , sauf erreur de ma part
je regarde et je vous tiens informé
Pierre

[sultan87]

cela fonctionne
maintenant je peux suivre le déroulement de mon widget
encore merci de votre aide
Pierre

[Bison]

D’accord, je t’invite à fermer le post en cliquant sur le post qui indique la meilleure solution