Sitecore Desktop in Firefox and production javascript debugging

Back in the pre Sitecore 5.3 days I would sometimes prefer to use Firefox when logging into the Sitecore desktop. Firefox was much faster than IE for this interface, and especially if I was looking at a slow implementation Firefox would help ease some frustration. The desktop didn't look exactly as it should in Firefox, which is probably why Sitecore revoked support for the Sitecore desktop for anything non-IE starting with Sitecore 5.3. I also think it does much better for Sitecore if they allow people to use non-IE browsers to access the desktop interface. Warn them that it won't look right, but let them make their own choice. (or even better, fully support the other browsers.)

So I started looking into how I could access the Sitecore 6 desktop by using Firefox. The login screen obviously was doing some kind of agent sniffing as it removes the desktop interface option if you're not using IE. So I started by looking into the login form itself. This is located at /sitecore/login/default.aspx. Browsing the controls in this file I could see an advanced login control near the bottom of the file.

<div id="AdvancedLoginTabPanel" runat="server">
  <login:AdvancedLogin runat="server" id="AdvancedLogin"/>
</div>

Knowing that the desktop interface is available on the advanced tab of the login screen I know this must be the control which will contain the desktop login option. Checking the 'Register' declarations at the top of the file I can find the advanced login control is contained in the /sitecore/login/advanced.ascx file. Opening this file I can find the button control which is the desktop interface option.

<button id="AdvancedDesktop" type="button" runat="server"
  onclick="javascript:onClick('AdvancedOptions', 'AdvancedDesktop', '/sitecore/shell/default.aspx')"
  ondblclick="javascript:onDblClick()">
<img class="AdvancedOptionImage"
  src="/sitecore/shell/themes/standard/People/32x32/monitor.png"
  alt="Desktop" border="0" />
Desktop
</button>

Note the javascript call for onclick. So that must mean that the interface selected for login must be stored by javascript and posted during the postback for the actual login. Well, seeing as though it's this control which is hidden by Sitecore if you're not using IE, then all I have to do is duplicate this control and change it's ID. After all, it's the javascript which is changing the selected interface.

And there we have it, the option to login to the desktop inside Firefox again. Ahh, the memories...

We can also satisfy 'that mac guy'...

But what about the production javascript debugging bit in the title of this post? Javascript might be sandboxed off from the rest of the computer, but it is not sandboxed from the user.

So a typical example of debugging javascript would normally include placing a few alert statements throughout your misbehaving function to print the value of variables to see where and how your data is changing. On a production website you would never consider putting these debug statements in the javascript file as every visitor would have these debug messages interrupting them which is not acceptable. But you don't need to change your javascript code if all you want to do is look at variable values, as long as they are global.

Through the address bar of my browser I can access the javascript sandbox of the web page. All I have to do is use the 'javascript:' protocol. So let's say I have a global variable named loginOpt. All I have to do to view it's value is enter the following in the address bar.

javascript:alert(loginOpt)

The javascript gets executed in the same sandbox as the web page, so I have access to all the global variables of the page. I could also call javascript functions such as the function that the desktop button calls to set the selected interface for login. So if I didn't want to physically change the /sitecore/login/advanced.ascx file above, or if I didn't have physical access to the file, I could set the desktop as the selected interface to log into on the Sitecore login page by executing the required javascript after the page has loaded by pasting the following into the address bar.

javascript:onClick('AdvancedOptions', 'AdvancedDesktop', '/sitecore/shell/default.aspx')

And then just login.

I first found the ability to execute javascript in the address bar in a consumer computer magazine (APC http://apcmag.com (sorry, can't remember the issue)). The scenario given in the magazine was that of creating 'javascript bookmarklets' where you create a bookmark but instead of inputting a url you input some javascript to be run instead. The javascript they gave in the example was to remove the background image of a web page. I was recently reminded of this ability when I was debugging a page which was hosted from a server I didn't have direct access to. I needed to work out how a particular function came to calculate it's output value which was being done using jQuery (http://jquery.com/). So I just copied the jQuery section in question out of the external javascript file, pasted it into the address bar and quickly found my result. Again, we're in the page's sandbox, so if the page uses jQuery, we can also use jQuery.

So there you go. 2 techniques to allow non IE browsers to use the Sitecore desktop, and a little tidbit on investigating javascript without modifying the javascript files.

I'd also like to take this opportunity to wish everyone a Merry Christmas. I hope Santa brings you everything you wished for. :)