How does having Chrome devtools open change behaviour?

Question

In my JavaScript, I have implemented a feature that hides the title bar and it is triggered by a scrollEvent. So when I scroll down, the title bar is hidden. As I begin to scroll up, it is revealed. Think about it as a similar effect to what most mobile browsers do with the search bar.

Here's the thing... with devtools open, it works just fine. If I close devtools, the effect no longer works, ie. the title bar remains visible as I scroll down. If I reopen devtools (ctrl-shift-j), the effect works again. I am running the devtools in a separate window, so its presence doesn't affect the window dimensions of my app.

Does anybody know what influence the presence of Chrome devtools has on Javascript or rendering behaviour?

NB, for any speed readers that miss the point of my question, I am not asking for a solution to the problem I'm seeing. I'm specifically only asking for answers to my question.

EDIT: I've now discovered that having devconsole in the foreground vs background is significant too. With the console in the foreground, it works, in the background it fails. See animated gif at https://ibb.co/4M75sPQ

Cumshaw

You could put together a minimal reproducible example so we can look at this ourselves. In the process you might even spot the problem. – Cyclostyle

@DaveS Unfortunately that's not possible. The app is fairly complex involving redux lit-element and some fairly deeply nested components. That's why I specifically phrased this as a question ("how can having devtools open affect behaviour?") rather than "hey can somebody solve my problem". I only describe the problem to provide some context to my question. – Cumshaw

Check if Disable cache is ON when devtools Network tab and see if that is causing things to be different? – Coactive

@TarunLalwani thx for the suggestion. The app is already fully loaded, when I observe the behaviour change so I don't think network cache is a factor. – Cumshaw

one thing that I can think of is the "window" width, since devtools take a portion of the browser actual window resulting in a smaller area for your app. – Tangled

@MaherFattouh as I said in my question, devtools is opening in a separate window, so is not resizing my app window – Cumshaw

maybe devtools is making JS slower, hiding a concurrence problem? Can you try to add cpu throttling, and let devtools at background? – Inflectional

@BrunoMazzardo I was thinking along those lines, but if you look at my edit and animated gif, I can now see different behaviour based on whether or not the dev console is in the foreground vs the background. – Cumshaw

That may works in favor of that theory, chrome must give more resources if tab is in foreground. – Inflectional

I suspect you might be right. I'm starting to think this could be a timing bug in the library I'm using (lit-html) – Cumshaw

Unfortunately its hard to debug and test this issue, good luck finding the problem. If I think at anything else I post an answer here. – Inflectional

Any followup on this? Got me curious ... – Inflectional

The behaviour of your app could be affected by whether your window has focus or not. You posted a gif showing that it is affected by whether DevTools is in focus, but perhaps it is the other way around. Try putting any other window in focus while you scroll in your app and see if that is the reason. – Haldan

What if you deactivate Chrome plugins? I suspect that it is not due to Chome Devtools but something like Redux devtools plugin. – Maximin

@NielsBrinch you were correct. When my app window has focus, the effect does not reveal. With focus given to any other window the scroll effect works correctly. – Cumshaw

Cool. I think you need to create a new more focused question based on the new information you have, because the chrome devtools is a definite red herring. – Haldan

@NielsBrinch I agree. I'll delete this question in case it leads others down the red herring path. Rather than ask the new question, it now looks likely that this is a timing bug in the underlying lit-html library, since none of my code is any way sensitive to window focus. – Cumshaw

@NielsBrinch thinking about it, I'd prefer your comment to be an answer that I could accept. Something along the lines of "dev console will take focus away from your app, so if your app is in any way sensitive to focus, or is affected by the relative execution priorities of foreground vs background windows, that could be a factor". If you'd like to post that as an answer, I'll accept it. – Cumshaw

Answer 1

Chrome DevTools will take focus away from your app, so if your app is in any way sensitive to focus, or is affected by the relative execution priorities of foreground vs background windows, that could be a factor.

Haldan

Answer 2

I had a similar question in stack quite some time ago. Mine affected the way and speed JS was executed, specifically JSPerf was being slower when I had the console open, and the tests were completely messed up you can take a look at my answer here

Still, might be that some of the issues might be related to your config of the devtools, as this user pointed out in this question https://askubuntu.com/a/633838/742250

Have you tried in an incognito window or in other browsers? Mozilla or Safari?

Obregon

Answer 3

For me the issue was that I had some local overrides enabled under Sources > Overrides.

Disobedient