I am developing an app with Ionic (1 !) and using ionic serve to test it on Chrome. I'd like to display the iPhone's status bar (battery, time and connection) on Chrome dev tools device mode.
Any knows if Chrome can do this?
I don't think there is a way inside of chrome dev tools. I've tried to find a good solution for a while, it is in their own words only 'for a first approximation'.
You can though, create the device with your specifications, HERE's a more complete list of available devices, where you can also shorten the length to get the size without the space of the status bar (yeah, not useful for the latest gen).
To better QA on mobile devices, maybe try something like Blisk, BrowserStack, Slant...
Or if it's for a screenshot, try something free like responsinator.
gl
Related
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
I have not launched the website yet. All the mobile testing websites I have found on the internet are asking for my URL. Is there any way to test a website that has not been launched yet?
You can use Chrome's responsive mode:
Go to DevTools (Ctrl+Shift+I)
Click the phone/tablet icon in topbar (2nd from the left) or Ctrl+Shift+M
Then you can resize website or select sample device from menu.
You can check it on more number of mobile simulators with chrome Device Toolbar that is inside Developer Tools. it looks great with many inbuild mobile device simulators. (That is second left mobile like icon on the inspect element).
Once you click on the icon you can switch through devices using the top device selector. You can even change width and height of the device and zoom it accordingly
You could try multiple extensions from chrome web store such as
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?utm_source=chrome-ntp-icon if you are using chrome. Type "responsive" in search and you will get various extensions. You can also do ctrl+shift+m.
If using firefox you can do Ctrl+shift+m and you can view your website in responsive mode.
Also you can try resizing the browser as a third alternative.
If you are using Chrome then go through this. For Interner Explorer try this method.
My suggestion is to use Google Chrome and then inspect by right clicking on your webpage. Click on Responsive icon in the menu bar (shown in attached image) and adjust screen size.
You need to write MEDIA QUERIES for making your page responsive for different screen sizes.
use ngrok. It will expose the local/dev servers using their services. This command line tool will give you a resolvable url.
To use
$ ngrok http 80
will expose the web server running on port 80.
ngrok by #inconshreveable
(Ctrl+C to quit)
Session Status online
Version 2.2.4
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://dbg6f82d.ngrok.io -> localhost:80
Forwarding https://dbf8f82d.ngrok.io -> localhost:80
This will be accessible across the internet.
I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?
So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.
Update: 🙁 Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.
Original answer
You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:
However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.
To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.
See: Test Responsive and Device-specific Viewports
I've got a little problem with my website and ipad/iphones. A certain tag in my css causes problems and I'm unable to check if I've solved the problem. Is there a way to look at my website as if on an ipad while not actually buying an ipad. Is there something like an ipad emulator or something?
You can use web (free) services that provide such functionality. There is a lot of them. For example: http://ipadpeek.com/ or http://mobiletest.me/.
There is also a simple solution that doesn't require any further app installation.
If you're running google Chrome you can enter the developer tools by hitting F12 on a PC and Command+option+I on a Mac.
In the developer tools you have on the top left corner of the screen a mobile device emulator, which you can choose various different models of mobile devices from. not just iPad and iPhone.
Note that you have to refresh the page each time you change a device emulator. Otherwise it won't load with all the characteristics of the current emulation.
I am using the following test setup (Latest meaning as of July 14th 2012):
Core i7 with an ATI FirePro V9800 (Eyefinity)
Windows 7 Pro 64 Bit (latest updates / patches)
Latest Catalyst drivers
Latest Google Chrome Stable / Canary.
6 x 1080p displays (in a row) resulting in a 11520px by 1080px desktop.
I have tried the following to get a fullscreen web view across displays:
Set the maximize to whole desktop setting in the Catalyst control panel. That works for maximizing normal windows (except Chrome), but not for anything fullscreen.
Tried Chrome Kiosk mode (that would be ideal), same problem, only fills up primary display.
Using Chrome Fullscreen or HTML5 fullscreen API results in the same: Fullscreen on a single of the 6 monitors.
IE9 seems to have a limitation of about 10000px for the webview, thus i cannot even stretch it across the entire desktop manually (that works with Chrome).
Tried UltraMon.
Tried a number of Chrome command line switches (http://peter.sh/experiments/chromium-command-line-switches/) for kiosk mode, start in fullscreen etc., so right now using the --app="http://127.0.0.1/index.html" switch to at least get rid of most of Chrome's UI elements.
Tried to find an extension for Chrome, but no success.
Tried Chrome Frame in IE9, also only uses one display.
I understand it is most probably a driver issue reporting the wrong desktop size to Chrome (which I thought was the point of the Catalyst Maximize to full desktop size function). Chrome does not seem to get the desktop size from the same place as other "normal" windows do (obviously not very familiar with Windows windowing).
I would like to work on a full-screen Chrome webview across multiple monitors or a completely chromeless window that I can manually maximize. My browser configuration is flexible, even the OS is somewhat flexible.
I would like to know:
Has anyone gotten a fullscreen browser view across more than 1 monitor to work with Chrome (or any browser)?
Are there any tools that can fake the right (full) display size to Chrome?
Could this be workable in Windows 8?
Is there something that just displays a Chromeless Chrome browser that runs the very latest Chrome? (I have seen awesomium, but find that its price is too high for what I want it to do). Also I want to be able to use the most recent Chrome releases ideally.
Any comments welcome and sorry for the lengthy details.
Thanks for reading!
-Tobi
This worked for me using two monitors:
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain1.com" --window-position=0,0 --kiosk --user-data-dir=c:/monitor1
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain2.com" --window-position=1680,0 --kiosk --user-data-dir=c:/monitor2
I think the order of the parameters is relevant.