How can i troubleshoot web page on IPhone? - iphone

I have been working on a web site that i want to work on any device. It works great on all my devices except my work IPhone. Is there any kind of console or other trick I can use to troubleshoot why it is not working? Something like chrome and firefox ctrl+shift+j would be nice.

In Chrome Dev Tools you can emulate a multitude of devices with differing resolutions and other limitations: Sitepoint blog regarding emulation

you can attempt to use emulation using most any browser F12 or Inspect or the multitude of online ones (google it)
In chrome on PC hit f12 then Ctrl-shift-M

Related

how to debug html rendering issue on Apple mail client

We are facing few HTML/CSS issues on rendering our HTML email on Apple mail client on iPhones
Is there a way one can inspect and debug the issue?
Does Apple provide any emulator/tool to do the same?
What worked for us is Epiphany browser. It mimicked the restricted ability of Apple mail client to render HTML far more closely than any of the solutions below -
google chrome, firefox, safari in responsive design mode
Someone suggested to try emulator in XCode but I couldn't get hold of Apple mail in Xcode -> Window -> Devices and Simulators
You can download an emulator in xcode and visually inspect most Apple devices in emulation.
A simple approach is to use Google Chrome. The engine powering Chrome is based on Webkit, which is the same html engine that powers Safari and IOS and iPadOS devices. The Inspector can allow you to inspect a variety of devices in emulation.
You can do much of this with Apple Safari as well.
A third approach is go post your code, define the problem and let people see if they can determine a fix.
Good luck.

GearVR WebVR Samsung Browser - viewing JS console output

I'm trying to view the JavaScript console output of a WebVR scene, that's being loaded in the Samsung GearVR browser. If it was in the Chrome browser I could use some form of remote debugging, but with the Samsung browser that wouldn't work.
I looked around the web, but nothing mentioned the particular Samsung Browser WebVR debugging situation.
Does anyone have any ideas or links?
I appreciate your help :)
Actually, chrome remote debugging works on Samsung Internet for GearVR. Just connect adb through wifi (GearVR USB won't work, it's charging only), open chrome://inspect in the desktop chrome and when the headset is active, the page should be visible on the list. All active webkit instances are on that list, not only Chrome. For example you can also sniff gmail app html views.
For this to work, you have to have the headset's screen active - it's hard to have it on your head while debugging so I suggest you use some paper sticky tape to cover the sensor that is between the lenses.

Making Chrome web app standalone desktop program

Google announced that they drop support for web apps in Chrome.
Basically, web app is a local HTML/CSS/JS app that runs in a separated custom "standalone" Chrome window.
Is there any way (preferably easy), to convert this web app to a real desktop app that not depend on Chrome in anyway? Using maybe NodeJS? If yes what is the right way to do it?
Thanks.
You could try one of these tools:
https://applicationize.me/
https://www.bzgapps.com/coherence
https://fluidapp.com/ (for Mac only)
Don't know about "easy", but it seems to me that the natural evolution is to Electron or NW.js, and both of these are mentioned in the Google blog article on this subject. (I'm moving to Electron.) Both have advantages over Chrome Apps, mostly that they are true desktop applications. To cite one example, you can now manipulate the menu bar, something out-of-bounds for Chrome Apps.
Pure JavaScript code in your Chrome App, such as anything to access the internet, should move over directly. Same for much UI stuff, as you're still using a browser window for the UI. The app will, however, have to be restructured.
Added Note: Chrome Apps ran on 4 platforms: MacOS, Windows, Linux, ChromeOS. Electron and NW.js apps won't run on ChromeOS. So, the ability to write a four-platform completely binary-portable app is going away.

Can I debug Desktop Safari with Chrome Devtools?

Safari's Web Inspector is absolutely awful, and it keeps crashing on me. One of my colleagues suggested using Chrome Devtools to inspect Safari pages via Remote Debugging. I haven't found anything on Google for how to do such a thing--is that possible?
Safari and Chrome use different debugging protocols (initially these were very similar, but over time they grew into separate things). Thankfully, there is a Google project that does the translation between these protocols - iOS WebKit Debug Proxy. It doesn't mention desktop Safari though.

Chrome emulator for iPhone?

I have a mobile site which I developed in ASP.NET and I was wondering if anyone knows of any tools to test this on Chrome in an iPhone / iPad environment? This site has been functioning properly for awhile in every other browser on every other device, however there seem to be issues with it in this browser only on the iPhone / iPad. I just don't know how / if I can debug it somehow. Any help is appreciated. Thanks!
You may find Adobe Shadow a helpful tool in this case: http://labs.adobe.com/technologies/shadow/
Watch the demonstration here, you'll see that you can debug your code like you would using the chrome dev tools itself.