How to see the code that runs after a specific action? - javascript

The Pause script execution button in Chrome DevTools is great for figuring out what does what... EXCEPT when there's code that's just constantly running so it gets paused before you can do what you want it to do. This is very annoying and I was wondering if there's a way to get around it. (Doesn't have to be Chrome)

Related

Webpage freezes in Safari on both iOS and OSX when the page reloads?

I'm using an iPhone 11 Pro with iOS 15.3.1.
I'm trying to figure out why when visiting my website, Safari is freezing most of the time when the page loads. Sometimes the page loads the first time I visit it, but on reload it basically freezes with no interaction.
When I connect the iPhone to a Mac and use the Safari inspector to connect to the webpage on the iPhone, the inspector is basically blank on all screens. If I go to the "Elements" tab, nothing shows. If I go to the "Console" tab and try to execute some Javascript, nothing happens when I press enter.
On OSX, I can see similar behavior, except I can actually open the inspector before I visit the page. In this case, when it freezes I can see a few elements in the "Elements" tab, but that's about it. Any sort of interaction I try to do in the inspector results in nothing happening.
I'm at kind of a loss. How can the development experience for such a popular OS/Browser be so terrible, and how do I work around the inspector itself not working? I can't replicate this freezing on anything besides Safari.
To be absolutely clear on my question:
What is your process to debug a webpage in Safari when it is in a state where the inspector no longer interacts with the webpage?
I did a broad divide and conquer of my app, commenting out top level code and working my way down uncommenting until I found the exact line that causes the freeze.
It seems calling HTMLInputElement.setSelectionRange() inside an onfocus event handler function caused an infinite synchronous loop in Safari, perhaps Safari synchronously blurs the input and refocuses for some reason when that function is called. And on page reload Safari was trying to focus on an input with that code automatically. That is my guess at least, removing the setSelectionRange() resolves the freezing problem.
Luckily, the freezing was fairly consistent so the divide and conquer approach worked. Unluckily, the inspector really should have done its job and picked up on the fact that the page was hanging and told me which function code execution broke at when Javascript was forced to stop, like Chrome or Firefox would.
If anyone has any better ideas for debugging these kinds of issues in Safari besides the programming equivalent of a short circuit test, I'll gladly accept the answer.

Chrome stops updating a page when computer is idle

Chrome apparently stops updating a page when you go idle (i.e. when the screen saver comes up).
My problem is I've written an alarm app, and it doesn't work because the Javascript stops running when the computer goes idle. Is there any way around this?
Update: After testing a few different things, it seems that Chrome doesn't stop updating a page, it just stops rendering it. So for my problem (an alarm app), this is solved.
Are you using requestAnimationFrame? I know Chrome explicitly pauses those callbacks, but it may not also pause setTimeout.

How can I force Chrome to render the page while paused in debugger?

I'm working with a web app that does some pretty heavy DOM manipulation via JavaScript, and I'm making extensive use of Chrome's Developer Tools to build out the page and the features. The problem is that sometimes, when the page pauses on either a breakpoint or a debugger; line, the page in the viewport doesn't get greyed out, doesn't get the "Paused in debugger" message, it doesn't highlight in blue the DOM element I have selected in the Dev Tools, and it doesn't redraw or update the render or anything when the DOM is manipulated by the Javascript. When I unpause the debugger and the code completes, the re-render happens as expected, but when I step through the code line-by-line in the debugger, the re-render doesn't happen until the code is complete and the debugger unpauses. This is really a problem when I'm specifically trying to debug some render-related issues. This is an inconsistent issue. For example, in the project I'm currently working on, there's an onResize() method that is run on initial page load, as well as (obviously) when the viewport is resized. If Chrome Dev Tools gets paused during the initial run of onResize(), it works as expected, rendering the changes to the page at every step along the way. But if it gets paused during a later run of that method, during an actual resize event, the problem I describe above happens and I don't see any changes to the rendering until the code has finished running.
Does anyone have any ideas why this happens, or what I can do about it?

ContentVeil.js and Forced Synchronous Layout Issue

I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.

videoegg javascript unresponsive script

Has anyone ever seen an error similar to this?
"A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete"
The firebug console doesn't show any javascript errors.
This can happen when a script has a lot of work to do, or it can happen when the script has a bug. If you suspect that the script has a bug, or if you do not know what script is running, then press the "Stop script" button to stop the script. If you know that some lengthy operation is in progress, then press the Continue button to allow the script to continue working. You might have to do this repeatedly to allow the script to finish.
Isolate the error further
If you are using Firefox, you can confirm that the error is indeed the JavaScript script by running Firefox in safe mode.
Further research:
http://kb.mozillazine.org/Unresponsive_Script_Warning
Profile the script
From what we see on the screenshot we could suspect that the error is not a firefox extension issue, so running firefox on safe mode may not solve the problem. We also know that the video ads served by video egg may take some time to load.
Use Firebug's profiler to see how much time that particular video egg script is taking.

Categories

Resources