Related Products

Contents

iOS Simulator

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.

Install Xcode

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".

Installing iOS Simulator

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

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 Web Inspector in iOS Simulator

Weinre

Using Weinre, you can get a Firebug-like view of what's happening on your mobile site on your smartphone.

Install Weinre

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

<script src="http://yourIPaddress:8081/target/target-script-min.js#anonymous"></script>

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.

Debugging

Now, you should be able to see the web inspector view of what's happening on your phone, on your desktop.

Using Weinre
Last Edited