i'm working on PC -windows 10 and i'm looking for a software to check different screen resolutions for testing a website's responsive UI .I'm currently working with Chrome's debugger but i wonder which tools do you guys using.
You can use following techniques:
1) developer console has responsive tool.
2) resize your browser
3) host it temporarily using ngrok and open that link in your mobile browsers.
4) there are many online tools also which will help you to see responsiveness' by selecting type of device.
Related
Suppose you wanted to do web development on an Android tablet. There are some options available for code editors etc. One thing I can't get around is that Chrome for Android doesn't have dev tools. It doesn't even allow to disable the cache. Are there any other browsers that have the basic console and inspect element functionalities?
Please note that it doesn't have anything to do with remote debugging. I'm looking for a way to develop with an Android tablet only.
The only thing that comes to mind is BrowserStack, but it would be slow as hell especially on a mobile device.
Look at these features requests for both Firefox and Chrome. Sadly, nobody seems to really care, given that remote debugging solves the problem when you have a computer next to your tablet.
https://bugs.chromium.org/p/chromium/issues/detail?id=817837&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
https://bugzilla.mozilla.org/show_bug.cgi?id=1434065
In the meantime, you can :
use a service like Browserstack with the devices (ex. Galaxy S9) that offer native debugging (the devtools are on your side, communicating with the remote mobile device)
use that modified version of chromium and the accompanying hack : https://github.com/laem/chromium. Building a stable and fast version of Chrome is time and resource consuming, any help appreciated !
The best solution would obviously be to build Chromium with the devtools integrated, but I don't have enough knowledge : is it just an "if (!android) import DevTools" line to remove ? Or would it need lots of adaptations to work ? It's all HTML and JS as far as I know, so it shouldn't be that hard to get the console, debugger and inspector to work.
I'm creating a website and I've been testing in different browsers, but not android devices, because I don't normally have access. Someone looked at the site on an Android phone (using the default web browser and chrome) and one of the pages is not displaying correctly. My index page is just a full screen image, but on the Android device, the image is pushed up and the bottom half of the screen is white. I can't figure out why this would be different on an Android phone. How can I test my site to see how it would react on an Android phone?
You can download android studio from google
Since it just needs java, it should work on OSX also. In the studio you would be able to lauch different emulated devices, fully connected to the network.
The download is huge and the setup is relatively easy. And it's flexible, when it comes to the different android versions, devices and screen sizes.
Download Android Studio and use the emulator
Or Genymotion is another emulator you could use. I have not used it myself, but it is probably the most popular emulator out side of the official one in android studio.
I always have issue with the CSS styling in the default Android browser while building my responsive website. What I usually do was doing trials and errors on pc until the problem was solved.
There is a tool for chrome browser:
https://developer.chrome.com/devtools/docs/remote-debugging
but chrome usually display fine for me just that I need a debugging tool for the default Android browser. Is there any solution for this?
I'm not aware of any way to test on the old android browser using remote debugging, as new devices nowadays (Anything post 4.0) have chrome installed by default on Android.
One method you can use to help with testing responsive/mobile sites is using Chrome's mobile emulation tool
Either select a device on that list, or fake out the user agent with something from this page http://www.useragentstring.com/pages/Android%20Webkit%20Browser/
We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).
I'm working on a javascript framework that generates webkit browser pages which emulate a native app for Android & iPhone.
I'm using an iPhone emulator (iBBPhone -- very nice) to see how my pages would look on the iPhone and iPad. I was curious if there was something besides the Android SDK phone emulator that would simulate the Android browsing experience. I'm using desktop Google Chrome right now as a "pretend Android" browser but I'm not sure how alike they really are.
The Android emulator that ships with the SDK is a bit too slow to fire up on my box to be of great use in what I'm doing (even when starting up a saved image), and I was curious if there was anything else out there that simulates Android browsing. Thanks!
I think this Firefox plugin will let you display the site as it would show up in several different types of browsers. I know it supports iPhone so I imagine it will do Android as well. This page also talks about some other Firefox plug-ins that may be useful to you.
Chrome has a nice add-on named Ripple that does the job nicely I've found. http://ripple.tinyhippos.com/
These guys pretend to meet this need. Might be a good idea to check it out.
http://www.browserstack.com/mobile-browser-emulator