Debugging Masterpages

Have you ever spent time trying to debug a masterpage? Like every SharePoint developer I spent my days on the SharePoint platform, and since ‘everything’ you see in SharePoint is based on masterpages, it would be nice if they do what they should. However a lot of customers require customized masterpages, and a lot of these masterpages work just fine, and if they don’t you can easily debug them, or not. Last week we had a nice issue; in IE6 (yea IE6) our masterpage didn’t show the navigation controls in the edit navigation page. Seems out the masterpage been missing a three divs:

   <div id="zz1_CurrentNav_Data" style="display:none;"></div>
   <div id="zz1_TopNavigationMenu_Data" style="display:none;"></div>
   <div id="zz2_CurrentNav_Data" style="display:none;"></div>

Adding those divs (even with a display:none) will fix a lot of these errors. And there is a nice way to find out what other divs are required by SharePoint to show all data. Since often you can see the error in the lower left of the screen (often something like: Scripts loading …), the underlying issue can be found in the JavaScript. Just browse to the Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033 (make sure to change the 1033 to your regional code, so in my case it would be 1043 and make a copy of the BFORM.js, then edit the original one. On rule 12418 you can find the var named L_PleaseWaitForScripts_Text this var is used to display errors, now start at the top of your document and search for it. You will see that its only used in the SPOnError_HandleErrors function, where you can find:

{
  window.status=L_PleaseWaitForScripts_Text;
}

Just add a simple alert above the window.status that displays the msg passed to your function.

{ alert(msg); window.status=L_PleaseWaitForScripts_Text; }

Next time you open the page you want you will get a nice popup containing your error. Nice feature to debug your pages. (Though its only executed when the window.status is not complete)