Develop Reference

Firefox optimization bug?

Recently when i did some adventofcode, i came across a bug:
The bug happens in firefox except for if you run the code as multiple chunks, but doesnt happen in chrome.
When i run this code in the firefox console, in a tab with url https://www.google.com/robots.txt :
// Fetch input
var input = await fetch("https://www.google.com/robots.txt").then(r => r.text());
var lines = input.split("\n");
// Iterate
while(lines.length > 0) console.log(lines.shift());
It prints nothing, but when i run the code as two pieces (separated by // Iterate) it works. Note that you can change the fetch url and url of the tab, i chose robots.txt and made them the same to avoid CORS errors.
Does anyone know why this happens or how to fix this?
Edit: The code works if you wrap the code in an async function and call it, but it should work regardless.

Debug developer console inserted javascript

Is there some way to debug code that you have inserted from the firefox developer console terminal? I.e I inserted
document.onkeydown = function(event) {
// check keys pressed and perform some logic
}
If I knew where the javascript entered from the developer console goes(which .js file it was in) I could debug it but I haven't been able to figure that out.

In the chrome debug console, type this:
document.onkeydown = function(event) {
console.log(event)
}
The return value will be a function, like this:
Double click on the function and a VM.js tab will open. This contains the code generated by the VM for this function. You can set a breakpoint there.

The debugger; statement is exactly what I needed.
document.onkeydown= function(event){
debugger;
//function logic here
}
Then from the image below you can see that you can set your breakpoints in the debugger where you need them.

jsFiddle blocks any code containing 'window.location.href = ...'?

I was working on a fairly large prototype in jsFiddle (which I've used many times for a similar purpose), and got an unpleasant shock when I hit the 'Update' button only be sent straight to http://jsfiddle.net with a completely empty code editor.
Luckily hitting 'Back' in the browser was sufficient to recover the lost code. But I quickly found that my code could not be saved, and that the problem didn't seem to affect any other bit of code on the site.
After a lot of trial and error, I determined that the code could not be saved due to the following benign-looking line:
window.location.href = "/u/deleteReport?reportId=" + reportId;
In fact, it appears that it's impossible to save any code (not even the most trivial of examples) on jsFiddle that contains window.location.href.*=.*;. I'm a bit surprised by this fact, and wondering if anyone knows why this limitation exists? It seems somewhat arbitrary and also entirely ineffective, as things like window["location"].href = "..."; are still allowed.
Here's an example; the following code can be saved in jsFiddle without any problems:
var path = window.location.href;
$("a").click(function(e) {
window["location"].href = path;
});
...while trying to save this equivalent code will dump you straight to the jsfiddle index page:
var path = window.location.href;
$("a").click(function(e) {
window.location.href = path;
});
Refer this Fiddle
Does anyone know of an explanation for why this happens?

javascript window.location issue with IE and Firefox

I have some strange behavior on my window.location redirects in IE and Firefox as part of my angular application. When calling window.location = xyz the first time it works fine in IE/FF/Chrome. On the second call which is supposed to go to google.com, Chrome does what it's supposed to, but IE and FF don't do anything. In the IE web console I can see that the navigation was triggered but the page and URL hasn't changed in my window. Now if I press F5 on this page it goes to the page it's supposed to even though the URL at the top is not pointing there (both in IE and FF).
Has anyone ever encountered this problem and knows how to solve it? I've tried all versions of redirecting (window.location, window.location.href, windows.location.assign(), window.location.replace() and also the angular service $window) with no luck.
First call triggered from a button press (working fine in all browsers):
$scope.pressButton = function() {
var url = 'xyz/index.html';
$window.location = url;
};
Second call triggered by a keypress (only works in Chrome):
function exitModule() {
$window.location = 'http://www.google.com';
console.log('window.location'); // still pointing to the old page
}
Update with code calling the exitModule() function:
Note: The application is built with angularjs.
The exitModule() function gets called in all browsers, it's just the redirect which doesn't happen in IE/FF.
HTML:
<body ng-app="myModule" ng-controller="MainCtrl" ng-keydown="keyPress($event);">
JS:
// Handle global key press
$scope.keyPress = function(event){
if(event.which === 27) { // EscapeKey
exitModule();
} else {
$scope.$broadcast('keyPress', event);
}
};

Alright I found the issue and I'm aware that it was almost impossible to figure this out without having the full code available. The above code was a bit simplified therefore it was missing the problem. The function exitModule gets called as soon as a promise is resolved. The call looks like this:
Correct
dataService.saveModule().then(exitModule);
My code was as shown below with the brackets after exitModule which is wrong. I don't quite understand the behavior of FF/IE compared to Chrome though ...but that's for another day.
Wrong
dataService.saveModule().then(exitModule());

iPhone/iTouch not firing (new Image) request onunload

Hey guys, hope someone can help me out.
I'm making a small application to record clicks, which is going great, until I hit the iPhone/iTouch. I'd like to point out, that I've been testing with an iTouch, and I am just presuming the same thing will happen on a iPhone.
What I have at the moment is something similar to this,
<script>
function save(){
// Capture link, with var mycoords containing string
var a = 'http://mydomain.com/capture.php?co='+mycoords;
var img = new Image(1,1);
// Loads link with params, PHP uses $_GET
img.src = a;
alert('f'); // For testing
}
// alerts 'f', does not send data on device
window.onunload = save;
// alerts 'f', does not send data on device
window.onunload = (function(){
save();
});
// Alerts 'f', does not send data on device
window.addEventListener("unload",save,false);
</script>
This code works on all my desktop browsers, including Safari, but on the iTouch/iPhone, no. If I execute the save() function outside any onunload practice, the data sends just fine. I know the onunload works, due to the alerts. But I am absolutely baffled by image object not working in this instance, yet working everywhere else. I have had a good look about on the net, and have found no solution.
Perhaps someone here can maybe give me a solution or an explanation to why this is happening? I would be very grateful. Thank you for your time.

Basically there is no way to detect onunload reliably, as is answered here: javascript unload event in safari mobile?
If you're trying to track clicks, I would suggest adding a click event handler to the link which would first call your save() function and then it could return true or update the document.location.href to take the user to the final link.