Use the simulator to test web content in iOS.

testing web development

Chrome’s devtools are fantastic for quick cross-device layout checks. But there are rendering differences between Chrome and Safari - especially when it comes to Javascript. I like to check my project on my phone as I work, but as a coffee-imbibing, WiFi-siphoning, nomadic technology-worker, that's not always very convenient. Depending on your double-espresso WiFi situation, connecting to a device for testing can be a pain. And if you don’t have a lightning cable, it’s, well, slightly pointless anyway because you can’t see the console output.

So if you find yourself sinking deeply into the comfort of a beanbag chair, or your device is far away on the kitchen table, or a coworker has rejected your pleas to borrow their lightning cable - here’s a quick tip:

Use the Xcode simulator to preview your responsive web content in iOS Safari.

alt text

  1. Open Xcode and from the Xcode menu and select: Open Developer Tool → Simulator.
  2. Use the command ⌘⇧H to toggle the simulator’s hardware home button.
  3. Open Safari from the dock
  4. Click in the address bar and select “Paste” (http://localhost:8888 if you’re using a stock Mamp setup. If your content is static, pasting a file:// link should work too, though I’m not sure I can condone that practice.)

Gamesradar Mobile on the Simulator

By default, I use the iPhone 6 scaled to 50%, but If you’d like to try different devices:

  1. Select Hardware → Device → iOS from the top menu, and
    select the device you’d like to use for testing.

Safari Devtools
To enable Javascript console output, use desktop Safari’s dev tools. The simulator is available in the Develop window as an inspectable device.

  1. Open desktop Safari and select: Develop → Simulator → Your page URL

From there you can reload the page just like you would on a connected device.

Previewing web content in the Xcode simulator is a handy trick for testing your web projects when you dont want to, or can’t, directly connect to your phone. It’s also a great trick for recording video captures and screenshots for marketing collateral.