Getting Firebug Lite working on iPhone Simulator (or, how to add a bookmark to Safari on the iPhone Simulator)

Jan 19 2011

I'm working on some javascript front-end code for one our clients and it's not working correctly on the "mobile" iPhone/iPad/iOS version of Safari.  Which is odd because it works fine on the "normal" versions of Safari (Mac and Windows).  Since I don't actually have an iPhone/iPad/iOS device, I'm limited to debugging the javascript on the iPhone Simulator but it shouldn't be a big deal (famous last words) since Safari has good javascript debugging tools (Develop -> Start Debugging Javascript).

So I fire up the iPhone Simulator and set the device hardware to be an iPad (more screen size is always better) and I turn on the javascript debugger (Settings -> Safari -> Developer -> Debug Console) and......all I get is a console log that shows output.  No debugger, no console, no resource loader, or anything else that is useful.  Yuk! 

So I recall that Firebug has a lite version that works on Safari and IE and I figure that will do the trick.  Additionally, there's a bookmark method of loading Firebug only on the pages where and when you want it to load.  Sweet!  

Except........

Did you know that the top level bookmarks in Safari on the iPhone Simulator are read only?  As in, you can't change them?  As in, you can't add new ones to the top level?  I sure didn't.  

Now I know you're saying to yourself "Jeff, you big doofus.  You can create new folders in the bookmarks listing and then add your bookmark there."  Well, you're right...sort of.  You can add bookmarks, but it's not always successful in letting you change the URL for the bookmark.  For example, in the iPhone4 simulator with the 4.1 SDK, you can add a bookmark, but you can't paste in a different URL to overwrite the one that's added automatically when you create the bookmark.  On the other hand, in the iPad simulator with the 3.2 SDK, you can overwrite the URL.  It's inconsistent enough to make me take a pass on that technique.

So now my two options were to either add the Firebug lite script tag to each page that I was having problems with, or figuring out how to edit the top level bookmark list to add the Firebug bookmark I needed.

After a bit of futzing around (that's the technical term), I figured it out.  The bookmarks themselves live in a property list file called StaticBookmarks-<language_code>.plist, and there one file for each language code.  Since I'm in the US, the file that I needed was called StaticBookmarks-en_US.plist.  The (not so) tricky question is where that file lives, and the answer is "it depends on which iPhone Simulator SDK you're working in".  On my iPhoneSimulator SDK setup, I have 3 versions of the SDK -- 3.2, 4.0 and 4.1 -- so  I have 3 versions of the StaticBookmarks-en_US.plist file, one in each SDK setup.  The key is to know which SDK the iPhone Simulator is using.  Which is easy enough because the iPhone Simulator shows you (Hardware -> Version).  For since the iPad version of the Simulator works in the 3.2 version (and only the 3.2 version), my StaticBookmarks-en_US.plist file is in the 3.2 version of the iPhone Simulator SDK.

The plist file itself it embedded in the MobileSafari.app folder under the specific iPhoneSimulator SDK.  I found mine here: /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.2.sdk/Applications/MobileSafari.app/.  In that folder are a bunch of files including the MobileSafari executable and all the StaticBookmarks files.  The issue with editing the plist file is that your normal user permissions won't have write-access to that file, however it's easy enough to open up the plist file as sudo and edit it.  Here's how:

  1. Open up a Terminal Window
  2. cd /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.2.sdk/Applications/MobileSafari.app
  3. sudo "/Developer/Applications/Utilities/Property List Editor.app/Contents/MacOS/Property List Editor" StaticBookmarks-en_US.plist
That will open up the plist file for editing (and saving).  Then you just need to make the following changes so your Property List Editor screen looks like this:
  1. Right-Click on the "Root" line.
  2. Select "Add Row" from the Context Menu.  That will become "Item 0" in the list.
  3. Change the type of "Item 0" from "String" to "Dictionary"
  4. Click on the triangle next to "Item 0" to open it up.
  5. Right-Click on "Item 0" and select "Add Row"
  6. For the new Row (under "Item 0") set the Key = "Title" and the value = "Firebug Lite"
  7. Right-Click on the new "Title" row (that you just added) and select "Add Row"
  8. For the new Row (under the "Title" row) set the Key = "URL" and the value = "javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return; E=F[i+'NS']&&F.documentElement.namespaceURI; E=E?F[i+'NS'](E,'script'):F[i]('script'); E[r]('id', b); E[r]('src',I+g+T); E[r](b,u); (F[e]('head')[0]||F[e]('body')[0]).appendChild(E); E=new%20Image; E[r]('src', I+L);})(document, 'createElement', 'setAttribute', 'getElementsByTagName', 'FirebugLite', '4', 'firebug-lite.js', 'releases/lite/latest/skin/xp/sprite.png', 'https://getfirebug.com/', '#startOpened');".  This is the same value as the bookmark listed on the Firebug lite page.

Property List Editor view

That's it!  Save the file (which you can do because you're running the Property List Editor as the root user) and then restart the iPhone Simulator.  Open the Safari Browser in the Simulator and voila!  There's your bookmark.  Just remember to select the SDK in the iPhone Simulator that matches the SDK of the StaticBookmarks file that you changed.

 

Thanks

I managed to get Firebug to open up in Safari using your instructions. However, I am finding it impossible to use because trying to click the various tabs and buttons in Firebug doesn't work most of the time, and scrolling seems to be impossible as well. Any tips about how to go about possibly fixing this? Thanks!

Thanks

Thanks a lot, worked like a charm. Had to turn off auto-capitalization because console.log kept getting changed to Console.log.

pList editor no longer a separate app

I'm sure there are more elegant solutions, but you can try:

sudo "/Developer/Applications/Xcode.app/Contents/MacOS/Xcode" StaticBookmarks-en_US.plist &

Which will open x-code, and from there, you can open, edit and save the pList.

Bookmarks seem to be editable now

Not sure if this changed with an update, but the ios simulator bookmarks appear to be editable now.
My process.
Hit bookmarks button (in the bottom toolbar)
Hit 'Edit' button
and go from there.

Man, i wish i could effectively resize that firebug lite panel on the iphone!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.