Chrome DevTools for Mobile: Screencast and Emulation

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.

Re: Chrome DevTools for Mobile: Screencast and Emulation

#5

Post by untog » Tue, Dec 03, 2013, 6:48 PM UTC

mladenkovacevic wrote: post #4

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 orig…

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

Re: Chrome DevTools for Mobile: Screencast and Emulation

#6

Post by d0ugie » Tue, Dec 03, 2013, 6:56 PM UTC

Can you get the debugging screencast to cast from your computer to your Chromecast?

Re: Chrome DevTools for Mobile: Screencast and Emulation

#7

Post by mladenkovacevic » Tue, Dec 03, 2013, 6:59 PM UTC

untog wrote: post #5

mladenkovacevic wrote: post #4

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 orig…

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

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.

Re: Chrome DevTools for Mobile: Screencast and Emulation

#8

Post by untog » Tue, Dec 03, 2013, 7:02 PM UTC

mladenkovacevic wrote: post #7

untog wrote: post #5

Earlier quoted context omitted.

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

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.

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.

Re: Chrome DevTools for Mobile: Screencast and Emulation

#9

Post by mladenkovacevic » Tue, Dec 03, 2013, 7:10 PM UTC

untog wrote: post #8

mladenkovacevic wrote: post #7

Earlier quoted context omitted.

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.

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.

Yeah it seems like I'm better off just getting a used 4S.

Re: Chrome DevTools for Mobile: Screencast and Emulation

#10

Post by lambda » Tue, Dec 03, 2013, 7:11 PM UTC

mladenkovacevic wrote: post #4

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 orig…

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.