gui extension - selecting the correct frame and using correctly the Javascript Console

Question

I have just started with developing GUI extensions in Tridion 2013 SP1. I am facing difficulties in getting it set up correctly first.

The javascript console doesn't recognizes any aliases like: $popup, $commands, $models. Below is a sample error shown:

I have searched and found few examples on tridion stackexchange which helped me setting up editor.config, command file(.js), styling for the extensions.

Particularly, below answer mentions something like "Correct Frame" to be chosen first: GUI Extensions | Editor extensions improvement

[Comment by user Peter Kjaer] - As an additional tip: I usually "check for other useful functions" by just typing in the class in the JavaScript console of my choice (F12 usually). You'll get code-completion there. Note that you'll usually have to choose the correct frame first, but you'll learn the right one soon enough

My question - What is a frame here and how to choose the correct frame so that the aliases like: $commands, $cme are recognized?

Answer 1

It depends on the browser you are using.

In Chrome, it's a drop-down list in the top-left corner of the console:

In Firefox, it's an icon in the top-right:

And in Internet Explorer it's a drop-down in the top-right:

Your screenshot seems to be from FireBug, a Firefox addon. It should also have a drop-down list for the frames (or the files loaded in them) but it's been too long since I last used it so I don't recall exactly where. You'll need to find that one on your own :)

Basically, the CME is full of iframes so you'll need to execute your console commands in the right frame. The top level one doesn't have the CME code in it.

Usually, you're looking for "Dashboard.aspx". Unfortunately, you are likely to see several listings for that -- so you'll need to try them one by one until your tab completion works.