Using iOS Simulator, you can see what your site will look like on iOS devices (including iPhone and iPad). Used in conjunction with your desktop Safari browser, you can get a full web inspector view of your mobile site.
Note: iOS Simulator is only available on Mac OS X.
Open the App Store by clicking on the icon in your dock.
Type "Xcode" in your search bar and install it. (Note: This is a very large download)
Install iOS Simulator
Once you have installed Xcode, you can download iOS Simulator.
In Xcode, choose Xcode > Preferences.
In the Preferences window, click the Downloads tab.
In Components, select the iOS Simulator versions that you would like and click "Install".
Running iOS Simulator
In Xcode, choose Xcode > Open Developer Tool > iOS Simulator.
In iOS Simulator, tap the Safari icon to load the browser.
Preview your mobile site in iOS Simulator. For more information: View our Mobify Client instructions.
Enabling the Safari Develop Menu
In Safari on your Mac OS X desktop, choose Safari > Preferences.
In the Preferences window, go to the Advanced tab and check "Show Develop menu in menu bar".
Using Web Inspector in iOS Simulator
Once you have your site previewing in Safari on iOS Simulator, switch to Safari on your desktop.
In Safari, choose Develop > iPhone Simulator to see the web inspector view of what's happening in your simulator.
Using Weinre, you can get a Firebug-like view of what's happening on your mobile site on your smartphone.
sudo npm -g install weinre
Run a local Weinre server
weinre --httpPort 8081 --boundHost <yourIPaddress>
This will start the Weinre server on port 8081 on your machine. You can adjust the port number if necessary.
Copy the Weinre tag into your mobile site
Depending on what you're testing, you can either put it directly into the template you're working on, or in root.tmpl to have it run on all pages.
Load up the Weinre debug interface
Go to http://localhost:8081/client/#anonymous in your desktop browser.
Under Access Points, go to the Debug Client User Interface Link.
Switch to the Elements tab, which should show you a web inspector view of the page in your simulator.
Load your mobile site on your phone
Preview your mobile site on your smartphone. For more information: View our Mobify Client instructions.
Now, you should be able to see the web inspector view of what's happening on your phone, on your desktop.