[SalesForce] How to access global javascript variables in the browser console

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 ?

Best Answer

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:

enter image description here