Develop Reference

Javascript debugging in Chrome Inspector: variables are shown undefined in watches and console but can be inspected when hovered

While debugging AngularJS in Chrome inspector I often face the situation when I know that some variables are defined, and I can inspected them by hovering a mouse over them in Chrome inspector. They also appear in 'locals' tab. However, when I try to add them to watch tab or evaluate them in console by typing the variable name I get "undefined". See picture(notice variable 'xhr').
Can anyone explain the reason why sometimes variables are shown as undefined in watch tab and console, when they aren't actually undefined in current scope? And, if it's possible, how to make watch window and console to display values of the variables correctly all the time?
See picture(notice variable 'xhr').
Thanks

Source mapped variables will not show the resolved names in the debugger, as this functionality has yet to be implemented. The interesting part is that the map file does contain a names array, containing the original names. However, the browser has yet to use this. There was an experimental feature in Canary, but that doesn't appear to exist anymore.
You can follow the display source map variable names in Developer Tools thread.
In the meantime, I recommend switching to the un-minified version of the library to debug your particular problem(s), but switch it out in production. Not ideal I know.

How to declare a function in the scope of the browser?

a function can be declared in the scope of the window-object that is accessible in that particular tab of the browser. The syntax is as follows:
window.f1=function(){
//statements...
}
But is there a way to declare the function in the scope of the browser so that the function is accessible through any tab open in the browser. I want a syntax equivalent to the following
browser.f1=function(){//browser is what I want.
//statements...
}
Can anyone suggest me a possible way?

Thanx to the comments received on my question, I achieved it using localStorege. A quite fair reference is http://dev.w3.org/.
code
<script>
if(!localStorage.a)
localStorage.a=10;
</script>
If this script is included in a webpage of a particular domain(say www.example.com). Then whenever that page or any other page belonging to that doman is opened in the previously used browser, you can access it as localStorage.a which will be 10 in this case until and unless you explicitly delete localStorage.a.
This is probably the simplest and shortest and hence the best solution to my problem. Thanx to everyone for providing the relevant info.

How to access controls from a console

I tried to execute the following command from the console.
var subject = Xrm.Page.ui.controls.get("subject");
That's the exact syntax I'm using in the web resource that I'm plugging in to CRM. However, I only got an error message saying that "unable to get property 'controls' of undefined or null reference".
I do understand the message. What I want to know is two-fold.
What syntax will work from the console (F12) to refer to the stuff on the screen?
Why doesn't it work the way I did? Where doesn ui come from?
I've checked that I can refer to both Xrm and Crm.Page but apparently ui is null (it's listed when I print out the contents of Page but sett to null).

I know this is a kinda old thread, but if you still getting that 'object doesn't support property..' error when executing the command from console, IE F12; try calling it from the frame i.e
frames[0].Xrm.Page.getAttribute("controlId").getValue();
In CRM 2013 it is a little different
frames[1].Xrm.Page

It's kind of tough to detect the frames across different browsers, so this little javascript can help you out:
for(var i=0;i<5;i++) //loop through 0 to 4
if(frames[i].Xrm.Page.ui != undefined) //check if undefined
{
Xrm = frames[i].Xrm; //assign Xrm
console.info("~: Xrm updated with frame " + i + " :~"); //show info
break; //breakout the loop
}
What it does ?
What it's basically doing is to loop through 0-5 to find frame where
Xrm.Page.ui is not undefined, once it gets it it assigns it to the Xrm and breaks the loop.
How to use ?
To use it just copy/paste and run in the browser console once per
session then after you can run/test all your Xrm codes form the browser console.

This works for me Xrm.Page.getControl("controlId"). It's just a shortcut for what you have already though...cant-disable-set-to-read-only-protect-gray-out-etc-a-field

In addition to what #Daryl said, I can add that I use different syntax. For some reason, I don't get his to work either. Might have to do with different browser version or something. Instead try to execute this, if you still can't get it to work (although I must admit that his is shorter = better).
Xrm.Page.getAttribute("lastname").getValue();
The lastname parts is tested a minute ago on creation of an instance of entity Contact. I just put in a breakpoint inside a script that is executed onchange and while broken-pointed, I entered the command above to the console.
If neither approach works for you, you've got some weird problem with your CRM or browser.

A reason some people need this information is to access their own code. If you need to access your own methods from the console, in 2011, any global methods (or namespaces) in your javascript were also in forms[0]. Obviously, this is a bad idea, just from a naming standpoint. In forms v6+ any global objects or functions are in an object called customScriptsFrame inside frames[0] (or presumably whichever frame the Xrm is found).
frames[0].customScriptsFrame.myFunctionName();

with firefox w/firebug, how can I write javascript in the browser and use the .js file objects also?

With firefox w/firebug, can I type javascript into the browser and test things?
Can I also reference functions/objects from .js files references in the html?

Short answer: Yes, you can, by using the console.
Longer answer: Take a look at the What's new in Firebug 1.6 video, it gives an excellent demonstration on what you can do with the console, including auto-completion of the available variables.
Everything that's available globally in the current document is available to the console. So if you included jQuery on the current page, it'll be accessible from the console too.

Yes, if you enable the console tab you can use it as a Javascript REPL. From there you should be able to access any variables and objects in the global scope.

yes, you can... while on firebug (1.6.1) click 5th button from the left, its like a bunch of lines, entitled show command line then you will see it.
as for your second question... u can use it as long as it is on the DOM otherwise goodluck to u :)

Accessing properties of window with Selenium

The page I am trying to test sets the value of "global variables". From the Firebug, I can access those as properties of the window object (e.g. window.foo).
From Selenium however, typeof selenium.browserbot.getCurrentWindow().foo always return "undefined", say when used in the condition of a waitForCondition. Any idea of what I could be doing wrong?

I think it cant be done, it could be done in greasemonkey using unsafeWindow, however that doesnt work in selenium. i tried to do it using
addLocationStrategy
zzz
return prompt(inWindow.a);
and than
click
zzz=xxx
but i cant access it. if you have any ideas how to do it let me know.
if its your page maybe you could keep that variable in some html control. its a hack, but .....