Remote Debugging On Android Browser - javascript

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

Related

cordova-plugin-file does not work well in browser

I am now developing an cordova app which is on platform browser. But I met a problem when using cordova-plugin-file to read a local file. My browser always get an "adding proxy for File" and a "Persistent fs quota granted" in my chrome console.
screenshot of console
I download an example from Cordova-Examples-master in github, but it comes in the same situation. So it seems like a wrong setting bug not bug in my code.
Have anyone met this problem before?
Any help is appreciated.
Cordova app should run from WebView control embedded to native mobile Cordova-based application with corresponding plugins compiled. It will not properly work in standalone web-browser, neither on PC nor mobile device.

getting log for hybrid app(ionic) on android

I am having an unexpected result with my hybrid app(ionic framework) and the problem only replicates it self when i deploy the apk on an android phone. It works perfectly in a browser.
Is there a way i can see the logs when it is running on the phone? so i can try to understand what the problem is and where its coming from.
I have tried to run the app on my phone using ionic run android -l -c. But when i do that the app works perfectly like it does on the browser. i realised it basically just plugs itself to my local server and serves it on my phone from there (i alerted the index url. as an app it shows android_assets/www/index.html but when running with the above commant it shows http://192.168.XX.XXX/#/index)
How can i see logs when installed as an apk? Please Help
PS: im a newbie at ionic/AngularJS.
Here is a life saver for you and many others.
Install the app on the device.
Make sure you have USB debugging on on the real device.
On your desktop open Chrome, and in the URL address bar type
chrome://inspect
Here you'll be able to see the list of devices that are connected and are using WebView. Click on inspect and you will be able to use Chrome Dev Tools on your running APK.

Can one debug javascript on a samsung tablet's native browser

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

Debugging javascript on Android tablets/phones?

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

Is there a way to enable the JavaScript Error/Debug Console for Safari within Android?

I'm developing a JavaScript application that needs to run on the Google Android Phone OS. Is there a way to enable the JavaScript Error/Debug console within Safari on either the Android Emulator or an actual device? If so any instructions on how to do so would be appreciated.
It looks like, with the Android 2.0.1 SDK you'll need to filter on "browser" instead of "WebCore"
A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:
adb logcat WebCore:V *:S
Not quite the same as a full debug console though.
On Android write about:debug on the address line when the current page is the page you want to debug. you will get access to the console.
I know your question is about Safari, but you might want to look into using Chrome instead. You can now use Chrome's desktop developer tools to debug and profile apps on your Android device.
Here's how:
On Android Chrome, go to settings -> Developer tools and check "Enable USB Web debugging"
On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote
Now on Desktop Chrome, navigate to localhost:9222.
You should see a list of the pages you have open on your phone. Click the one you want to debug/profile.
Detailed instructions are here
I have discovered that you can get this debugging information on the phone itself, without needingn to use adb or plug it into a computer, just download a log viewer.
Check the link for more info.
You can view the log and much more with weinre
From the Weinre docs
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.

Categories

Resources