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

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.

Related

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

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.

Javascript indexOf not finding text in a variable

I am sure there is something simple that I am missing but I am stumped here.
The issue is that I am looping through an array of strings and using the string value to search for a part of that string using indexOf. The first time around the loop the index of is finding what I am looking for but the second time it is not.
Here is a fiddle - http://jsfiddle.net/jeremywrags/uSwjG/1/
the line that seems to be not working is this
var aliasIndex = fromclause.indexOf(" " + tableAlias + " " );
I am trying to build a SQL parser for a cloud app and the use case here is that when a table is aliased I need to get the original table name so that I can look up the table columns. The first time around the loop index of returns the index and then the table name. The second time around the index of is -1 and the table name is not retrieved.
If I need to provide more context please let me know.
thanks
It's not matching because on the second pass, tableAlias is the string " b" (note the space). So then you search for " b " (note two leading spaces), which isn't there.
Rather than using alert, use the debugger built into your browser. You can set breakpoints in the code, step through line by line, inspect variables, etc., etc. Doing that with this would have shown you, when looking at the variable tableAlias, that it had a leading space, hopefully helping you find the solution.
Here's what that looks like in Chrome's debugger, for instance:
(If you look at the jsFiddle source above the actual debugger's version, you'll see a debugger; statement in the code — normally you don't need that statement, you can just open your page, use the "Sources" tab to find your JavaScript file, navigate to the line, and click the margin to the left of it to set a breakpoint. But sometimes [for instance, when using jsFiddle], the debugger; statement is handy. What it does is, if the debugger is open, halts execution of the code at that point like a breakpoint does.)

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.

Illegal Character error in jQuery - regardless of function content

First of all, I've done my research and I did find a bunch of simialr questions. However, I didn't find an answer that applies to my problem. All the examples I found were related to unescaped characters, single/double quote mishaps and the like. I on the other hand am getting this error on the following function:
$('.seq_input').blur(function(){
//var id = $(this).data('id');
//var index = parseInt($(this).val()),
//element = $("#test-list li").eq(id).remove();
//$("#test-list li").eq(index - 1).before(element); // -1 because users like 1 based indices
alert('what?');
})​​​;
As you see I commented out everything and just left an alert, and I'm still getting the error, pointing to the last line of the function. It couldn't have anything to do with other functions because I just added this one alone at the end of my current Javascript.
Can someone please tell me what's going on here? Why on Earth would a function that just alerts something (or even if it doesn't do anything) give an error?
NOTE: error is shown as soon as the page is loaded
There are invisible characters between the trailing semicolon and the parenthesis. I concatenated your code, put it in a string, and called a non-existent function in order to trigger a error (using this method).
'})​​​;'.l()
>>> TypeError: "})\u200B\u200B\u200B;".l is not a function
$('.seq_input') may used on the other functions, try using new id to do that function.

Jquery - Unterminated String Constant

I have a page with jquery on it. It works fine in Firefox, Chrome etc but if I load it in IE, none of the Jquery functions run, and IE's script debugger shows:
Error
A Runtime Error has occurred.
Do you wish to Debug?
Line: 269
Error: Unterminated string constant
Yes No
The line in question is in my (unmodified) jquery.js that is causing the error is
style.left = ret || 0;
It also shows:
Error
A Runtime Error has occurred.
Do you wish to Debug?
Line: 835
Error: Invalid argument.
Yes No
With the line in question being:
ret = style.pixelLeft + "px";
Any ideas?
EDIT:
Seems I may have been looking in the wrong place for the error. If I take this out, it works:
$(".middlebox").children("p").hide();
$(".middlebox").addClass("middlebox_closed", "fast");
The error is not necessarily in the jQuery code, but the argument value being passed as a parameter into a function in jQuery i.e. the step before.
EDIT:
This line is incorrect
$(".middlebox").addClass("middlebox_closed", "fast");
addClass() does not take 2 arguments, just one which is a string for the class that you wish to add. Change it to
$(".middlebox").addClass("middlebox_closed");
and it will work. Or maybe you wanted to add 2 classes, in which case this will work too
$(".middlebox").addClass("middlebox_closed").addClass("fast");
// or this for brevity
$(".middlebox").addClass("middlebox_closed fast");
(maybe) Try using style.left instead of pixelLeft
Also check that style is initialised properly.
What are you trying to achieve by this line? style.left = ret || 0;
Maybe you wanted something like style.left = parseInt(ret)

Categories

Resources