Is there any way to simulate the “IOS add to home screen” function in windows with Google Chrome for debugging ?
I want to debug PWAs (progressive web applications) with a browser like Google Chrome.
For example at this link or this link , this two site have a PWA and need to be added to home screen to be shown or debugging.
The only way I can think of so you can do that is if you have a Mac with the XCode iPhone simulator.
Not all PWAs (progressive web applications) are the same, for the second link you can simply use “toggle visibility” option on inspect element sources and use the app, but I doubt you can do that for the first one.
Is there any method to open website (PWA) urls in the installed PWA in iOS- Safari?
Use case: I'm sending email links to login in my PWA, how can I make this url's open directly with the installed PWA instead of the browser?
If you are using Chrome in Android or any of the desktop OS, that would be the default behavior.
Check on "Android intent filter" in this link.
This feature is not supported in iOS yet for PWA apps(created using Safari- the only option for iOS as of June-2018).See "What PWAs can do on Android and not on iOS" section last point.
For iOS, there is actually a very unknown way which you can install a .mobileconfig profile which installs a web clip (or multiple web clips if you like).
This will run your website in fullscreen and is very similar to how iOS PWAs work. You can also link to it online or send it as an Email attachment for your users to install.
Just make sure you add this for the webpage to open fullscreen:
<key>FullScreen</key>
<true/>
You can read more about creating your own from scratch here:
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html
or if you have a Mac you can get the "Apple Configurator 2" App:
https://apps.apple.com/us/app/apple-configurator-2/id1037126344
or you can take the easy route and use a generator here if you don't have a Mac:
https://webclip.glitch.me/
It is possible to open PWA if already installed in desktop?
I have installed the PWA applicaiton now I want to trigger the open with prompt from chrome engine
I'm using Wikitude Studio, and I have exported my project as an Offline App. On my project, I have several buttons that when tapped, it would open the links with the in-app browser. The in-app browser isn't the best as it limits downloading a file. I need help with the following:
How do I allow the in-app browser to download the file? Specifically, a .vcf
How do I make the buttons open the links in the default browser (say, Safari or Chrome) instead of the in-app broswer?
Any guidance will be very helpful.
Thanks!
You can force the Wikitude SDK to use the default browser by modifying the downloaded Wikitude Studio project.
To do this, follow these steps:
* Open converter.js
* search for 'openInBrowser'. You will see that this function is only called with one parameter, the url to open
* add a second bool parameter, 'true'. This forces the default OS browser to open instead of the in-app browser.
I want to test my website on Safari on my iPad. I only have another PC. Is there a way for me to do remote debugging like ADB (Android Debug Bridge) with mobile Chrome? I searched on StackOverflow, seems there is an Adobe Edge Inspect CC, but I don't know if this is a good choice.
Thanks!
Update October 2019
This solution doesn't work for IOS 12+ (resource 1, resource 2).
Updated and tested on 24/6/2017
Using Chrome on Windows 8 and more recent:
Download and install Node
Download and install ITunes and connect it to your Device. (A pop-up should shows to your iPad to get authorization)
. Be sure to allow web inspector in your iPad
Download and install the remote webkit adapter
Using Powershell (As administrator):
npm install remotedebug-ios-webkit-adapter -g
Execute the adapter:
Using Powershell (as administrator):
remotedebug_ios_webkit_adapter --port=9000
You should get a similar output:
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000
remotedebug-ios-webkit-adapter is listening on port 9000
iosAdapter.getTargets
...
Open Chrome and go to the following link:
chrome://inspect/#devices
Click on configure next to "Discover network targets" and add the following:
localhost:9000
Make sure to have the web page you want debug open on safari, you should see it on chrome inspector page under Remote Target
Extra step for iOS 11 Thanks to #skaurus
See monkeythedev's answer for the easiest way to debug on a Windows 8+ machine with iOS 9+. I updated my blog post using information from that answer and other sources and also recorded a screenshare. The method below should still work for iOS 8 and down, if needed.
There is actually a pretty easy way to debug a website in Safari on iOS using Firefox on a Windows machine.
NOTE: Ryan wrote in the comments below that this may only work on iOS 8 and down. I am unable to confirm, but be aware.
I wrote a detailed blog post about this, but here are the highlights:
Install iTunes to get the "Apple Mobile Device Support" and "Apple Application Support" applications that come with it. (uninstall iTunes afterward, if you want)
Connect your iOS device via USB.
Enable web inspector on iOS (available on iOS 6 and later).
Open Safari on your iOS device and browse to a website.
Open Firefox on your Windows machine and press Shift + F8 to open WebIDE, which should include the necessary Valance add-on, if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).
For some reason, I couldn't get it to connect to my iOS device until I downloaded the ios-webkit-debug-proxy-win32 program and ran it. It opens a blank Command Prompt, but after I went back to WebIDE after opening it, I disconnected, then reconnected, and I saw debug info for the website I had opened in Safari. You may not need to do this though, as another user just had to add an exception to their firewall then disconnect/reconnect, and it worked.
The debug info available isn't as exhaustive as Chrome Developer Tools (specifically no "Networking" tab), but it was enough for me to be able to view what was going on in the Console.
2018 Update:
Since the original post, the blog post is dead & Telerik App Builder is discontinued and no longer offered. Adding this update to inform readers in case they don't read the user comments that follow this answer post. As for the blog post, for those still interested, here's a web cached copy. Regarding the blog, I think the company that blog's from has since shut down.
When I get a chance, I'll see if I have a copy of the app builder saved so that I can post it online for those still interested in using it, along with another cached copy of the blog post maybe.
Original Answer
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
MIH Tool - basic edition
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
This question was more than 4 years ago, but I feel like it's worth to mention another option which is platform-independent which seems is not mentioned above:
VConsole
It's a JavaScript that you can inject into your page(s) which will overwrite all native console output and show it as an overlay on top of your page content, in a level of detail that is almost as good as Google Chrome's Developer Tools.
Runs well on iOS Safari, as well as on other mobile browsers - for as long as JavaScript is enabled in the browser.
How to install: https://www.npmjs.com/package/vconsole
You will need NPM tools to install it, but not actually required to use NPM to build your project. You can simply install VConsole somewhere in a separate folder, and just copy-paste vconsole.min.js from it.
Once you inject it into your page, will look like this:
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visually is very appealing, you will see green button in lower-right corner of your page on your mobile/desktop browser, which will open console overlay.
Very neat!
Of course, it does not provide you with ability to select an element, see calculated css etc., but if you are looking for console output and some network report, this one is really easy to use.
October 2019
AFAIK, For recent IOS versions there is no overall solution for debugging IOS from a PC.
You can however use one of the following solutions:
Display console messages in the browser itself. As described here and in Sinisa's answer.
The "remotedebug-ios-webkit-adapter" doesn't work for debugging IOS 12+. It requires extra steps for IOS 11, and works for IOS 10 and perhaps older versions as well.
I use PrePros for CSS preprocessing and it has a built in server for mobile debugging and web inspector. But this is only good for local sites even still...
In my experience it is often not an issue with mobile Safari only but Safari in general. In these cases it can help to try the normal Safari (for Windows) and see if the bugs appear there. If so, it's much easier to debug something by this way.
2021 update:
The creator of RemoteDebug here. I've built a replacement for RemoteDebug called Inspect, which packages everything together in a pleasant experience and enables easy iOS web debugging from Windows, macOS, and Linux, with a few extra features like screencasting and wifi debugging.
http://inspect.dev
There are a couple of options I've come across for debugging on iOS. They're not full step-through debuggers, but they offer a JS error log, console and some inspection tools:
1. Eruda
By adding the following snippet to the top of your page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
You get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Available at https://github.com/liriliri/eruda
2. MiniConsole
This one I developed myself when I had not discovered another suitable option. It has less features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
3. vConsole
Another similar option that I've not really tried. Available at https://www.npmjs.com/package/vconsole with a live demo at http://wechatfe.github.io/vconsole/demo.html.
I haven't tried this on a PC, but you should be able to go to http://[DEVICE_IP_ADDRESS]:9999 to debug.
I have created the app with forge, and have added in the chrome extension, but when i run with chrome, always show the following errors:
Currently it is not possible to launch a Chrome extension via this interface.
The required steps are:
1) Go to chrome:extensions in the Chrome browser
2) Make sure "developer mode" is on (top right corner)')
3) Use "Load unpacked extension" and browse to D:\mobile-app\test/development/chrome
but I really done with above steps, I don't know what happen.
and I want to know how can I use difference Android sdk and resolution simulator with testing?
thanks!
Chrome doesn't a way for us to automatically install browser extensions. Therefore, you have to install your extension manually.
To do that, in Chrome (see image below):
type chrome:extensions in the address bar
turn on developer mode
click Load unpacked extension
If you have a separate question about Android SDKs, probably best to ask that in a different thread, or contact support#trigger.io.
I had the same issue, using:
forge run chrome
to try to run the app in the Chrome web browser. I thought the 3 steps given were to install an extension which would then allow forge run chrome to launch the web application. I couldn't understand why, after installing the extension (with no button defined of course), nothing seemed to change. I didn't realise a Chrome extension version of my app, appearing on the toolbar, was even possible!
I should have used:
forge run web
to launch the app in the (default) browser.