javascript - How does having Chrome devtools open change behaviour? - Stack Overflow

admin管理员组

文章数量:1293286

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

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

• javascript
• google-chrome
• google-chrome-devtools

Share Follow edited Aug 2, 2019 at 18:02 pinoyyid asked Jul 30, 2019 at 0:45 pinoyyidpinoyyid 22.3k1616 gold badges7575 silver badges124124 bronze badges 18

• 3 You could put together a minimal reproducible example so we can look at this ourselves. In the process you might even spot the problem. – Dave S Commented Jul 30, 2019 at 0:49
• 1 @DaveS Unfortunately that's not possible. The app is fairly plex involving redux lit-element and some fairly deeply nested ponents. 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. – pinoyyid Commented Jul 30, 2019 at 2:01
• 1 Check if Disable cache is ON when devtools Network tab and see if that is causing things to be different? – Tarun Lalwani Commented Aug 1, 2019 at 14:12
• 2 That may works in favor of that theory, chrome must give more resources if tab is in foreground. – Bruno Mazzardo Commented Aug 2, 2019 at 18:24
• 2 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. – Bruno Mazzardo Commented Aug 2, 2019 at 19:48

 |  Show 13 more ments

3 Answers 3

Sorted by: Reset to default 4 +25

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 pletely 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./a/633838/742250

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

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.

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

本文标签： javascriptHow does having Chrome devtools open change behaviourStack Overflow