How can I access global javascript variables in the browser console?

Question

This is kind of annoying when developing javascript inside Visualforce: I can not find my global variables !

---

Build a Visualforce page with showHeader="false"

<apex:page showHeader="false">

Create a javascript global variable inside the page:

<script> var myVar = 'Hello'; </script>

Save your test page and open it via its URL.

http//[instance].salesforce.com/apex/[pagename]

Now in the browser console (F12 sometimes), type

window.myVar

and return gives you

'Hello'

---

Now insert this visualforce page as a section in a standard page layout.

Load the standard page and type in the console:

window.myVar

Which returns

undefined

What ?

Where art thou ?

Answer 1

On the standard page layout, visualforce pages are embedded in <iframe/> and the browser console show variable in scope of main page not their iframe (child frame). You can change the scope by selecting the frame.

As shown in image below:

Answer 2

The VF page is loaded inside a frameset and so will not be where you are expecting. Perhaps something like window.frames[x].myVar will give you what you need?