No conditional inside Firebug console call

[Lawrence San]

I just learned something very basic about a limitation of Firebug -- so basic that I suspect almost everyone here already knew this. I'm only posting it here (at the risk of seeming rather ignorant) because I want to make sure I don't misunderstand the situation.

I have a method that, depending on where it's called from, sometimes reports a meaningful caller and stack trace, and sometimes not. I originally put this into my JavaScript file:

console.info(
   if( arguments.callee.caller.name ) {
         " layout.adjust has been called by: " + arguments.callee.caller.name
      } else {
        " layout.adjust caller is unclear, so here's a stack trace: "
            console.trace() }
)    // end console.info

The above didn't work; the console just reported a syntax error (with no further explanation) as soon as it hit the 'if' clause. I experimented with a far simpler console call ( something like: if(1==1) "FOO" ) and got the same error. I tried googling this but couldn't find anything, so... do I understand correctly that you just can't put conditional logic into a Firebug console call?

Instead, I used this code:

 if( arguments.callee.caller.name ) {
        console.info( " layout.adjust has been called by: " + arguments.callee.caller.name )
            } else {
        console.info( " layout.adjust has been called, but the caller is unclear, so here's a stack trace: " ); console.trace();
        } // end else

That works, but seems messy to me because the only purpose of the conditionals is for the Firebug feedback; they have no purpose in the page code itself. Also the stack trace in this case is extremely uninformative. Oh well.

BTW, I also discovered while googling around that 'arguments.callee.caller' is frowned upon (which I didn't know); you're supposed to give a name to your anonymous function expression so it ain't really anonymous and you can refer to it that way. But they seem to be talking about function recursion, which I'm not doing, and also my "functions" are really methods of my custom objects -- in this case  layout.adjust = function() { blah blah...     not a function expression in the way I usually think of it. I think I'm going to try an end-run around all this in my code by simply passing the calling context as an argument somehow.

In the case of a function or method that can be called from various places in various contexts, how do most Firebug users find out where it was called from? I mean especially in cases where there's no reported caller or where a stack trace is vague or uninformative.

[Sebastian Zartner]

On Saturday, July 19, 2014 12:15:23 AM UTC+2, San wrote:

I just learned something very basic about a limitation of Firebug -- so basic that I suspect almost everyone here already knew this. I'm only posting it here (at the risk of seeming rather ignorant) because I want to make sure I don't misunderstand the situation.

I have a method that, depending on where it's called from, sometimes reports a meaningful caller and stack trace, and sometimes not. I originally put this into my JavaScript file:

console.info(
   if( arguments.callee.caller.name ) {
         " layout.adjust has been called by: " + arguments.callee.caller.name
      } else {
        " layout.adjust caller is unclear, so here's a stack trace: "
            console.trace() }
)    // end console.info

The above didn't work; the console just reported a syntax error

As the error indicates you have a JavaScript syntax error in your script. The point here is that JavaScript doesn't allow to have if blocks or loops as function parameters. You need to use the ternery operator instead to achieve this:

console.info(
    arguments.callee.caller.name ?
    " layout.adjust has been called by: " + arguments.callee.caller.name :
    " layout.adjust caller is unclear, so here's a stack trace: " + console.trace()
)

(with no further explanation)

The unclear syntax error message comes from Firefox. Firebug just displays it. I created bug 1041426 asking to improve it.
 

BTW, I also discovered while googling around that 'arguments.callee.caller' is frowned upon (which I didn't know)

Right, you can read more about that at the Mozilla Developer Network.
 

; you're supposed to give a name to your anonymous function expression so it ain't really anonymous and you can refer to it that way. But they seem to be talking about function recursion, which I'm not doing, and also my "functions" are really methods of my custom objects -- in this case  layout.adjust = function() { blah blah...

The function itself still doesn't have a name in this case. layout.adjust is just the variable that is holding the anonymous function. You may write this instead:

layout.adjust = function layout_adjust() { ... }

In the case of a function or method that can be called from various places in various contexts, how do most Firebug users find out where it was called from? I mean especially in cases where there's no reported caller or where a stack trace is vague or uninformative.

The stack trace provides links at the right side pointing to were the functions were called. If you have a case where they are not shown or point to somewhere unexpected, please post a simple test case for this, so it can be investigated.

Instead of logging the stack trace to the console, you can also set a breakpoint at the first line of the function. When the breakpoint gets hit, you'll see the stack trace within the Stack side panel.

Sebastian

[Lawrence San]

Thank you for your extremely informative response. This will sound dumb, but I hadn't even realized that console.log and console.info were JavaScript functions -- I thought they were something "special" to Firebug only (whatever that means). Had I realized they were just functions, I would never have attempted to use any kind of conditional statements within the parentheses in the first place. All I've ever used as function parameters were variables, primitive values, or other functions.

I've been reading about named function expressions since reading your post. It seems they're useful for both recursion and debugging. I've gone back and added names to all my methods, and the debugging is going much better now.

I know I can use breakpoints with Firebug's stack trace panel, but that slows me down a lot for my current task; I'm constantly reloading and resizing the browser window, and I like seeing all the information flowing down in one stream in the Console.

I found your statement that you can use the ternary operator as a function parameter to be very interesting (and surprising). That turned out to be true; however, the syntax you showed was slightly wrong -- at least it is for the named versions I'm now using. Specifically... I'm testing my "resize illustration" code, and the resizeIllus function can be triggered either by various other code or by the user clicking directly on the illustration. So if I begin the ternary operator this way, analogous (I assume) to the code you suggested:

   console.info( resizeIllus.caller.name ?    ...etc.

...it throws a JS error if the user has clicked. Turns out I have to test for the caller itself, not for caller.name, even though it's the name (of the calling function) that I'm after. This works fine in Firebug:

console.info( resizeIllus.caller ?
                                "resizeIllus has been called by " + resizeIllus.caller.name :
                                "resizeIllus was triggered with no caller, so you probably clicked."
                        )

By the way, the click code itself was set up simply like this:

     illustration.onclick = resizeIllus;

...and I don't know how to make Firebug identify an event like that as the specific trigger (or caller) of a function, which would be an interesting thing if it were possible. Actually, I guess I could wrap the whole thing in another named function which would then be the caller...  but in this case it doesn't matter since if the resize wasn't triggered by a function it must have been triggered by a click.

All very educational. Thanks again for your help!

P.S. I read this discussion group in my gmail account, and it displays parts of the code I insert as underlined blue links, even though they're not links at all. I have no idea why. It's a little annoying. Do other people see parts of my code that way? Any idea how I can stop it from doing that? Thanks.

Lawrence San
Business Writing: Santhology.com
Cartoon Stories for Thoughtful People: Sanstudio.com

--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebug+u...@googlegroups.com.
To post to this group, send email to fir...@googlegroups.com.
Visit this group at http://groups.google.com/group/firebug.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebug/7167e0aa-6b70-412d-96d1-949f0cd221bd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sebastian Zartner]

On Friday, July 25, 2014 1:55:09 AM UTC+2, San wrote:

Thank you for your extremely informative response. This will sound dumb, but I hadn't even realized that console.log and console.info were JavaScript functions -- I thought they were something "special" to Firebug only (whatever that means).

Well, now you know. :-)
FYI all functionality within Firebug and even within Firefox' UI is based on pure JavaScript.
 

That turned out to be true; however, the syntax you showed was slightly wrong -- at least it is for the named versions I'm now using. Specifically... I'm testing my "resize illustration" code, and the resizeIllus function can be triggered either by various other code or by the user clicking directly on the illustration. So if I begin the ternary operator this way, analogous (I assume) to the code you suggested:

   console.info( resizeIllus.caller.name ?    ...etc.

...it throws a JS error if the user has clicked. Turns out I have to test for the caller itself, not for caller.name, even though it's the name (of the calling function) that I'm after.

Yeah, right, so you actually need to check whether the caller exists or not.

By the way, the click code itself was set up simply like this:

     illustration.onclick = resizeIllus;

...and I don't know how to make Firebug identify an event like that as the specific trigger (or caller) of a function

Firebug 2.0 has a new Events side panel within the HTML panel for this.
More about this and other new features can be read in the release notes for 2.0.
 

P.S. I read this discussion group in my gmail account, and it displays parts of the code I insert as underlined blue links, even though they're not links at all. I have no idea why. It's a little annoying. Do other people see parts of my code that way?

Yes, they are displayed as links.
 

Any idea how I can stop it from doing that?

If you answer from within Gmail remove the automatically created links again. Though you should better answer from within the discussion group itself as it has a feature to format your code automatically via the {} button. To write from there just click the link at the bottom of each post saying "To view this discussion on the web visit ..."

Sebastian

[San]

If you answer from within Gmail remove the automatically created links again.

I don't understand. How do I do that?

Though you should better answer from within the discussion group itself as it has a feature to format your code automatically via the {} button.

OK, I'm there now.The Google Group interface looks so similar to my Gmail interface that I didn't realize there was any real difference between them. Sorry for being so off-topic... I'll try some code:

/*FIREBUG*/    console.log("parentWidth is: " +parentWidth+ " ; ilsh.mode is: " +ilsh.mode  );

Looks OK; hopefully that won't look like links when it goes live. Thanks again.

[Sebastian Zartner]

Sorry for the late reply!

On Friday, July 25, 2014 7:23:38 PM UTC+2, San wrote:

If you answer from within Gmail remove the automatically created links again.

I don't understand. How do I do that?

Simply click somewhere within the linked parts and then click the 'Link' button within the toolbar.
 

Though you should better answer from within the discussion group itself as it has a feature to format your code automatically via the {} button.

OK, I'm there now.The Google Group interface looks so similar to my Gmail interface that I didn't realize there was any real difference between them. Sorry for being so off-topic...

No problem.
 

I'll try some code:

/*FIREBUG*/    console.log("parentWidth is: " +parentWidth+ " ; ilsh.mode is: " +ilsh.mode  );

Looks OK; hopefully that won't look like links when it goes live. Thanks again.

It worked just fine.

Btw. I just found out about a similar syntax to the one you tried to use within the function call. It's used for initializing an array with the items of a second array and is called "array comprehension" (introduced with ECMAScript 6):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions

Also a little off-topic, though IMO interesting to know.

Sebastian

[Simon Lindholm]

Den tisdagen den 12:e augusti 2014 kl. 09:54:17 UTC+2 skrev Sebastian Zartner:

Btw. I just found out about a similar syntax to the one you tried to use within the function call. It's used for initializing an array with the items of a second array and is called "array comprehension" (introduced with ECMAScript 6):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions

Also a little off-topic, though IMO interesting to know.

Sebastian

Though note that they are moving from ES6 to ES7, and may end up being removed or change syntax: http://esdiscuss.org/topic/comprehensions-where-art-thou

Simon