Chrome crashes when js code executed - google-chrome

Every time this code is executed:
$('.title').on("focus", function(event){
if($(this).html() == "") {
$(this).html(" ");
}
});
Chrome "Crashes" displaying the "Aw, Snap!", tried looking in chrome://crashes but the log never get logged there.
Any idea why it might do this?
32.0.1664.3 dev

The simple reason why it is happening is: The on focus event keeps on triggering. And the if condition keeps on going on multiple times causing the chrome to crash.
try
if(!$(this).html().length) {
$(this).html(" ");
}

Although it worked in other versions of chrome this version seems bugged, i was able to solve it with using "click" instead of "focus".

Related

Chrome: alert during onfocus creates an infinite loop?

I was trying to figure out how to get some focus/blur behavior working for something when I ran into a really strange and annoying behavior in the Chrome debugger where I got an infinite loop while trying to debug an onfocus handler. It seems to be related to any action which takes focus away as I've been able to reproduce it using alerts instead of a breakpoint.
Here is my minimal example. Make sure you open this in another tab. Closing the tab is the only way I've found to end the loop.
https://codepen.io/cebo494/pen/OJxVZxq
Is this a known issue? Is there an easy workaround other than just using print statements to debug everything?
My final goal in my actual handlers isn't to take away focus, so it's not a problem if this is just a bad practice that I should avoid, but it's super annoying not being able to use the chrome debugger for my focus callbacks.
This seems to be specifically a Chrome issue, as the loop didn't occur in Firefox or IE. It only happens in Chrome and Edge (which is chromium)
I tried the sandbox, it actually got triggered on Firefox as well. I think the problem is that when you close the alert, the focus is lost on the button, but React internally re-focus on the button again, therefore trigger another onFocus call.
I would set a flag to manage the alert behavior, and reset the flag during onBlur event:
const [alert, setAlert] = useState(false);
// you can also pass event to implement the onblur method in the same function
const alertInfo = () => {
if (!alert) {
alert("focus");
setAlert(true);
}
}
Or if the event is only triggered by mouse, you can also use onmouseup/onmousedown to handle the event.

Chrome 80: Pause script execution (F8) does not work when DevTools is not focused

since Chrome 80 I cannot pause the script execution when the focus is on the website I'm developing. This is extremely inconvenient e.g. when debugging hover effects.
Does anyone else experience this issue or has more information about it? Maybe a feature flag deep inside the browser settings?
Update
This was fixed in Chrome 83.
Until it is fixed, you can use the following in your app:
document.addEventListener('keydown', function (e) {
if (e.keyCode == 119) { // F8
debugger;
}
}, {
capture: true
});
It's a bug in Chrome, I found the bugreport here:
https://bugs.chromium.org/p/chromium/issues/detail?id=1049910&q=f8&can=2
WORKAROUND
You can use option Break on -> subtree modifications
It helps me to stop script execution instead of using f8 functionality.
Steps:
1. Turn on 'Break on' for element you need to debug
2. Make some changes (hover or open drop down list as in my situation)
3. Browser will pause script execution
Use Ctrl+\ to pause the debugger. It works.

Why browser doesn't get content from cache during recursive refresh after first attempt and why window.location.reload(true) not working in chrome?

I have two doubts:
While I am refreshing the page in any browser say Chrome. When I made 15 attempts to refresh. I observed in network tab that Out of these 15 refresh attempts, on some attempts it gets the data from cache while on other attempts directly from server. I don't understand this behaviour? I was expecting it to get data from server for the first time and then from cache on successive try in a given time period.
And there is long existing problem that $wnd.location.reload(true) doesn't work in chrome? And it still exists? Did someone found out a workaround? I have tested it in Firefox (26.0 and 58.0.2) it works, Safari 11.0.3 it works but Chrome 64.0.3282.167 it doesn't ?
And there is long existing problem that $wnd.location.reload(true)
doesn't work in chrome? And it still exists? Did someone found out a
workaround?
I had a similar problem and the workaround I used was to clear the cache before reloading using Cache.delete()
if (!!window.chrome && !!window.chrome.webstore) {
// check if browser is chrome
let id = "your-cache-id";
// you can find the id by going to
// application>storage>cache storage
// (minus the page url at the end)
// in your chrome developer console
caches.open(id)
.then(cache => cache.keys()
.then(keys => {
for (let key of keys) {
if (key.url.indexOf('file-to-reload.html') !== -1) {
cache.delete(key)
.then(window.location.reload(true))
}
}
}));
} else {
window.location.reload(true);
}

cursor blinks but can't type in input form

Ok guys I've looked at like 7 other questions on here that have similar symptoms but do not describe my issue.
My issue is this:
I have a text input. When I click on it, I see the cursor, but I cannot type. This happens in all browsers.
I can copy and paste data inside, and when I submit it it passes just fine.
Everything about this form field input works EXCEPT the ability to actually type in it.
One thing to add is that I have it working on a different page and everything is fine, which leads me to believe there is something going on with this page. I'm not getting any console errors or anything that looks funny with dev tools.
Does anyone have any speculation on what could be happening?
Hey guys thanks for responding but I have found the issue. The code that was ruining everything was this:
jQuery('.url').keypress(function(e) {
e.preventDefault();
var key = e.which;
if (key == 13) // the enter key code
{
jQuery('.main').trigger('click');
}
});
I changed the first line to:
jQuery('.url').keyup(function(e) {
and it worked.

Chrome extension background page restriction after event or setTimeout [duplicate]

I am trying to create a Chrome extension that when entering a certain site. I am deleting the download history. I am using this from the background page:
chrome.downloads.erase({},
function(item)
{
console.log("Erased item");
console.log(item);
});
The problem is that it is not working when I am sending a message from the contact script after entering the url I wanted.
I use send Message in the content script
chrome.runtime.sendMessage
and receive the message in the background page
chrome.runtime.onMessage.addListener
This is the output I get although there are some files in the download history:
Erased item
Array[0]
If I run the erase() from within the background page console it works fine
it seems that it happens because there is no user interaction.
If I put a clear button and click on it the deletion does works
But if I use timeout it does not
Any Idea why it happens?
I have seen that it has something to do with the setTimeout
This works in the background page:
setTimeout(function(){
console.log('erasing downloads');
chrome.downloads.erase({});
}
, 0);
But this does not:
setTimeout(function(){
console.log('erasing downloads');
chrome.downloads.erase({});
}
, 1000);
I think I had finally found the reason for the problem.
After downloading I have closed Chrome with taskkill /f, like this:
taskKill /im "chrome.exe" /f
After reopening Chrome I got in this line in the download page:
thefilenamedownloaded.exe The browser crashed before the download completed.
If I used taskKill /im "chrome.exe" (without /f) than the problem did not happen.
The bug may be actually more complicated than this because that when I had user interaction its also worked. But for now it solved my problem. Hopes this help anyone else