I was profiling my app for performance, when I started to notice something strange. A 'mousemove' event was firing and calling code I hadn't added myself. Heck, I don't have a mousemove listener on my page. I thought it might be an extension, maybe AdBlock, so I disabled all of my extensions. It didn't go away.
Also, upon opening a <select> list, I noticed it calling some class 'ListPicker'... Seriously, no clue where this is coming from. Some screenshots:
Also notice the "Compile Script"... I'm not eval-ing any script on my page by default. What gives? Looking for the source, DevTools simply says this:
Can I somehow still make DevTools redirect me to the exact lines of code it was executing? It is frustrating to see strange, alien code executed on one's page and not even being able to look at the source code.
More on the mousemove events it was firing:
Upon inspecting the sources tab, I found nothing but my own files.
In addition, I noticed that always somewhere towards the end of my profiling session, this "unattributed" source would appear to be completely blocking my JavaScript:
HOWEVER, this is not even what happens. My site stays completely responsive - it wouldn't do that with 100% scripting CPU usage. However DevTools says otherwise. The last thing that really gave me nightmares was this:
NEGATIVE SCRIPTING TIME? You can even see Chrome's rendering giving up towards the left of that pie chart.
So, in all my confusion, what exactly could this be? How do I find the source of this, or does it even have one, maybe this is just a bug within the newest version of Chrome? Really appreciate if anyone could drop their thoughts.
Related
One page on a client's site causes Chrome to hang unresponsively for 15 seconds or so. On macOS, the browser locks up completely and the spinning wheel appears.
There are no issues whatsoever in Safari or Firefox. I have no idea why this is happening, and DevTools doesn't seem to give any clues as to what's causing it.
Here's a screenshot of the timeline — note the flurry of activity in the final second, when the browser becomes responsive after seemingly doing "nothing" in the latter half:
Some comments on the timeline above:
At ~12,500ms the page looks ready. In any other browser, it is ready for interaction at this point. You can see the final green chunk in the timeline finishes around here.
Chrome completely locks up between 12,500ms and 28,500ms.
I initially assumed the problem was with one of the 3rd-party/analytics scripts, as you can see the timeline shows activity from these right in the final second (> 28,000ms). I tried switching every one of these off, but exactly the same thing happens.
This is a particularly large page, as it lists several thousand records in a JS datatable. I appreciate performance can be improved, but I don't believe that's the root cause. The page/plugin has been working absolutely fine for several years.
What can I try next? Thanks! 🙏
This turned out to be a bug in Google Chrome v107. Updating to v108 fixed the issue immediately.
When I first load a page in the Firefox debugger, no source files are shown, so it is not possible to set breakpoints until an error occurs (I don't want to have to insert "debugger;"). Is there a fast way to start running, stopping at the first executable JavaScript line? I tried Stepping In, which I thought should do this, but it does not do anything, probably because it only works when paused at a breakpoint.
I searched the Web and could not find any solution, even though this seems to me a common problem. Am I missing something obvious?
My Angular 2 Application is slow to respond (1-5 seconds) to key input, button clicks, tabbing across inputs, etc. only when Chrome Developer Tools is open. Material 2 animations also become slow and choppy.
I've been developing this application for three months, and use Chrome DevTools every day. This issue cropped up seemingly overnight.
What I know:
I stashed all pending application changes to revert my application to a time when this was not a problem. The issue persisted.
Chrome DevTools doesn't seem to slow down any other application (ie. google inbox, google maps) in the same browser session.
Maddeningly, when I run the DevTools' Timeline "Record" to try to gain visibility into the issue, the issue disappears and the page reacts at normal speed again! I assume this is the best clue that I have, but I don't know the internal workings of DevTools well enough to know how "Timeline Record" changes things.
I've restarted Chrome and deleted all cached data.
Nothing of the sort happens in Firefox or IE when I open the Developer tools in those.
Any recommendations on where to look next would be greatly appreciated!
Final answer:
Remove all breakpoints
Even if they're not getting hit this fixed it for me and got performance back to normal.
May be a bigger issue if you have logging breakpoints - so try deleting those first if you're attached to your breakpoints.
Previous answers:
I came up with a workaround - although still not really figured out what is actually wrong.
I also discovered a bunch of tools I didn't even know existed that I'd skipped over before - they're under More tools.
Start by opening the Performance Monitor. This shows a nice CPU graph isolated for your Chrome tab - the Windows task manager is as useless as it ever was.
This is the behavior I got when choosing a date from mat-calendar. No other logic running - just selecting a date. I removed everything from app-component and just put a mat-calendar and it took ten seconds to change the date!
Other controls are generally fine. I could open dialogs, use combo boxes etc. and nice and fast. But selecting a date gave me this nonsense:
I tried emptying local storage, clearing cache, etc. and then I changed port number for my website. I simply changed dev.example.com:44300 to dev.example.com:44301 - in other words Chrome now thought it was a different website.
This is what it looked like after I switched port number.
I also got the same effect using a reverse proxy server - which put my local machine on the internet - so I could try to duplicate the issue from other machines. I could not.
So hope that helps someone - still no clue what's in the cache for this server that is having such a massive impact on performance. But for sure it's not just my code.
Here's a few other things to try:
Test with --aot flag
This didn't make a difference to me, but good to narrow things down.
Add some controls that don't do anything (as a control)
This way you can find if some specific action or control is causing the slow down. You should of course be able to toggle these instantly.
Just toggle them on and off, hide something.
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
Enable Rendering debugging options
Make sure you aren't re-rendering the whole page constantly
The rendering option above will show this to some extent, but one thing I like to do is just add a random text box - type in it and if the text subsequently disappears you know that control has been rerendered.
<!-- yes, just a standard text box -->
<input type="text"/>
Just hide things with *ngIf="false"
Hide controls (yours and third party) and see if anything is causing problems.
For me I'm currently suspecting mat-calendar is causing issues - but I'm still thoroughly confused as to why enabling 'Record' makes the problem non existent.
I've fixed the issue, but I'll never know what was causing it. Likely a setting that I had accidentally changed.
I deleted the Chrome App and reinstalled, everything is back to normal. I'm going to leave this question open in case anyone else has this problem or wants to contribute.
It is normal for every web app to run slowly with Chrome dev tools opened.
Especially if you have inspect tab open, that it's like a new page opened in the same time + has animations on any block render.
We had this issue today at a colleagues workstation. Turned out that it was a chrome-extension (don't remember, something with "ghost" in its name). So maybe try out using guest-mode and check whether the issue still occurs. If it doesn't, successively reactivate the extensions to see which one is causing the problems. If it still occurs, follow the other proposed approaches.
I'm debugging some 3rd-party minified Javascript that somewhere is triggering a browser page refresh. However, I can't figure out what part of the code is causing the refresh.
Is there a way to put a breakpoint in Chrome that will be hit just before a page refresh so I can inspect the call stack to see what caused it?
Try this:
Open your Chrome Dev Tools
Navigate to the "Sources" tab
On the right panel, expand "Event Listener Breakpoints"
Expand the "Load" tree
Check the beforeunload and unload options
See if that helps; screenshot below.
Edit: Alternately, if that doesn't work, you can use Chrome to search all loaded scripts for the code that might be responsible. There's apparently a lot of ways to refresh the page with JavaScript but they mostly have a few common strings like "navigator", "location", "reload", "window".
Finally, if there's a link to the same page you are on, it's possible some JS is triggering a click on it-- unlikely, but worth exploring if nothing else has worked thus far...
(Please excuse the formatting as I'm on mobile...)
NOTE: It seems occasionally, for reasons I don't yet fully understand, this solution fails to actually cause the debugger to pause; in this situation, I found that thorn̈'s answer to this question did the trick for me.
In Firefox (not Chrome, it's important; UPD 2020: it now works in Chrome as well) Developer Tools, go to the console, enter addEventListener('beforeunload',()=>{debugger}), and execute your code. After the debugger stops at the debugger statement, look at the call stack. You'll see what triggered the event. Chrome didn't have it there.
At least, this worked for me.
In the devtool, network pane, toggle the "Preserve log", carefully check the initiator column.
You don't specify what's the 3rd party library does.
If it is a ui component like an ad or something similar, just place it inside an iframe with the sandbox attribute configured as you need.https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe (Scroll down to the sandbox attribute section)
If it is something triggered by an event, just use (in chrome dev tools only) the getEveneListener() function and follow the listener trail... (hard, but possible)
Example:
The listener property will lead you to the actual functions that will be invoked. You can than search them in the obfuscated code and add debugger to understand it's purpose.
There are many other scenarios - if you can specify more.
Last night, I was trying to debug a particular bit of vanilla JavaScript on a private page.
After a half an hour or so, the browser crashed while in the middle of stepping through a troublesome section.
When FireFox restarted, FireBug insisted that there was no JavaScript on the page - does anyone have any ideas what is causing this? Clearly the JS was (nearly) valid before the crash, and wasn't changed before I restarted. The only thing I can see, is that FireBug probably installed an update at that point?
I've tried cutting out all of my code, but nothing seems to make a difference. Other pages, even on the same intranet site, still work, but this one doesn't list any files under the "Script" drop down.
I've compared with the built-in Dev tools, and they also show no JavaScript loaded. The JS is a form submission handler, and clearly it is no longer running when the form is submitted.
I struggled with this for much of today. Eventually resolved it by creating a new profile.
I would be very interested in learning of the root cause if anyone figures it out.