5 ms·

I'm really in need of accurate iOS Safari emulation in the browser so I hope this brings it. I have a javascript "push-menu" effect that works properly on every

I'm really in need of accurate iOS Safari emulation in the browser so I hope this brings it. I have a javascript "push-menu" effect that works properly on every device except the iPhone's Safari and debugging it is proving tedious because the effect works in the current dev tols "simulation" of the iPhone as well. On every device the push-menu pushes the other content aside, leaving the button that activated the originally hidden menu still visible. On mobile Safari, the menu covers up the existing content, including the button I would use the close the menu.

untog 13y ago
You can remotely debug a Safari session on a device - but it has to be through desktop Safari. It's in the Develop menu.
- mladenkovacevic 13y ago
  I'm on Linux and installing a virtual box with a Safari browser just for that seems like too much trouble. I have access to my brother's iPhone but it's annoying for me and for him to have to push my changes to a staging site then go "hey can I use your iPhone for a second" every 5 minutes.
  - untog 13y ago
    Honestly, you're never going to be able to replicate the iPhone without using the browser engine it uses. These Chrome Dev Tools will have nothing to do with iPhone Safari.
    - mladenkovacevic 13y ago
      Yeah it seems like I'm better off just getting a used 4S.
      - micampe 13y ago
        an iPod touch may be even cheaper.
      - troels 13y ago
        Or get a cheap mac (mac mini, for example). Then you can run the iPhone emulator and use Safari to debug. Works really well. Edit: Oh, you mean you tried this, but it works differently? Or are you using some linux-based dev tools?
        mladenkovacevic 13y ago
        No I've just been using the iPhone user agent "simulation" in Chrome's dev tools. All this does I think it set a reasonably correct resolution and scaling factor, but all the other rendering specifics get overlooked.
        troels 13y ago
        OK. The iPhone simulator that comes with Xcode is really close to the real thing. You need a mac for it though.
  - abjourn 13y ago
    I have had success debugging iOS Safari layout issues with https://github.com/google/ios-webkit-debug-proxy https://github.com/google/ios-webkit-debug-proxy. It claims to support Linux, but I have only used it on a Mac. Could be worth a shot.
    - mladenkovacevic 13y ago
      This seems pretty cool (actually very similar to at least the port-forwarding part of OP's article - except for iOS), but I imagine on Linux you'd still need a device. On a Mac you could just use the Xcode's iOS simulator.
  - MaxGabriel 13y ago
    You don't need to push your changes to a staging server. Just have your computer and iPhone on the same wifi network. Then direct the iPhone's browser to your computer's IP address:port e.g. 192.168:56:65:4000
    - mladenkovacevic 13y ago
      Ah yes of course that makes sense. Can you tell I'm a total newb :) Thanks.
lambda 13y ago
Note that Chrome for Android (and the desktop emulator) are very different than Safari on iOS. Even when they were both built on top of Webkit, they had different renderers and platform bindings (and the iOS binding was not open source, which caused some of the friction that caused the split). Now that Blink has forked from Webkit, they are diverging even further. So while this means you can do basic mobile web development this way, testing that your UI generally works on mobile devices, it's not substitute for testing and developing on actual iOS Safari.
- thousande 13y ago
  More details about this here: http://www.paulirish.com/2013/webkit-for-developers/ http://www.paulirish.com/2013/webkit-for-developers/
  - lambda 13y ago
    Right. And this was before the Blink fork; they've diverged even further by now.
cleverjake 13y ago
check out browserstack.com
- mladenkovacevic 13y ago
  This seems like the holy grail and I will definitely do the free trial to test it out but at this point I am not getting paid for my website development efforts so I'm not ready yet to pay a monthly fee for this (just hacking on something for myself).
  - robertha 13y ago
    It's a great product, unfortunately (for us) the price has been steadily rising. When I first signed up it was $20/month for everything now I think it's $40/month.
  - triangleman 13y ago
    You can get free screenshots for nine different browsers by using this link: http://www.modern.ie/en-us/report http://www.modern.ie/en-us/report
  - cleverjake 13y ago
    What I did (before I got someone to pay for it for me :D) was buy an iPod touch on craigslist. Got it for like $80. It was a big stretch, financially, at the time, but the hours upon hours it saved was well worth it. You can also sometimes pick up iPhones with bad esns/cracked screens for a lower than normal cost. 'Course all of that assumes you would need more than 2 months worth of debugging on browserstack. Good luck, either way
    - mladenkovacevic 13y ago
      Yeah this is the way I'll end up going. Less than a $100 is a small investment to make sure my sites show well on such a large segment of devices.

untog 13y ago

You can remotely debug a Safari session on a device - but it has to be through desktop Safari. It's in the Develop menu.

mladenkovacevic 13y ago
I'm on Linux and installing a virtual box with a Safari browser just for that seems like too much trouble. I have access to my brother's iPhone but it's annoying for me and for him to have to push my changes to a staging site then go "hey can I use your iPhone for a second" every 5 minutes.
- untog 13y ago
  Honestly, you're never going to be able to replicate the iPhone without using the browser engine it uses. These Chrome Dev Tools will have nothing to do with iPhone Safari.
  - mladenkovacevic 13y ago
    Yeah it seems like I'm better off just getting a used 4S.
    - micampe 13y ago
      an iPod touch may be even cheaper.
    - troels 13y ago
      Or get a cheap mac (mac mini, for example). Then you can run the iPhone emulator and use Safari to debug. Works really well. Edit: Oh, you mean you tried this, but it works differently? Or are you using some linux-based dev tools?
      - mladenkovacevic 13y ago
        No I've just been using the iPhone user agent "simulation" in Chrome's dev tools. All this does I think it set a reasonably correct resolution and scaling factor, but all the other rendering specifics get overlooked.
        troels 13y ago
        OK. The iPhone simulator that comes with Xcode is really close to the real thing. You need a mac for it though.
- abjourn 13y ago
  I have had success debugging iOS Safari layout issues with https://github.com/google/ios-webkit-debug-proxy https://github.com/google/ios-webkit-debug-proxy. It claims to support Linux, but I have only used it on a Mac. Could be worth a shot.
  - mladenkovacevic 13y ago
    This seems pretty cool (actually very similar to at least the port-forwarding part of OP's article - except for iOS), but I imagine on Linux you'd still need a device. On a Mac you could just use the Xcode's iOS simulator.
- MaxGabriel 13y ago
  You don't need to push your changes to a staging server. Just have your computer and iPhone on the same wifi network. Then direct the iPhone's browser to your computer's IP address:port e.g. 192.168:56:65:4000
  - mladenkovacevic 13y ago
    Ah yes of course that makes sense. Can you tell I'm a total newb :) Thanks.

lambda 13y ago

Note that Chrome for Android (and the desktop emulator) are very different than Safari on iOS. Even when they were both built on top of Webkit, they had different renderers and platform bindings (and the iOS binding was not open source, which caused some of the friction that caused the split). Now that Blink has forked from Webkit, they are diverging even further. So while this means you can do basic mobile web development this way, testing that your UI generally works on mobile devices, it's not substitute for testing and developing on actual iOS Safari.

thousande 13y ago
More details about this here: http://www.paulirish.com/2013/webkit-for-developers/ http://www.paulirish.com/2013/webkit-for-developers/
- lambda 13y ago
  Right. And this was before the Blink fork; they've diverged even further by now.

cleverjake 13y ago

check out browserstack.com

mladenkovacevic 13y ago
This seems like the holy grail and I will definitely do the free trial to test it out but at this point I am not getting paid for my website development efforts so I'm not ready yet to pay a monthly fee for this (just hacking on something for myself).
- robertha 13y ago
  It's a great product, unfortunately (for us) the price has been steadily rising. When I first signed up it was $20/month for everything now I think it's $40/month.
- triangleman 13y ago
  You can get free screenshots for nine different browsers by using this link: http://www.modern.ie/en-us/report http://www.modern.ie/en-us/report
- cleverjake 13y ago
  What I did (before I got someone to pay for it for me :D) was buy an iPod touch on craigslist. Got it for like $80. It was a big stretch, financially, at the time, but the hours upon hours it saved was well worth it. You can also sometimes pick up iPhones with bad esns/cracked screens for a lower than normal cost. 'Course all of that assumes you would need more than 2 months worth of debugging on browserstack. Good luck, either way
  - mladenkovacevic 13y ago
    Yeah this is the way I'll end up going. Less than a $100 is a small investment to make sure my sites show well on such a large segment of devices.