title: How to put debugging statements in a Jquery Code
body: <p>Friends
  Im trying to debug the Jquery code using simple Alert('Flow1'); , console.log('Test1'); and using debugger; statement inside my JQuery Code which is </p>
  
  <p><strong>However Nothing is working out as Alert('Flow1'); , console.log('Test1'); do not throw debugging Alerts when the following JQuery code gets executed</strong></p>
  
  <pre><code>function handleChannelTabs() {
          debugger;
              Alert('Test1');
          console.log('Test1');
          var checkedBoxes = [];
          var checkedChannelsLength = $("[data-channel-checkboxes]").find(
          "input[type=checkbox]:checked").length;
          $("[data-channel-checkboxes]").find("input[type=checkbox]:checked")
                  .each(function() {
                      checkedBoxes.push($(this).val())
                      var self = $(this)
                      var contentDiv = $('[data-content-for=' + self.val() + ']')
                      if (self.is(':checked')) {
                          if (checkedChannelsLength &gt; 1) {
                              contentDiv.children().appendTo(
                                      $('[data-tab-content-for=' + self.val()
                                              + ']'))
                          } else {
                              $('[data-tab-content-for=' + self.val() + ']')
                                      .children().appendTo(contentDiv)
                          }
                      }
                  })
          var isFirstTab = true;
          $("[data-channel-content]").toggleClass('hidden', checkedBoxes.length &lt; 2)
          $("[data-channel-content]").find('ul').find('li').each(
                  function(index) {
                      debugger;
                      console.log('Test6');
                      var currentLi = $(this);
                      if (jQuery.inArray($(currentLi).find('a').html(),
                              checkedBoxes) &gt;= 0) {
                          $(currentLi).removeClass('hidden')
                          if (isFirstTab) {
                              isFirstTab = false;
                              $(currentLi).addClass("active").css('margin-left', '20px').find('a').addClass("act-a");
                              $($('[data-tab-content-for]')[index]).removeClass('hidden')
                          } else {
                              $(currentLi).removeClass("active").css('margin-left', '0px').find('a').removeClass("act-a");
                              $($('[data-tab-content-for]')[index]).addClass('hidden')
                          }
                      } else {
                          $(currentLi).addClass('hidden')
                      }
                  })
  }
  </code></pre>