Debugging css and javascript on different devices

Question

When I resize my browser on my mac, on any resolution it looks well, but when I'm on a older tablet of mine, the website looks so messed up.

What is the best way to capture that device info? So I can replicate on my machine? I still don't know is it a javascript or a css issue. How is this usually done?

Edit: By the info I got so far, there is no tool that you can install on your device. Which would act as some kind of console where you could see, debug and interact errors like a js resource didn't load, unknown css property or any other error that you're able to see as a web developer in a chrome console for instance

Did you use lots of CSS3 features? Maybe your tablet browser is too old to support them. — Stickers, Mar 14 '15 at 18:57
@Lal I'm using safari, but that's exactly why I want to get some more info — Gandalf StormCrow, Mar 14 '15 at 18:58
@sdcr it was bought in November 2013, I don't think it's too old, but shouldn't be — Gandalf StormCrow, Mar 14 '15 at 18:58
@GandalfStormCrow have you tried to add -webkit* prefix to all CSS3 properties, as you said it looks all good on any sizes on desktop, and old Safari will need some of prefix perhaps. If you use vh, rem etc. that gonna be very difficult to fix, go to http://caniuse.com/ to find out. — Stickers, Mar 14 '15 at 19:03
@sdcr yes I have tried, but is it possible that all css/js developers do like this. And by that I mean guess, are we really that backward? I've just started doing this and can't believe there is no debugging tool that says, you're using this, and the console output is that. This is what fails to load, this is what I'm having issues interpret, this is not compatible property etc etc — Gandalf StormCrow, Mar 14 '15 at 19:07
@GandalfStormCrow i don't know such tools exist, try https://www.modern.ie/en-us/tools not sure if it's useful. There is a Web Inspector on mobile Safari too, I never tired. After all, it's your choice whether to support very old browsers. — Stickers, Mar 14 '15 at 19:15
@sdcr do you think that ipad from November of 2013 has old browser? It's not my choice, it's peoples choice and I have to make a website visible to them. It's really sad that there is no debug tool which you can put on your device. It's basically a guessing game — Gandalf StormCrow, Mar 14 '15 at 19:18
You should be able to use remote debugging. You will need to use Safari on the desktop. I am not sure if you are restricted to Mac however... http://moduscreate.com/enable-remote-web-inspector-in-ios-6/ The same also exists for Chrome/Android devices and http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/ — xxcezz, Mar 14 '15 at 19:25
@GandalfStormCrow sorry to hear that, my best guess that would be iPad 1, running IOS 4/5. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787 — Stickers, Mar 14 '15 at 19:25
@sdcr and xxcezz Please put your comments into answers, other people might need the same info and it's not easy to find them in comments, thanks! — Gandalf StormCrow, Mar 14 '15 at 19:38
@GandalfStormCrow i dont' feel very confident to write the answer, but you can summaries it and answer your own question. — Stickers, Mar 14 '15 at 19:41

score 0 · Answer 1 · answered Mar 16 '15 at 14:07

Answering the question from some of the comments, so it's more visible to other people having the same issue :

You should be able to use remote debugging. You will need to use Safari on the desktop. I am not sure if you are restricted to Mac however... moduscreate.com/enable-remote-web-inspector-in-ios-6 The same also exists for Chrome/Android devices and developer.telerik.com/featured/… – xxcezz

Try modern.ie/en-us/tools not sure if it's useful. http://caniuse.com .

my best guess that would be iPad 1, running IOS 4/5. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

Debugging css and javascript on different devices

1 Answers1