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.
Related
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.
I am examining PWA and Web Components technologies recently. As far as I have learned now Web Components is a new suit of tech,
Custom Elements, Shadow DOM, HTML Templates and HTML imports. Together with those Web Components enabling techs Web App Manifest, Service Workers, and certain performance improvement techniques used to make what is called as Progressive Web Applications.
What I wonder is when one "Adds to Home Screen" an application in a certain web browser what is the browser that opens it when it is launched from its home screen icon? Is it the browser it has been added to home screen from, or it is the default browser of the system no matter which browser it has been added to home screen from, or it is just a generic web view available on the host operating system at the moment like the one used in native web applications?
Lastly, is it possible for a developer coding her/his app to choose one?
Currently, for me, these combinations open a new "Standalone" window
I believe Android/Chrome is the only one that installs a WebApk
All the others are just shortcuts to open your website in that browser without the normal browser navigation items
I know of no options for the developer for how the shortcut opens your PWA
Android 8.10 - Chrome 67
Android 8.10 - Chrome (beta) 68
Android 8.10 - Edge 42
Android 8.10 - Opera 43
iOS 11.4 (simulator) - Safari
As test I created app shortcut of site https://pwa.rocks from browser:
Brave
Firefox
Chrome
and found that there were 3 different shortcut created for each of the browser. Launching each shortcut resulted in opening the respective browser that created it.
I believe there is no way of changing the default browser to launch the app by coding something in the app. I could not find a way of doing that, if someone knows how to do it, I will be interested to know about it
Here is similar question: What browser will PWA (Progressive Web App) use after adding to home screen?
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.
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.
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