We Keep Coding

Can't focus elements on load in Chrome - very weird bug (in Chrome?)

I have a very, very weird issue that only seems to be an issue in Chrome.
When a user comes on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.
This behaviour can only be reproduced in Chrome and not on localhost.
The difference between localhost and beta environment is:
beta env requires authentication (basic http auth)
files in development env are concated in a single JS and single CSS file and both are minimized
beta env includes hotjar, while there's no hotjar on localhost
There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.
The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).
I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password).
I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.
The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?
EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.
For those who are also affected by this bug in Chrome, you can track the bug progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=740652
Meanwhile, here's a hacky solution for those interested:
$(document).on("ready", function() {
var $inputs = $("input");
$inputs.off("click.trick");
if (!sessionStorage.fixedChromeFocus) {
sessionStorage.fixedChromeFocus = "true";
$inputs.on("click.trick", function() {
var win = window.open("/", "_blank");
setTimeout(function() {win.close()}, 1);
$inputs.off("click.trick");
});
}
});
The goal is to, somehow, interact with the browser outside of the current page, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).
I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth.
What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).
The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

How would you stop a page from refreshing automatically?

I have a problem when I am trying to check the source of an interesting page which keeps refreshing automatically every 3-5 seconds (presumably due to some js script) which resets my Inspect Element Inspector window every time the page is refreshed.
Is there any other way other to stop that page from refreshing or perhaps the Inspector window from resetting itself other than turning on NoScript to stop the page from refreshing automatically?

Usually I just open DevTools, switch to the appropriate panel if necessary, and hit pause.
Opening DevTools: Via menus, or by press F12, Ctrl+Shift+I, or Cmd+Shift+I depending on browser and OS.
Switching panels: Pick the panel from the tabs at the top of DevTools. It'll be called "Debugger" (Firefox, IE) or "Sources" (Chrome) or similar.
Pausing: In the Debugger/Sources panel, click the pause button (usually looks like the pause button on a television remote control, ||) or press the keyboard equivalent. Keyboard equivalents are
Firefox & Chrome: F8
IE: Ctrl+Shift+B

(Updated 2020-03-30)
In Firefox 74 this option is in Options -> Privacy & Security -> Permissions
(Original reply)
Firefox has the option to prevent refresh natively, the option is in Advanced->General->Warn me when websites try to redirect or reload the page

The most popular solution for this problem is to trap the beforeunload event. The browser will ask the user for confirmation to leave the page. The code, in its simplest form, looks like this:
window.onbeforeunload = function() { return true }
You can enter this code in console. Alternately, you can simply paste the following URL in the browser address bar (console not required). You can even bookmark it.
javascript:window.onbeforeunload = function() { return true }
Be advised that modern browsers might chop off the javascript: part when you paste it inside the address bar; make sure you type it back.
To determine the cause of redirect in Firefox, try the following:
Open Web Developer Tools (CTRL + SHIFT + I), open "Toolbox Options" and check the "Enable persistent logs" option. This makes the logs persist across page loads (logs are cleared otherwise).
Now switch to "Network Monitor" tab.
Open the URL and let it refresh.
Inside the Network Monitor > Cause column you will find out why the page reloads.
The cause column is pretty ambiguous (Chrome does a much better job). However, if JavaScript was used to trigger page (re)load then it at least shows you the filename and line number of that script.

When the page is still loading, you can press the Esc key. While the page is still white, press it. When you stop the page from loading at this point, this usually stops all the auto loaded javascript. Any scripts that run on actions are usually not effected. Each page is different, try different timings.
When I use a site called NovelUpdates there is javascript that can make certain elements hidden, and when I press Esc on page load all the elements that would be hidden after page load are visible. Then when I click a button that would execute javascript that operates with no problems. NoScript isn't going to solve your issue I believe.
Another example of this are those websites with annoying boxes that pop out after 10 seconds that says you aren't a member and can't view any more of this site without logging in, like some news article websites.

What you could do is use the command exit(), which is the equivalent to die in php and simply stops the script.
If you don't know what's causing it and you don't want to look for the "bad boy", then you might as well stop the entire script at the very bottom of the page.

Closing a popup window in Chrome doesn't seem to release memory

I'm seeing some strange behavior in Chrome that I'm trying to verify is intended (or possibly a bug?). Here are the steps I took:
First I opened the Chrome task manager, right-clicked and selected "JavaScript memory"
Next I navigated to a test page that has a link that opens a new popup window when clicked
The popup window loads a page that includes a lot of large third-party JavaScript libraries
I checked the Chrome task manager and the JavaScript ram had increased significantly for the test page after opening the popup
Finally, I closed the popup window and waited, but the memory usage basically stayed where it was at.
If I clicked the link on the test page multiple times to open multiple popup windows, closing them doesn't seem to lower the memory usage.
I tried this test in IE and Firefox, and when closing the popups in those browsers the memory usage goes down as expected.

First off, it's great that you identified an action that you think is causing the leak! This is the first step in tracking down your problem, since it gives you a specific scenario to test before / after.
Since you already confirmed with the Task Manager that the memory is not being released, the next step is to do a Timeline recording:
Open your application on the page where the leak occurs and start the DevTools
Go to the Timeline tab in the DevTools and click Start Recording; Also, press the "Garbage" icon right now, to make sure Garbage Collection is triggered before you do your recording
In the application, open the dialog and then close it; you can also do this multiple times
Back to the DevConsole, click the "Garbage" icon again and then stop the recording
What do you see? Do you see in the Memory lane that it is never going doing? Or is the memory at the end the same as when you started?
Make sure to check the official DevTools documentation for more info on using the Timeline and other tools to find common memory leaks.

Android browser does not update DOM while keyboard open

I have a textarea element on a web page, with some JavaScript code which executes on certain keyboard events; among other things the JS code should make some visible updates to the page.
On desktop browsers, and also on iOS this works fine, however on the stock Android browser (Samsung Galaxy S3 running 4.0.4) none of the page updates occur until the onscreen keyboard is closed. The page updates seem to get 'buffered' and once the keyboard closes they all run in quick succession.
I know the event handlers are running while the keyboard is open, because if I insert some alert statements into them then the alert dialogs appear with each keypress rather than waiting for the keyboard to close.
Does anyone else seen this, or know of a workaround?

Record or log all browser DOM/JQuery Event(s)

I had a problem of needing to do some stuff programmatically (in javascript) that was happening in a third party component after being triggered by some browser events (click, focus, ?). I didn't know the event type, the element that the event was bound to, or the proper parameters.
-Tried setting Chrome breakpoints on subtree modifications, but nothing worked.
-Tried checking for jQuery events, but data('events') didn't reveal anything useful- they must be using DOM events.
Shouldn't there be some way of recording/capturing/logging all the events in a browser and then checking them (or even playing them back)? That seems like the only way to find out what I want to find out.

Updated for 2021
You can do this in any Chromium-based browser (e.g. Brave, Dissenter, Edge, etc.):
Open the "Developer Tools" (F12 or Ctrl+Shift+I) from the Ellipsis (...) menu.
Go to the "Network" tab.
Click the little Record button at the left.
Refresh the page and/or perform actions to trigger desired events.
Refreshing will show you the sequence of load events, and you can also filter for AJAX, JS, and other types of events. Or you can set breakpoints in the Sources tab for certain user events that happen when you mouse-over stuff, etc.

In Chrome you can use monitorEvents() in the console of dev tools to record all the events that you would like to monitor triggered during your test.