Develop Reference

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.

My React app shows a blank page at one of the stages on iPhone. Anywhere else (even Safari on MacOS), it works as intended

I am working on an application where users need to fill in some personal information to register an appointment. (Can't share too many details as it is confidential work)
At some point, my application opens a "popup" type of component which simply lists the previously filled information for the user. It acts as an overview step before proceeding to the next steps of registration.
I tried this on various browsers. On Pc, it works on Edge, Chrome, Firefox and Opera. On Android, I only tested Chrome, and it worked fine there. On MacOS, I tested Chrome and Safari, and it was fine on both.
But when I tried it on an iPhone, I just get a blank page when I get to this aforementioned step.
I am confused as to what the problem might be, because everywhere else, it seems to work fine. Even on the Apple ecosystem itself, there are devices which render the application correctly.
Any help would be appreciated.
Thank you in advance!

On the device, enable Web Inspector in Safari's settings. Then on a Mac, open Safari, enable the Develop menu if you haven't already and use it to attach to the Web Inspector on the device (there will be a submenu named for the device, with all inspectable frames as menu items). Now you have a full inspector to investigate the problem.

I managed to pinpoint the problem to a date field. For some reason, Safari on iOS could not parse a string timestamp to a specific date (It was throwing an error when I was creating a new Date object and passing in the timestamp to the constructor).
I formatted the date to a string manually and everything is working fine now.

Chrome browser not working as expected (onclick/onsubmit error?)

Here is one strange thing. Thanks for ideas.
My Chrome browser does not interact with some web pages as expected. When opening the pages on a different device (such as Browserstack or colleages' computers), everything works fine. There must be a problem with my device, it is obviously not linked to the browser version itself.
Example 1: click on element does not show reaction
When clicking on the small gray dots below the main image here, Chrome usually performs a caroussel switch. On my device, it does not. Clicks are constantly being ignored, although the automatic caroussel switch works just as on any other device.
Screenshot: i.stack.imgur.com/KR64m.png
Example 2: click on button does not show reaction
When clicking the button "Weiter" on this page in the lower right section of the page, my Chrome does not show any reaction. Works as expected on any other device.
Screenshot: i.stack.imgur.com/g8dHN.png
My Chrome Version: 33.0.1750.146 m (plugins disabled, surfing in anonymous mode)
OS: Win 7 Pro SP1 64 Bit
Thanks for help!
UPDATE:
I found out that my Chrome shows different results to a VisualEvent-check than Browserstack.
Have a look here:
My chrome (buggy): i.stack.imgur.com/Earrs.png
Browserstack (working): i.stack.imgur.com/zRRgA.png
What can I learn from that? There are two more event handlers
There are no VisualEvent differences for the second example, however.
UPDATE 2: On a MS Virtual Machine, everything works as expected:
My comment below

Hm do you deactivted your Javascript by accident?
https://support.google.com/adsense/answer/12654?hl=de
Have u tried a different browser on the same device?

I had this problem too, but it was solved by itself the next day. Maybe you just need to do a reboot?

Concerning my device, the issue is related to the fact that my device has a touch screen which Chromium does not know how to handle in the standard configuration. Considered a bug.
nzolghadr#chromium.org
The problem is with "'ontouchstart' in window" expression which the jquery.flexslider library uses. Right now on Windows Chrome returns that as true when you have chrome://flags/#touch-events enabled/automatic. Related issues are: crbug.com/467934, crbug.com/555746, and crbug.com/392584 which based on those it seems that Windows thinks something is touch enabled and Chrome just reflects that.
https://bugs.chromium.org/p/chromium/issues/detail?id=373991#c13

Window.location intermittently fails to load in IE

I have an aspx page with JS calling window.location.reload(true) to force refresh a page when a function is called.
This appears to work a few times, with the page reloading as expected, but gets to a scenario where the function is called (i.e. alert in the function is visible) but the reload does not occur. I've also tried setting window.location with the same outcome - it works 2 or 3 times then fails.
This does not occur in Firefox (16), but is happening in different versions of IE (7 & 9)
Using Fiddler to monitor the browser traffic, all is as expected when the reload is working, but there is no traffic reported when the reload stops, suggesting the browser is not sending the request to the server? The IE window does go blank with the loading spinner spinning, but eventually IE displays the error page:
Internet Explorer cannot display the webpage
Most likely causes:
You are not connected to the Internet.
The website is encountering problems.
There might be a typing error in the address.
This appears to lock the browser. Trying to hit another website results in the same output in Fiddler (nothing). Opening a new IE window means I am able to hit the site with no problems.
This was initially causing a problem updating UpdatePanels via __doPostBack so this JS reload of the page was seen as a quick workaround, but this does not seem to be the case.
I would tend to think this is server related, but I have been unable to replicate the issue in Firefox. This does however unfortunately have to work in IE.
Any ideas much appreciated!
JS snippet below (though this is pretty simple stuff)
function ReloadWindow() {
alert(window.location); // Can see this alert, even when page fails to reload
window.location.reload(true);
}

Safari seems to cache the page and the DOM state

I've written a Greasemonkey javascript that works fine in NinjaKit the new Safari userscript manager, but when I try and compile the same script using the Safari 5 extension builder I get some very weird behavior.
The script gives the user an options editing screen, when you click the save button, the script saves the users preferences as a JSON packet via the HTML5 localstorage API, the script then closes the options screen and reloads the page, on the page reload, the script should reload the preferences from the JSON in localstorage, and the script should act on the new preferences to display the page the way the user wants it according to the settings they made.
The problem I am seeing is when I run it as an extension, when I click the save button, the script reloads the page, but when the page is reloaded the changes the user made to the settings do not get applied to the page. the weird part is, if I then manually reload the page again via the browsers refresh button, the changes the user made in the settings do all of a sudden become apparent. so obviously the data has been saved to the localstorage, but for some reason when the page reloads for the first time, it's somehow being reloaded from a cached file, and only on the second manual reload, is the new page displayed correctly. I can't understand why this works as a plain userscript in ninjakit, and also actually works in Firefox, Opera and Google chrome, it just wont work as an extension in safari, its soooo annoying. I've tried lots of ways to make sure that Safari 5 doesn't reload a cached page, e.g adding extra parameters to the URL, but I just can't get it to work, without having to reload the page twice.
BTW I'm not using the native safari extension settings system as I want the script to be cross browser compatible, so that's why I'm saving the settings to localstorage.
Has anyone else witnessed this behavior? Or got any clues how to fix this? It's driving me mental...

i managed to solve the problem though i didnt figure out exactly what was causing it.
i got the script working by adding it as an "end script" rather than a "start script" in the extension builder, it all seems to work fine now. phew!