title: Why second debugger inside Ajax don't work while testing in Chrome?
body: <p>I created an Ajax call &amp; tried to debug its success &amp; failure in chrome using <code>debugger;</code>.</p>
  <p>The first debugger statement works properly but the flow is not stopping at the second debugger statement and instead I see following in sources panel:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;  id=&quot;debugbar_loader&quot; data-time=&quot;1611085354&quot; src=&quot;http://localhost/my_project/public/?debugbar&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;  id=&quot;debugbar_dynamic_script&quot;&gt;&lt;/script&gt;&lt;style type=&quot;text/css&quot;  id=&quot;debugbar_dynamic_style&quot;&gt;&lt;/style&gt;
  </code></pre>
  <p>Ajax is also working properly as I receive POST data in server. Kindly advise.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form action=&quot;#&quot; method=&quot;POST&quot;&gt;
    &lt;button type=&quot;submit&quot; name=&quot;submit_form&quot; class=&quot;btn&quot; id=&quot;submit_form&quot;&gt;Save Changes&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
    // First Debugger
    debugger;
    
    $(&quot;#submit_form&quot;).submit(function(e) {
      e.preventDefault();
      var fd = new FormData($(this)[0]);
  
      // Second Debugger
      debugger;
  
      var url = form.attr('action');
  
      $.ajax({
        type: &quot;POST&quot;,
        url: url,
        dataType: 'json',
        data: fd,
        success: function(data) {
          alert(data);
        },
        error: function(data) {
          alert(data);
        },
      });
    });
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/ctree/qoac8ntd/3/" rel="nofollow noreferrer">JS Fiddle</a></p>