I'm in the process of creating an Android test farm system, and while at it, I'm trying to find a way to inject javascript in an already open tab in the default browser.
I'm trying with
adb shell am start -a android.intent.action.VIEW -d "javascript:alert('Hello world!');" -n com.android.browser/com.android.browser.BrowserActivity
and while it works, it opens in a new tab.
Is there any way to do it in the current tab?
If you're cool with using Chrome, which is the default browser for newer versions of Android, you can use Chrome's remote debugging.
Once you've enabled this on the device (enable usb debugging + web debugging), you can connect by executing:
adb forward tcp:9222 localabstract:chrome_devtools_remote
If you hit localhost:9222 from your browser, you'll see the chrome dev tools for each one of your tabs. From here, you can do anything you could usually do in the desktop chrome inspector, including executing JavaScript from the console.
If this is not automated enough, you can write an app that uses a WebView, configure it to handle an intent where you provide arbitrary JavaScript, and use webview.loadUrl(js) to execute it.
Related
An AngularJS application works fine on desktop, but is not rendering properly on mobile (actual code is showing). This is on an Android phone.
I would like to see what errors are showing in the console.
Is it possible to open JS console on chrome app on mobile (like it is on desktop)?
You can do it using remote debugging, here is official documentation. Basic process:
Connect your android device
Select your device: More tools > Inspect devices* from dev tools on pc/mac.
Authorize on your mobile.
Happy debugging!!
* This is now "Remote devices".
When you don't have a PC on hand, you could use Eruda, which is devtools for mobile browsers https://github.com/liriliri/eruda
It is provided as embeddable javascript and also a bookmarklet (pasting bookmarklet in chrome removes the javascript: prefix, so you have to type it yourself)
To use remote debugging first activate developer mode in Android.
In Android go to Settings, search build number, then click on it several times to activate developer mode
In Android go to Settings > Developer Options > Enable usb debugging
Connect to computer with usb cable
In desktop Chrome type chrome://inspect , then press enter
In mobile open url then check it, on this page on desktop chrome://inspect/#devices
The original answer doesn't seem to be valid anymore. From the current Chrome developer docs, these are the basic steps you need to go through:
Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
Select Enable USB Debugging.
On your development machine, open Chrome.
Go to chrome://inspect#devices.
Make sure that the Discover USB devices checkbox is enabled.
After that, open Chrome on your Android device (and confirm the USB Debugging prompt in case it pops up). Switch back to your PC and you should see the currently open browser tabs:
If your device tabs do not appear, you might need to trigger the USB Debugging prompt by activating file transfer on your mobile device.
Kiwi Browser is mobile Chromium and allows installing extensions. Install Kiwi and then install "Mini JS console" Chrome extension(just search in Google and install from Chrome extensions website, uBlock also works ;). It will become available in Kiwi menu at the bottom and will show the console output for the current page.
Edit 2022:
It's even better now. The console is built-in and available in the menu.
Please do yourself a favor and just hit the easy button:
download Web Inspector (Open Source) from the Play store.
A CAVEAT: ATTOW, console output does not accept rest params! I.e. if you have something like this:
console.log('one', 'two', 'three');
you will only see
one
logged to the console. You'll need to manually wrap the params in an Array and join, like so:
console.log([ 'one', 'two', 'three' ].join(' '));
to see the expected output.
But the app is open source! A patch may be imminent! The patcher could even be you!
I you only want to see what was printed in the console you could simple add the "printed" part somewhere in your HTML so it will appear in on the webpage. You could do it for yourself, but there is a javascript file that does this for you. You can read about it here:
http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
The code is available from Github; you can download it and paste it into a javascipt file and add it in to your HTML
The Kiwi browser not only allows you to use Chrome dev tools but you can also view the page at the same time.
If you use Android split screen you can open a window and move the dev tools to a new window.
Use Kiwi Browser app
Allows you to install all chrome extensions as well as access dev tools (console, ...)
Or
to access and test all the consoles of different mobile browsers, you can use the following similar websites:
https://www.browserstack.com/
Remotely debugging Firefox is another option. the steps are mentioned here
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
I have an iPad with iOS 6.1 connected to a windows 8 machine. I would like to be able to debug some javascript code running on the iPad.
The safari on iPad has a web inspect option that needs the iPad to be connected by wire to computer and then can be accessed in Safari for desktop's develop menu. I installed Safari 5 for Windows but don't see the iPad detected in the develop menu.
Any other ideas ?
The Firefox Tools Adaptor allows one to use Firefox DevTools for Safari on iOS.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
For remote debuggin I use Weinre.
Weinre has almost everything you need, but lacks a JavaScript debugger.
It has a WebInspector for DOM manipulations, network traffic, timeline, resources and a console.
Checkout this project on GitHub: weinre-remote-debug to setup weinre locally.
Another option described on this page is jsconsole.com. By appending a <script> tag to your page (or running a bookmarklet on your device) you get access to a JS console.
To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.
Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!
It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.
Source: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
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 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.