How do I troubleshoot a website issue that only shows up on my iphone?

How do I troubleshoot a website issue that only shows up on my iphone?
0.0 0

#1

I only have one ios device, and my portfolio isn’t aligned correctly on it. Everything else is fine. just this iphone. It happens in chrome and safari.

How do I trouble shoot it to find out which css rules are causing an issue? Its really inconvenient to push to github pages just to try out a guess fix that hasn’t worked.

should be more like

Cheers

mark


#2

Not sure how you would find the problem. Maybe using some kind of CSS reset will work (Though that would mean pushing to gh-pages to probably find out that this doesn’t work :slight_smile: )?


#3

I have normalize linked. I’m not certain it is the css now as its 2 browsers on the iphone, but its fine on everything else I have seen it on.

maybe flexbox inside flexbox inside home made slider inside home made tabs is just asking too much and this is what I get for saying you don’t need Bootstrap!


#4

Just found a genius way to test this (hope it works for everything and everyone).

  • install lite-server globally: npm i -g lite-server (or basically anything that uses localhost)
  • find your ip address
  • find the port the server runs on
  • on mobile open <ip-address>:<port>

With browser-sync it automatically reloads as well!!! :grinning:


#5

oh nice one ben, i’ll give that a try later. I had to move on.

I guess this is a remote emulator then? make changes on PC files, refresh phone on that server address and port?


#6

Well, I found its firs limitation: it doesn’t work with the angular cli :disappointed:

Anyway, when you use lite-server (which includes browser-sync) you just open the url once and it refreshes automatically.


#7

thats ok I haven’t got to angular yet anyway. Just about know what it is :slight_smile:


#8

Just got it to work with Angular as well :wink:

This is seriously awesome, I can now have my tablet as preview, so I don’t have to fit multiple windows on my laptop screen. And I can also directly see how it looks on mobile.

Thanks for asking this question!


#9

Got around to this today. It took some firewall fettling, both on the PC and on the router, but it’s working.

Cheers @BenGitter I can trouble shoot IOS now :thumbsup:


#10

Google Chrome: Ctrl+Shift+I (Developer Tools) > Ctrl+Shift+M (Toggle Device Toolbar) > Select iPhone from dropdown > Make changes to your code until its fixed.


#11

Hi @sahilsunny

Thanks for the tip, unfortunately my issue doesn’t show up that way. I think the device views in browsers only really show how the website looks like at that size, they don’t emulate the device OS or it’s browser :frowning:


#12

Sorted!

Although I think I’ve been connecting to IIS not server light :blush: