Firefox debugger jumps from an if-block directly to an else-block - javascript

I'm wondering how the sequence shown below could possibly occur.
Here is the function in question:
WebSocketConnector.prototype.sendMessage = function(message) {
if (socket !== null) {
socket.send(message);
console.log('Sent: ' + message);
} else {
alert('Failed to send message. WebSocket connection not established.');
}
};
And here is what happens when I debug a call to this function:
1. Start at line 32.
2. Step In, advances to line 33.
3. Step In again, advances to line 34.
4. Step in one more time, advances to line 36???
--> How can control possibly go directly from the last line of the if block to the first line of the else block?
Some important facts:
There are no missing steps here.
This really happened.
I'm only calling sendMessage from one place, and I'm logging when that call occurs. There are no unaccounted for sendMessage calls in the log, so I don't believe asynchrony is an explanation.
I also tried the same thing with the Firebug debugger and the same crazy thing happens.
Edit/Followup
If I add a console.log statement to the first line of the else block (pushing the alert down to line 37), the control will go right from line 34 to line 37 (skipping the console.log statement).
Also, I should have mentioned, no alert actually ever appears, even when stepping directly into that code.
Edit 2
Here is the spacing and CRLF's of the sendMessage function:

This is because the debugger steps to the last executable line before returning to the calling stack frame. In your case this is line 36 containing the alert() function. It would be clearer if the debugger jumped to the closing curly brace of the function, i.e. line 38.
There is already a report to change this behavior:
https://bugzil.la/1013219

Unfortunately there are some really odd behaviors with the debugger in Firefox. I wouldn't be surprised if what you describe might be related to this bug. The "step" functionality sometimes doesn't do what you would expect, or what Chromium browser does.

Related

Invalid left-hand side in assignment for no apparent reason

I'm receiving that kind of error, I can't copy the whole code (quite big), but I can find a reason why that happens.
In this portion of code
'... })})(jQInteractives);</script></textarea>')
} else if (ide == "feverchart") {
$("#codeArea").append('<textarea>'+
'<style>.stretch:after {content: ....
I'm using ... just to indicate the code follows there, but it's not a problem of what's around it, even if I move it, the problem always appears to be in the line
$("#codeArea").append('<textarea>'+
It has nothing to do with the '+ because I've tried without it and just continuing the line.
I'm using the exact same line in other parts of the complete code without problems, and I don't see the problem here either.
Any clues?
Per comment, I moved it to a different place, to avoid problems with not properly closing smoething. I have the same problem when I move it here:
if (ide == "blanktemp") {
} else if (ide == "feverchart") {
$("#codeArea").append('<textarea>'+
'<style>.stretch:after {content: ".";display: [... code continues ...]
It's always the same line, no matter where I put it.

javascript Uint8Array access doesn't return expected result (compared with expanding out the contents of the array in chrome console)

When I console.log my Uint8Array to the chrome dev console, I can expand out its contents and view all the elements. When I console.log an access to that array, say array[512], I don't see what I saw when I expanded it out.
Example taken directly from my source code:
console.log(this.memory); // logs [0, 0, 0, ......]
console.log(this.memory[512]); // logs 0
When I expand out the array from the first log, I can see that index 512 has the value 34, NOT 0.
Here is a screenshot from my console:
Right below that, the number 0 is logged from when I logged this.memory[512]. I tried running through the array with a for-loop to make double sure. That logged out all 0's! I don't know what else to try.
Update: Even more weirdness. I attached the array to window to play around with it in console:
window.memory = this.memory
// now in chrome, lets see what happens
window.memory[512];
-> 34
Here is a jsfiddle with pretty much all my code. The strangeness is happening around lines 113-116. It is a work in progress chip8 emulator: https://jsfiddle.net/ybd6ntks/2/
Update 2: If I run window.memory[512]; from my source code, I get 0. If I run window.memory[512]; from within chrome console, I get 34.
It turned out it was an async issue. I fixed it by waiting until I knew for sure that the array had been updated completely before moving on with the program. I set a flag on the last byte, and checked if it was set or not. If not, I setTimeout and tried again.

Detect when is Firebug (or any other web-debugger) used for debugging

I have a Javascript application that relies on capturing keyboard events in a textarea. While testing and debugging it on Firefox (14.x) with firebug (1.10.2) I noticed that my application behaves differently when I have breakpoints active and the debugger is working.
I know how to detect Firebug but I would like to know if it is possible to detect (with Javascript) when the Firebug is actually used for debugging?
Edit: here is an example on some random site
This site catches the key event in an input box, prints out character code and replaces the pressed key with a text representation (ie. "enter" for enter key) or an uppercase (if a letter).
When I debug it with Chrome and place a breakpoint on the listener function, nothing happens when the breakpoint is reached (as expected), when I resume the script the text is printed out as normal.
When I debug it with Firebug on Firefox: Let us say that previously I pressed the "e" letter and the input bar contains text "E". I turn on the breakpoint and press letter "z". Firebug stops at the breakpoint but the input bar now has text "Ez" instead of "E". When I resume the script, this text is replaced with "Z" as expected.
I tried out another Firefox debugger (Venkman 0.9.89) and the same thing happened. So my guess is this is a Firefox problem, not the debugger problem. So the question might be more general, can it be detected when is the Javascript code being debugged?
This is what I do to detect Firebug:
if (window.console && (window.console.firebug || window.console.exception)) {
// At this point, Firebug is enabled
}
The first test is important to make sure that the console actually exists The second one will test for Firebug, although it will only work for older versions of it. The third one is there as Firebug adds the "exception" This is because the property "exception" is added by Firebug's plugin.
(Unrelated but interested: window.console.exception is the method used by Firebug to display a message onto the console. For example, type:
>>> window.console.exception("A message", {param:'Value'})
You will see an error that will look very familiar, with a dump of the passed object!
Merc.
Well, hope this answer will help someone.
Let function we debug to be such as:
function debugged()
{
debugger;
}
setTimeout(debugged, 3000);
add this debug detection code is:
setTimeout(this.x = function(a){ s = Math.abs(new Date() - a.c - 1000); a.c = new Date(); setTimeout(a.foo,1000, a); if(s>100)console.log("debug") },1000, {c: new Date(), foo:this.x})
so if we run it in some place and open debugger, it will trigger breakpoint and debug event will be catched(you can see it by "debug" word appearing in console). This is a concept, you may change detection period time and a way of raising debug flag. Thanks to single-threaded javascript.

Chrome JS debugging help... where was function called?

I'm using console.log(var_name); to debug JS code in chrome and am wondering, is there a way to output to the console the line at which the current function was called?
You can get the stack trace with the following:
(new Error).stack;
You could then use a regular expression to filter out the line number: http://jsfiddle.net/8wA74/.
var stack = (new Error).stack.split("\n"),
line = /:(\d+):/.exec(stack[1]); // 1 is stack depth, format is "url:line:char"
console.log("Current function was called on line " + line[1]);
// this 1 is the number of the group in regexp
Not that i know of, but wouldnt it be possible to set a breakpoint instead? That surely has a stacktrace visible.
Just try to click the linenumber in the dev. console, it'll show a blue arrow and next time it hits it'll show you the stacktrace.

javascript eval issue

I have a function that is parsing xml which contains javascript function calls. An example of this is:
eval(getElementText(PropValue[0]));
getElementText(PropValue[0] = top.hidePopWin()
I have followed this call up to the hidePopWin function and watched it complete from the top of the function to the bottom of the function.
Everything looks in order however I get this pesky error in Firefox: top is null
As you have probably guessed hidePopWin closes the popup window that is currently displayed.
So, hidePopWin is called and it goes through just fine (in fact the popup does in fact close), but after that is the problem. It doesn't go to the next step. I get the top is null message in Firefox (firebug) and it just stops.
The only other thing I need to mention is that this whole process starts on a double click event (legacy code). There is also a single click event that fires as well. At first I thought maybe that was the issue, however, I took out the reference to the onclick event and I still get the same message.
So I'm thinking that it has something to do with the eval statement. Just for more information I am placing a console.log("1") above the eval statement and a console.log("2") below the eval. The "1" prints, the "2" does not.
Does anyone have any ideas as to what might be the issue?
Update:
if(getElementText(PropValue[0]) == "top.hidePopWin();"){
console.log('here');
top.hidePopWin();
console.log('end');
}else{
console.log(getElementText(PropValue[0]));
eval(getElementText(PropValue[0]));
}
OK I tried the above... I see the "here" statement, but it still says top is null. The "end" statement never prints. When I click on the top is null in FF it highlights the eval statement??? So I don't know what the heck is going on.
no, but could you change the code to directly execute the code outside eval and test?
So, change, eval(getElementText(PropValue[0]));
to
top.hidePopWin();
see if you get the same error.
is 'top' visible in that scope if you breakpoint in FF (on the console.log('here') line? It's sounding like there is no such variable (I don't know why the popup closes though).
OK... This may not be the best way to go, but I did finally get it to work. Per the suggestion to change the code to run top.hidePopWin(). I tried those suggestions however I was still getting the top is null issue.
In desperation I took out the "top." and now it works. So I'm guessing there was not a "top" variable (wierd notation in my opinion).
So now I'm capturing if the string is equaling "top.hidePopWin()" and then instead of calling the eval I'm just calling the function hidePopWin();
Seems to work. Let me know if there is another way of going about this.

Categories

Resources