I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.
Related
in this piece of HTML code
PARTECIPA
the opening of the website in the Microsoft Edge browser is indicated if installed on the device.
Can anyone help me? I would like the site to open in Google Chrome and not in Edge.
How should I edit this HTML?
To open the link using the Chrome browser instead of Microsoft Edge, you can change the value of href attribute like this: PARTECIPA. Assuming that Chrome browser is installed, that should open the Chrome browser.
Problem:
If Edge is not installed on the device (mob, desk or tab) it doesn't
work
In this case, it's best to simply use a standard URL without specifying a specific browser, like this. PARTECIPA. In addition, the "googlechrome:" protocol is not a standardized protocol and probably may not work in all devices. So, you can use a standardized URL like the code snippet I posted above and let the users device choose.
Do you know if instead of chrome I can specify "default browser"
Example PARTECIPA or
something similar?
There is no standard protocol for specifying the default browser. So, best approach is to simply use a standard URL without specifying a specific browser. But if you really want to use special web protocols inside hypertext links to force web pages or files to open with particular browsers on Windows or iOS, place browser-name before the hypertext reference link.
Check this:
Open in Google Chrome
Open in Microsoft Edge
Open in Mozilla Firefox
Open in Apple Safari
Open in Opera
This function does not work!
A similar example is for IOS, which works in the following way
Example :
PARTECIPA
Google has official documentation on the Chrome iOS app’s URI scheme on its developer website.
Simply replace http with googlechrome and https with googlechromes. This means:
http://www.google.com/ becomes googlechrome://www.google.com/
https://apple.stackexchange.com/ becomes googlechromes://apple.stackexchange.com/
Previously, it supported an x-callback-url of googlechrome-x-callback://. This allowed the calling app to indicate its name and URI scheme to Chrome, which would show a back button in the address bar that closes the tab and invokes the specified URI. This feature was removed a few years ago when iOS 9 added the “Back to …” button in the status bar (but the URI scheme still works).
I'm teaching a Year7 class via Zoom on writing HTML, and I have one student on an iPad (the rest are on desktops/laptops), and they're not able to get their webpage to open in Safari (I'm using Chrome on Windows, which of course is simply a matter of double-clicking on the file). I'm trying to see what she sees, but I think Zoom is possibly not showing me the pop-up dialogues. She is using Notes to write the page (which looked to be the closest iOS equivalent to Notepad).
I Googled and sent her a few blogs, but still not working. I said she needs to click on Share and look for something like "copy path to file" or "copy link", and then paste that into the Safari address bar. She said when she did that Safari was showing the source code, not the rendered page. When she just taps the file it opens in Notes, not Safari. That made me suspect her file was actually index.html.txt (she tells me she has extensions switched on), but when I sent her my own file, which is definitely only index.html, she says the same thing is happenning.
Is anyone able to give me some definite step-by-step instructions (this is for a Year 7 student) on how to open their local HTML page in Safari?
thanks,
Donald.
Safari iPad no longer supports access to local or iCloud files. A number of iPadOS apps will however allow a user to view, edit, and test html code in files stored in local iPad, iCloud, or third party (e.g. Google or Dropbox) storage folders. One needs only to search in the App Store for “html editor” to see the list. Some of the apps have features that rival or exceed those found in tools on desktop (laptop) systems.
I had the same issue today on ios15.
There is a free app called Koder available on the App Store which will let you edit and view the HTML file. I’m no expert but the editor looks pretty fully featured at first glance.
Sorry to say but an iPad is obviously not the best place for simple HTML editing. At least not with the default apps available on iOS.
Given an existing HTML File one can use Files app to navigate to it and open it with double click. This will open the file in a very simple viewer wich is at least able to render the HTML. As a developer i bet its using WKWebView which is basically Safari's HTML View.
Turns out Microsoft Edge, unlike Safari, can still open local html files. Discovered in this answer. To wit:
Install Microsoft Edge from the App Store
Open Files (or whatever file browsing app you like).
Open the file, then tap the Share button to send to another app.
Scroll across to "More...", choose Edge, and voila!
Chrome mobile shows "Articles for you" formally known as "Chrome Content Suggestions" on the new tab page chrome://newtab (screenshot below).
I would really like to have these suggestions also on my desktop New Tab Page (NTP), I know they are loathed, but I actually find them very useful (look at those suggestions in the screenshot!).
My hope was that using the Developer Tools > Useragent spoofer to set the useragent to Pixel 2XL would be sufficient, but it does not appear to be the case (I have tested this on Linux and on Windows desktops).
The "snippets" appear to be downloaded (on mobile) using fetch.py, tried running this but it gives the following error.
FileNotFoundError: [Errno 2] No such file or directory: '../../../google_apis/internal/google_chrome_api_keys.h'
Which indeed does not exist (the internal directory doesn't in fact).
Is there any way to fix this?
I love this feature on my ipad. If you make this https://news.google.com/foryou your homepage on Desktop Chrome I believe you get the same results.
Go to https://news.google.com and select "For you" from left side panel. You need to already login to Chrome with Google ID.
I've got site that is correctly displayed on desktop version but has few bugs on iPad. What's the simplest way to detect problems if my OS is Windows?
Option 1 - Free, local machine debugging
You may use Safari browser for Windows (download Safari 5.1.7).
Steps
Enabling Develop menu in menu bar (Press 'Alt' key to open menu bar. Then follow to Edit menu > Preferences > Advanced tab. Find this option at the bottom.)
Then, follow through Develop menu > User Agent. Select iPad, iPhone etc.
There are more options in the Develop menu (e.g. Show Web Inspector) to help with your JavaScript etc debugging.
Credits to How to debug iPhone and iPad web applications, using Safari.
Option 2 - Paid, browser-based access to target browser/OS/machine
I've personally used http://www.browserstack.com/ and it lets you test the functionality on a wide combination. However debugging may not be as convenient here as it would be on a local machine.
There may be more companies providing similar services.
Beware of basic online emulators
As mentioned in a comment, be wary of 'emulator' websites. Example: A website I ran into claimed to emulate iPhone, with a picture of iPhone, and inside it was an iframe, being dutifully rendered by the browser I opened that website in (Firefox).
The best way I can think of(depending of your implementation) is to use the firefox plugin
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
It allows you to switch to all sort of devices and see how they would appear on another device.
Here http://www.ampercent.com/test-website-design-iphone-ipad-mobile-devices/7075/ is a quick guide on getting you started.
There are also user-agent switchers for other browsers than FF like Chrome. Do a google search and try for yourself which one you like.
Can I create a plugin or an extension for Google Chrome MOBILE (Android Google Chrome)?
If not, can I create an extension for Google Chrome (desktop), which will add a button in Google Chrome bar. This button will open the page in another web browser (in my own web browser), so, this button should launch my own web browser.
Extensions are not supported, see: https://developers.google.com/chrome/mobile/docs/faq .
Specifically:
Does Chrome for Android now support the embedded WebView for a hybrid native/web app?
A Chrome-based WebView is included in Android 4.4 (KitKat) and later. See the WebView overview for details.
Does Chrome for Android support apps and extensions?
Chrome apps and extensions are currently not supported on Chrome for
Android. We have no plans to announce at this time.
Can I write and deploy web apps on Chrome for Android?
Though Chrome apps are not currently supported, we would love to see great interactive web sites accessible by URL.
You can use bookmarklets (javascript code in a bookmark) - this also means they sync across devices.
I have loads - I prefix the name with zzz, so they are eazy to type in to the address bar and show in drop down predictions.
To get them to operate on a page you need to go to the page and then in the address bar type the bookmarklet name - this will cause the bookmarklet to execute in the context of the page.
edit
Just to highlight - for this to work, the bookmarklet name must be typed into the address bar while the page you want to operate in is being displayed - if you go off to select the bookmarklet in some other way the page context gets lost, and the bookmarklet operates on a new empty page.
I use
zzzpocket - send to pocket.
zzztwitter tweet this page
zzzmail email this page
zzzpressthis send this page to wordpress
zzztrello send this page to trello
and more...
and it works in chrome whatever platform I am currently logged on to.
Some extensions like blocksite use the accessibility service API to deploy extension like features to Chrome on Android. Might be worth a look through the play store. Otherwise, Firefox is your best bet, though many extensions don't work on mobile for some reason.
https://play.google.com/store/apps/details?id=co.blocksite&hl=en_US
Just use a different browser.
Follow the steps given below to install Chrome extensions on your Android device.
Step 1: Open Google Play Store and download Yandex Browser. Install the browser on your phone.
Step 2: In the URL box of your new browser, open 'chrome.google.com/webstore’ by entering the same in the URL address.
Step 3: Look for the Chrome extension that you want and once you have it, tap on 'Add to Chrome.’
The added Chrome extension will now be automatically added to the Yandex browser.
I imagine that there are not many browsers supporting extension. Indeed, I have been interested in this question for the last year and I only found Dolphin supporting add-ons and other cool features announced few days ago. I want to test it soon.