Web app does not work when Chrome devtools is closed

Question

I'm working on a front-end web application using JQuery with lots of Ajax calls. My problem it that whenever Chrome devtools is closed, the application does not work as expected (especially the Ajax-appended content). On the other hand, when Chrome devtools is open, everything works great.

I've read some similar posts and they were helpful at first, but now I'm running into the same problem and I'm not sure why.

Note:

1) All Ajax calls are set to cache:false as suggested here.

2) I've removed all console logs as suggested in another post that I can't find anymore.

Both suggestions worked temporally for a while, but now I'm where I left off. Any other suggestions as to how Chrome devtools can interfere with Ajax?

What specifically does not work? What error messages are you getting? (You can display them on the UI, or store them for later viewing in the devtools) — Bergi, Jun 15 '17 at 07:34
If you can reproduce it in an incognito window without any extensions and chrome://flags at default values, it might be a browser bug. Try reproducing it in portable chrome of previous and next versions, submit a report on https://crbug.com if there's none already. — wOxxOm, Jun 15 '17 at 07:34
I'm curious: does it keep working when you run a Release build of the solution? Do you have Chrome script debugging in Visual Studio enabled? Do you have Browser Link enabled or are you using it heavily? — rickvdbosch, Jun 15 '17 at 15:03

score 1 · Accepted Answer · answered Jun 16 '17 at 01:49

So, it seem that certain JQuery methods (.hover(), .click() , etc) were not being applied to some Ajax content, and HTML being loaded in using .load(). I thought I was safe from this problem by:

1) Wrapping the code that applies to Ajax content in a window.onload handler function

2) Delegating all relevant event handlers

   window.onload = function() {
      $(document).on("click","#id",function(){//do stuff});
      doSomethingElse();
   };

After trying a few things, I ended up using the .ajaxComplete() JQuery method in place of window.onload like so:

        $(document).ajaxComplete(function(event, xhr, settings) {
            if (settings.url.startsWith("https:...[static portion of URI]")) {
                $(document).on("click","#id",function(){//do stuff});
                doSomethingElse();
            }
        });

It works. The if statement here is triggered when the first Ajax call in the section I was having trouble with was called (other Ajax calls chain from complete() in this first call).

So, How does this relate to Chrome devtools?

Turns out, it's not directly related. I was able to reproduce the problem in Firefox and Opera. In both Firefox and Opera, the problem was less frequent and developer tools being open did not make much of a difference in performance. In Chrome, devtools being open made a significant difference and I do not believe the problem even occurred once.

Web app does not work when Chrome devtools is closed

1 Answers1