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.
Related
I am trying to debug remote Chrome, the device could be connected, and inspect the tab starts fine.
But in the window of remote debug, everything is a mess. the GUI is terrible, which makes the functionality totally unusable, see picture below:
resize this window or change the resolution is not working.
some times tabs like elements, source, networks could presents, but under the source tab, there is search bar keep presents and covers all area of the codes area.
this is totally not working.
OS: Win7.
PC Chrome version: 63.0.3239.108 (Official Build) (64-bit)
I don't think this should related to Mobile Chrome or android version.
Is there any possible reason for this?
I think Chrome is a widely using browser this can't be a formal released bug for Chrome, right?
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
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 am building a website which detects the target browser whether it is mobile or pc browser. Based on the content it choose theme.
What I want to ask is. Is there any mobile browser which I can download in my pc to test my site instead of on phone many times?
You could change the user agent to an user agent from a mobile browser. Extension on Chrome
You don't need any extensions, you can just change the User Agent manually on Chrome's Developer tools, just click on the settings Icon and then refresh the page (as you can see this page's look changes):
This is what I use normally. It is not exactly what you are looking for I think but its worth the money!
Stick with webkit browsers for mobile testing, sans Windows Phone. Don't overlook the Android SDK's emulator and, if you're on a Mac, the iOS simulator, as you may come across rendering issues that don't exist in-browser.
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.