I have a website that uses (except for other things) AngularJS. This website works perfectly fine on (example):
Google Chrome
IE
Firefox
iOS
Android
However I am having problems with Windows 10 mobile as one of the features is not working correctly (to be more precise it is $interval).
When testing my app on one of the browsers I view website via Web Inspector and go to background code to inspect where exactly the app fails. However I have no idea how to fix the problems that occur on mobile devices - such as Windows 10 Mobile?
How can one debug websites on a mobile device?
Windows 10 Mobile has Edge Browser. Try debugging it in that.
This is might be helpful.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
for the debugging tool you can use
https://msdn.microsoft.com/library/dn255001(v=vs.85).aspx
Related
So, I'm building responsive pages using the Chrome dev tools iOS emulator, only to find that there's a 5% difference when you check it out on an actual phone.
All my css is normalized and has the latest vendor prefixes, so I'm stuck with guessing what's going wrong with that last 5%.
Surely there is a way to see the CSS output on a mobile device? Dev-tools for mobile. Surely!
On Android phones, Chrome does support Remote Debugging over USB
Since you're in iOS, though, you are able to use Safari's remote debugging feature to try to debug the page. Chrome for iOS uses Apple's UIWebView to render pages, so debugging in iOS Safari should give you the same results you're seeing in iOS Chrome.
Safari's remote debugging feature can be used by going to Settings > Safari > Advanced on your device, connecting the device to the computer via USB, then in Safari on your Mac, go to Develop > [Device] > [website] to debug.
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
I've implemented bootstrap-wysihtml5 editor in one of my website. It works fine everywhere on desktop, iPad and on iphone, but doesn't display at all on Android device. I checked using Chrome browser.
Can anyone please let me know whats wrong there.
Update: On checking 'bootstrap-wysihtml5' from its default website http://www.w3masters.nl/bootstrap-wysihtml5/, found its also not working on Android device (checked on chrome and other android browsers).
The development of WysiHTML5 went on to another website. Maybe the newest version will fix your problem.
GitHub
I am testing our web app for various mobile devices. In this case, I’m running a Blackberry simulator that simulates a Blackberry Bold 9900 running Blackberry OS 7. There is nothing out of the ordinary in my pages. The first page is not particularly special, it is Html, jquery, and jquerymobile. However, the Blackberry simulator's browser shows my page like a 1970s color TV that needs its rabbit ears adjusted.
I don't have access to a real blackberry at the moment, but I've been told that our pages don't show this distortion on real hardware.
Are there any workarounds to get the simulator to better reflect that real hardware?
Is there something in my Html that is messing up the presentation on the simulator? If I don't use jquerymobile, it looks fine (for whatever that is worth).
I tried the same experiment with the jquerymobile demo site.
http://jquerymobile.com/demos/1.3.0/docs/intro/ - shows the same colorful mess as my app. See captured image below. http://forum.jquery.com/topic/jquery-mobile-demo-page-causes-blackberry-7-1-simulator-browser-to-crash has an interesting comment from a Blackberry employee:
The page does load, but not without some very major rendering
artifacts (there appears to be a colourful static/noise overlay on top
of the content.)
The simulator came from the Blackberry site.
--- Update
Blackberry device simulators can be downloaded from http://us.blackberry.com/sites/developers/resources/simulators.html
You can download simulators for a specific device and OS version. It seems that some of the simulators are buggy and don’t support jQueryMobile. However, I’ve found that the Blackberry 9790 for Blackberry OS 7 works well so far. This is 7.0.0.592 (9790).
I tracked this problem down to CSS, and more specifically the following tags:
-webkit-perspective:
-webkit-transform:
when commenting these out everything was fine.
Update: It seems like upgrading the graphics driver may solve this problem (it didn't work for me):
http://supportforums.blackberry.com/t5/Testing-and-Deployment/Blackberry-7-emulators-bug/td-p/1409051
This seems to be an error with the program itself, not your HTML. If your code works fine on the real thing but not on the simulator, then it's probably the simulator.
This question already has answers here:
How to debug web sites on mobile devices?
(16 answers)
Closed 7 years ago.
Is HTML, CSS remote bugging depossible for Mobile and Tablets like Android , iPads?
For example I want to use firebug on Ipad website, but from my desktop and firebug changes should be seen in iPad.
my question is not specifically to Firebug, if I can use Safari developer tools, IE 9 developer toolbar or similar tools which can edit live css, html on pages., it would be fine.
Note:
I already know about Firebug Lite. But my question is about remote debugging.
Mobile phones and tablets doesn't have Mouse so it's inconvenient to use Firebug lite on them.
Remy Sharp has a couple of solutions, as he usually does.
Firebug Bookmarklet
http://remysharp.com/2007/03/13/firebug-in-ie-for-any-web-site/
JS Console remote debugging (jsconsole.com).
http://www.youtube.com/watch?v=DSH392Gxaho
Not on the actual device but you can get emulators for all those devices and run those emulators on your desktop.
That still doesn't allow you to run Firebug on the device but you can run Firebug in your desktop browser, fix the issues locally and then reload the page in the emulator to see if it works.
For Android, there is a mobile version of Firefox but I'm not sure if you can Firebug on it. Even if you can: The display size is very limited, so I don't think that it will be a pleasant experience.
Yes, you can on iPads - I have used Firebug Lite in the past to debug a javascript problem I was having
For remote javascript debugging, checkout the Crossfire project:
http://getfirebug.com/wiki/index.php/Crossfire
remote debug
safari and chrome both have this function.
You can use Safari's developer tool "Develop -> User Agent -> iPad / iPod / iPhone" and you can view the website on your desktop as it will look on these devices.