I have a simple app, created using PhoneGap [Build]. Signed up for a developer account and got the app actually signed & installed in a test iPhone I borrowed. The app works perfectly on Android, and testing it in a browser. However on an iPhone, it hangs at the 'intro' screen.
Apparently, to debug it I'd need a Mac, specifically Safari v6+ [dev tools], which isn't available for windows.
I just simply need a way to see the console / errors for what is going on. I have been searching and trying different methods for 3 days now, and have hit a dead end.
Figured I'd add what I ended up doing for anyone else searching for this down the road...
The easiest way to do this was to install MacOS on VMWare. This video was particularly helpful (https://www.youtube.com/watch?v=3b04Da1WjBc).
Then, under the USB controller in VMWare make sure to select USB 2.0 & 'Show all'. Then all you should have to do is enable Safari Developer Tools under preferences on your VM, plug in your phone, and you're good to go. Was 10 times easier than every other description I found on the web.
Edit: Also, do not allow the OS to update, that will kill it.
Related
Sorry for the question.
I'm current creating Phaser games for mobile using web browsers.
I can remote debugging on my android device using Google Chrome Browser of my android device also similar to Mozilla Firefox Browser and check if any error in javascript/html/css using the desktop developer tools of the browser.
Here is what i follow to use remote debugging for chrome
https://developer.chrome.com/devtools/docs/remote-debugging
Here for Mozilla Firefox
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android
Already installed Android SDK
I'm currently developing on windows platform.
Using XAMPP
But i want to test now my app on the native browser of android phones gives me hard time to do it. and don't have any idea on how to do it.
If anyone has done it before.. Kindly please share knowledge on how you to do it and make it easy and comfortable for yourself to remote debugging native android browser.
thanks in advance
Ok, this will only work if you have a local version of the website deployed... and your phone must be connected to the same network.
For reference, I used this website: http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/
First, you'll need to install NodeJS as weinre is a NodeJS app.
After you install Node, you can use NPM to install weinre.
npm install -g weinre
Then you start weinre server on your local machine
weinre --boundHost -all-
Then paste the following code in your webpage that you want to debug. Change your_private_ip to the private IP of your local server. It probably starts with 192.168.x.x.
<script src="http://your_private_ip:8080/target/target-script-min.js#anonymous"></script>
Now on your desktop, go to http://localhost:8080/client/#anonymous to see a WebKit-style web inspector.
You should see something like this:
Now you can use the other tabs like the Console to view the javascript console, or the elements to look at their styling, etc... just like on chrome or firefox.
I don't know if you still need help, but for those who are having this trouble can try this, it worked for me:
Do the exact same thing like you were to debug from google chrome, in the "chrome://inspect/#devices" tab look for this: WebView in com.android.browser (Version/4.0 Chrome/30.0.0.0) (in my case, i'm using a huawei p7)see image
Sorry for my english
I need to find out if it's possible and if so, what is the API for that.
The required scenario:
connect to a wifi network.
from an android app or using javascript from a webpage find out the make and model of devices that are connected to the same router.
I found a way to find the IP addresses, and I saw that Find app can see the manufacturers, but can't tell if it's a mobile device, a tablet, a laptop or a printer.
I thought that a possible way would be to use jmDNS (which I can't get my android project to compile with), and service discovery, but I'm not sure that it will tell me if the device is a tablet or a smartphone.
For Android I can also think of the linux build number to search against a device list compatible with that build. However, I'm not sure about Apple devices.
Is there a way to do that or am I wasting my time?
If there is, will it work in Android or with JS?
Thanks.
I am currently working on a HTML/JS application that will be embedded in an iOS and an Android app. Because the android app is not yet finished I am testing this on the chrome browser in Android. I fixed all issues there but when I open the same web app in the native browser nothing really works as expected.
So my question is : Is there a way to debug in a native browser on an android device?
In chrome this was pretty easy with remote debugging.
(Please do not advice me to use 'log' statements for debugging because that's not what I am looking for here)
And just to spill my guts : the Samsung Tablet's native browser is the only device that's causing me a headache!
Typing about:debug in the address bar of the native browser will toggle the 'Debug' options in the settings menu.
The 'Show JavaScript Console' option will allow you to see JavaScript errors in your webpage.
NB I believe the JavaScript Console will only be displayed if there is an error.
HTH
Nick.
The new Samsung Internet browser (I think you meant this browser with "Samsung Tablet's native browser") is now based on the Chromium browser and thus supports its remote debugging interface.
Enable USB debugging on your device as described here.
Then connect your device via USB (Oh, surprise!).
Visit chrome://inspect on your computers Google Chrome browser and you will be guided to create the connection:
Then you just have to click on the devices inspect link and an developer tools window will pop up.
More info like why there is an Samsung Internet Browser at all can be found here.
You can easily debug your web application with Web Inspector Remote (weinre).
Look at this post in order to find out how to install and use weinre.
I hope it will help you if this question is still actual.
If you have updated your device you can go to settings -> Debug -> 'Remote Debug Enable'
Once enabled you can debug the native browser just like you can debug chrome.
You can try vorlon solution too, it has a nice web interface & very easy to install
& It's free
But if you can't see clear console errors with volron, you probably want to use #Nick's solution, sometimes complex errors prevents even vorlon or weiner from catching them. So once you fix blocking these issues, probably volron will start catching them properly
How do I enable the debug view like I can in Safari on iOS? I simply need to see if a Xoom that I'm testing a page on is generating javascript errors. I was trying to find how to enable the dev tools in the Android browser like I do for iOS but can't seem to locate it.
I've worked on an Android app in the past where the java developer set it to alert JavaScript errors - caught an extra bug that we didn't catch in the iOS version because of it. So, if you have access to the java layer, I'd check that out. I asked him what he did specifically and he said:
"There's a callback from the WebView class that lets me know when the JS code throws an error. I implemented that callback to display an android dialog."
There's two solutions other ideas on top of this that I use for debugging (ios/android). These are especially useful for embedded web views in games where you don't have access to the built-in console:
1) Weinre a still beta, but functional, remote debugger. It'll give you a faux inspector on your desktop that you can query / see errors on your remote device with. Has a whole dom inspector and anything. The guy that develops it is pretty responsive, too.
2) I write a javascript log function that hits my servers error log. Just tail your log file and you're good to go. My javascript function looks something like this:
function hlog(){
var s = Array.prototype.slice.apply(arguments).join('ΒΆ');
document.createElement('img').src = 'http://yourdevbox/debugger/?m=' + encodeURIComponent(s);
}
That way I can take any number of arguments.
My php page that recieves this request looks like this:
# ensure this can't be used in production
if (strpos($GLOBALS['HTTP_HOST'], 'devboxhostname') < 0) die(':(');
error_log($_GET['m']);
Hopefully in the future, mobile devs will have way better debugging tools.
Android doesn't (currently) have a WebInspector like Chrome/Chromium does.
You can still look at any console.log() messages fired under window.console in logcat.
Source: http://developer.android.com/guide/webapps/debugging.html
Also, whilst Firefox 4 is available for Android, Firebug currently isn't supported on the mobile version of the browser.
type about:debug into the url field and validate, a javascript console will then be available (same method to remove it)
a bit more on this page: https://android.stackexchange.com/questions/5999/android-browsers-aboutdebug-what-do-those-settings-do
The best you can do is use console.log() (like firebug), and then install a log viewer on your phone, filter based on browser, and you can see all the console messages. (source)
Try
Weinre: Web Inspector Remote / Watch demo
"Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone. "
You may have a look some other remote debugging tools: jsconsole or
Aardwolf
Opera mobile has remote debugging:
http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/
The Android default doesn't seem to have a debugger, although you can debug on chrome/chromium on a pc, which uses the same webkit rendering. (There's even a emulate Android option, but it doesn't have all the quirks of Android tablets, image/memory constraints etc.)
Firebug Lite is also a possibility:
http://getfirebug.com/firebuglite
You don't have to install any software or try to debug in your tiny mobile screen.
First enable USB debugging in your device in the "Developer settings" and then use your desktop chrome to connect and debug the mobile browser.
I found the easiest way is to enabled USB debugging on the phone/tablet and in your desktop navigate chrome to
chrome://inspect/#devices
Enable discover usb devices and then on the list of apps click "Inspect"
Voila! Remote debugging! Now you can debug your phone from the comfort of your desktop
I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck