I have a webview that works fine on iOS, but not Android. Is there a tool where I can connect to Android webview in browser and debug it using firefox or webkit console?
Currently I have no idea what is causing the webview not to work in Android.
In iOS I am able to open my iPad or iPhone simulator, open the webview pane, and in my desktop browser I listen to port 9999, and it shows me the tools you see in webkit developer tool/debugging tools.
I am looking for similar tool for Android, or at least to get me started on debugging.
The easiest way to debug WebView is to connect your Android device to PC by USB and inspect your WebView by Chrome dev tools.
So, you will need:
1) Activate USB debugging on our devise. You can find it Settings >> Developer Options >> Debugging >> USB Debugging (activate checkbox)
2) Connect you devise to Computer by USB
Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers' site.
3) Open Chrome browser and type in the URL field: chrome://inspect/#devices
4) Confirm that 'Discover USB devices' activated
5) On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.
6) On the chrome://inspect page displays every connected device. Click inspect for connected device and you will get console.
More detailed manual is Debugging Android WebView
Check out weinre. It provides Chrome developer-like tools for debugging from WebKit browsers to browsers running on remote devices.
Those are the steps i use to debug a WebView content in a device:
Enabled Developer Mode in your device
Plug the device in the PC and enable USB debugging (install driver if needed)
Add this line in your custom Application class or in the Activity where the webview is loaded
//if your build is in debug mode, enable webviews inspection
WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
Open Chrome and go to chrome://inspect and you should see your device in the Remote Target list
Start debugging of your app from Android Studio
When a WebView will be added to the layout, in the tab you opened will appear a screenshot with a Inspect button, click there and a Chrome developer console will open
If you are not using Android 4.4, according to http://developer.android.com/guide/webapps/debugging.html you're going to enjoy the old-school way of debugging ...
If you don't have a device running Android 4.4 or higher, you can
debug your JavaScript using the console JavaScript APIs and view the
output messages to logcat.
For Android 4.4 and better, you'll enjoy remote debugging, see https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews
Starting Android 4.4 (KitKat), you can use the DevTools to debug the
contents of Android WebViews inside native Android applications.
I have worked with a webview using javascript in my previous project and i encountered the same issue.
I have not found a way to directly debug my code, but i used a javascriptinterface to send information to my activity. This way you can log the activities of your javascript or show some Toast messages.
When your java methods aren't called, it generally means you have made some sort of error in your JS code.
I know this is no high tech solution to your issue, but it is something at least, and it worked for me.
Good luck,
Wottah
Try to acces to ADB Logcat of the device by installing adb on your desktop...
Related
I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.
How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?
Update: Remote Debugging
Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging for more information.
Update: JavaScript Console
You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.
Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.
Original Answer
You can use the built in console JavaScript object to print log messages that you can review with adb logcat.
console.error('1');
console.info('2');
console.log('3');
console.warn('4')
Produces this output:
D/WebCore ( 165): Console: 1 line: 0 source: http://...
D/WebCore ( 165): Console: 2 line: 0 source: http://...
D/WebCore ( 165): Console: 3 line: 0 source: http://...
D/WebCore ( 165): Console: 4 line: 0 source: http://...
Determining the version of WebKit
If you type javascript:alert(navigator.userAgent) in the location bar you’ll see the WebKit version listed e.g.
In Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2
On Android Emulator
Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
N.B.
Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.
Try:
open the page that you want to debug
while on that page, in the address bar of a stock Android browser, type:
about:debug
(Note nothing happens, but some new options have been enabled.)
Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?
Edit:
What also helps to retrieve more information like line number is to add this code to your script:
window.onerror = function (message, url, lineNo){
console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
return true;
}
The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.
I use Weinre, part of Apache Cordova.
With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.
However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.
(I don't know much about JConsole but it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)
Take a look at jsHybugger. It will allow you to remotely debug your js code for:
Android hybrid apps (webview, phonegap, worklight)
Web pages which runs in the default android browser (not Chrome, it supports the ADB extension without this tool)
How this works (more details and alternatives on the projects site, this was what I found to be the best way).
Install the jsHybugger APK on your device
Enable USB debugging on you device.
Plug the Android device into your desktop computer via USB
Run the app on the Android device ('jsHybugger')
Enter the target URL and page in the app. Press Start Service and finally Open Browser
You'll be presented with a list of installed browsers, choose one.
The browser launches.
Back on your desktop computer open Chrome to chrome://inspect/
An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
debug away!
Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.
FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.
Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:
Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
Open "Internet"
Navigate to 'about:debug' (you will see an error)
MORE menu > Settings > Debug > Remote Debugging
Attach phone to computer with USB cable
On the phone, in the Internet web browser, open the site you want to debug
Open Chrome on computer
Navigate to 'chrome://inspect'
Click inspect on the browser tab you want to inspect
The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.
Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...
Enable USB debugging on the device, maybe you also need to connect once via adb devices to trigger the "allow communication with..." dialogue on the mobile device,
connect the Android device to the PC,
start Chrome on both, and
then navigate to chrome://inspect/#devices on the PC.
Here, the tabs from the mobile phone Chrome are listed and can be inspected.
There's also a detailled manual on the net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome
(found that after adb logcat showed nothing from the browser)
Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:
http://code.google.com/p/canvg/
That's how we got around this issue for rendering SVG icons in the default Android browser.
Put into address line chrome://about. You will see links to all possible dev pages.
The about:debug (or chrome:\\debug both of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab
If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en This will let you view all logcat activity.
In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.
chromium [INFO:CONSOLE(3)] "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)
You can try YConsole a js embedded console. It is lightweight and simple to use.
Catch logs and errors.
Object editor.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
When running the Android emulator, open your Google Chrome browser, and in the 'address field', enter:
chrome://inspect/#devices
You'll see a list of your remote targets. Find your target, and click on the 'inspect' link.
My solution is (for the stock browser):
Stock Browser
"consolo.log" into the JS source code
Debug USB enabled
Android SDK
From Android SDK : monitor.bat
Monitor filter as the attached image
No one mentioned liriliri/eruda which adds its own debugging tools meant for mobile websites/apps
Adding this to your page:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
Will add a floating icon to your page which opens the console.
"Kiwi browser" has the same tools as the desktop chrome browser and can debug locally in android - no usb needed.
Load the html file and choose "developer tools" in the menu. If you need to restart the debugging, reload the html.
Android studio provide all you need to see console.log and other. In logcat just filter to "/Web Console" and you will see your js logs...
If you get any issue you can add this plugin :
https://github.com/apache/cordova-plugin-console
If you are looking for non remote options:
On earlier and non rooted Jellybean releases a logcat viewer can be used if android.permission.READL_LOGS is granted via adb once.
On firefox, there is a console addon that reads and shows all app logs and there is also firebug lite.
You can try "javascript-compiler-deva" from npm library by running "npm install javascript-compiler-deva" command and then running the compiler.is using "node compiler.js".
It creates a server at port 8888. You can then hit "http://localhost:8888" and enter your JavaScript code and can see the result of any JavaScript code including "console.log" in phone browser itself.
It is also hosted in "https://javascript-compiler-deva.herokuapp.com/"
The local debugging/about:config... options seem not to work in 2020+ chrome/ff/.. browsers anymore.
Another browser with non-remote js console is
DevBrowser
or
WebInspector
(file picker not working)
You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.
try "vconsole", maybe help you
Is there any way for me to get and read cookies from my Android Chrome browser?
Thank you.
You can view cookies in Chrome on Android if you connect your Android device to a PC/Mac/laptop via USB. No rooting required. The laptop needs to have Chrome installed. You can then inspect the content on your Android device in Chrome on your laptop by visiting chrome://inspect/#devices
There's a little more to it than that, you need to enable developer mode on your Android device:
Settings -> About Phone -> Build number. Tap build number 7 times.
Then under Settings you will see a new item - "Developer Options".
Within Developer Options enable USB debugging.
If you don't see your connected device listed on your laptop Chrome URL: chrome://inspect/#devices then you might need to install a USB driver. Or disconnect and reconnect device after installing USB driver.
Details here - https://developer.chrome.com/devtools/docs/remote-debugging
Once you can inspect content you can get cookies from the network tab in the same way as you would in Chrome on your laptop.
Note : This doesn't work in inCognitoMode
Follow these steps
1: Go the web page that you want the cookies from.
2: In the URL type the following:
javascript:alert(document.cookie);
Then press ENTER
Just type, DO not PASTE!
Without an external PC and a cable, but on a rooted device, it is possible to access the cookies database by a tool like SQLight Editor by opening this file:
/data/data/com.android.chrome/app_chrome/Default/Cookies
You could try using the the net-export page chrome://net-export/ . I guess that should work, or at least you can use it to make a .json file, viewing it's contents however, I don't know how to do that
We can use the inspect element/mobile device emulator in Chrome to add/edit CSS on live sites and see how the site behaves. Is it possible to do the same directly on an android phone or tablet, somehow?
I have been asked to improve a site (but I don't have server access) but have noticed that its navigation behaves differently in the Chrome emulator and on my Android devices. (It might be a javascript that interferes or does something on the phone that is not picked up in the emulator)
If you're running a modern version of Chrome, you can use the Remote Debugging feature for Android devices. This require:
Chrome 32 or later installed on your development machine.
A USB cable to connect your Android device.
For browser debugging: Android 4.0+ and Chrome for Android.
For app debugging: Android 4.4+ and a WebView configured for debugging.
The full details are documented at the linked page from Google's documentation, but the process essentially consists of connecting the device to your computer, enabling ADB debugging, and navigating to chrome://inspect in Chrome on the computer. From there, you'll be able to use the inspector on the Desktop Chrome instance to debug into your pages within the mobile Chrome instance.
I need to debug CSS for some site running on the device under Android (in the common REPL mode). As I know it is possible to connect the device with the desktop via USB cable to do that. But the problem is I have no such a device (with Android). I have the Android emulator (Andy) but it seems that chrome installed on it has no dev tools at all.
So is it possible to solve the problem without physical Android device?
UPD==================
Once again:
The point is I have no any Android device. I have an emulator for it only (Andy Android emulator).
Navigate to chrome://inspect/#devices on your chrome browser.
From there, you should see a list of attached devices (including emulators, not sure about Andy), but if it is possible, that's where you would find it.
Adding to Josh's answer, I've had to:
Navigate to chrome://inspect/#devices on my machine.
Open Chrome in Andy.
List devices with adb devices.
Andy finally shows up in Chrome's devices list.
In this context, "phone" is your emulator.
First you must enable debugging on your phone:
Settings > About Phone > Build number > Tap it 7 times to become developer;
then:
Settings > Developer Options > USB Debugging.
Then navigate to chrome://inspect/#devices. You should find the open tab on your phone there.
I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.
How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?
Update: Remote Debugging
Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging for more information.
Update: JavaScript Console
You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.
Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.
Original Answer
You can use the built in console JavaScript object to print log messages that you can review with adb logcat.
console.error('1');
console.info('2');
console.log('3');
console.warn('4')
Produces this output:
D/WebCore ( 165): Console: 1 line: 0 source: http://...
D/WebCore ( 165): Console: 2 line: 0 source: http://...
D/WebCore ( 165): Console: 3 line: 0 source: http://...
D/WebCore ( 165): Console: 4 line: 0 source: http://...
Determining the version of WebKit
If you type javascript:alert(navigator.userAgent) in the location bar you’ll see the WebKit version listed e.g.
In Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2
On Android Emulator
Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
N.B.
Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.
Try:
open the page that you want to debug
while on that page, in the address bar of a stock Android browser, type:
about:debug
(Note nothing happens, but some new options have been enabled.)
Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?
Edit:
What also helps to retrieve more information like line number is to add this code to your script:
window.onerror = function (message, url, lineNo){
console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
return true;
}
The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.
I use Weinre, part of Apache Cordova.
With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.
However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.
(I don't know much about JConsole but it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)
Take a look at jsHybugger. It will allow you to remotely debug your js code for:
Android hybrid apps (webview, phonegap, worklight)
Web pages which runs in the default android browser (not Chrome, it supports the ADB extension without this tool)
How this works (more details and alternatives on the projects site, this was what I found to be the best way).
Install the jsHybugger APK on your device
Enable USB debugging on you device.
Plug the Android device into your desktop computer via USB
Run the app on the Android device ('jsHybugger')
Enter the target URL and page in the app. Press Start Service and finally Open Browser
You'll be presented with a list of installed browsers, choose one.
The browser launches.
Back on your desktop computer open Chrome to chrome://inspect/
An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
debug away!
Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.
FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.
Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:
Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
Open "Internet"
Navigate to 'about:debug' (you will see an error)
MORE menu > Settings > Debug > Remote Debugging
Attach phone to computer with USB cable
On the phone, in the Internet web browser, open the site you want to debug
Open Chrome on computer
Navigate to 'chrome://inspect'
Click inspect on the browser tab you want to inspect
The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.
Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...
Enable USB debugging on the device, maybe you also need to connect once via adb devices to trigger the "allow communication with..." dialogue on the mobile device,
connect the Android device to the PC,
start Chrome on both, and
then navigate to chrome://inspect/#devices on the PC.
Here, the tabs from the mobile phone Chrome are listed and can be inspected.
There's also a detailled manual on the net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome
(found that after adb logcat showed nothing from the browser)
Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:
http://code.google.com/p/canvg/
That's how we got around this issue for rendering SVG icons in the default Android browser.
Put into address line chrome://about. You will see links to all possible dev pages.
The about:debug (or chrome:\\debug both of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab
If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en This will let you view all logcat activity.
In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.
chromium [INFO:CONSOLE(3)] "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)
You can try YConsole a js embedded console. It is lightweight and simple to use.
Catch logs and errors.
Object editor.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
When running the Android emulator, open your Google Chrome browser, and in the 'address field', enter:
chrome://inspect/#devices
You'll see a list of your remote targets. Find your target, and click on the 'inspect' link.
My solution is (for the stock browser):
Stock Browser
"consolo.log" into the JS source code
Debug USB enabled
Android SDK
From Android SDK : monitor.bat
Monitor filter as the attached image
No one mentioned liriliri/eruda which adds its own debugging tools meant for mobile websites/apps
Adding this to your page:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
Will add a floating icon to your page which opens the console.
"Kiwi browser" has the same tools as the desktop chrome browser and can debug locally in android - no usb needed.
Load the html file and choose "developer tools" in the menu. If you need to restart the debugging, reload the html.
Android studio provide all you need to see console.log and other. In logcat just filter to "/Web Console" and you will see your js logs...
If you get any issue you can add this plugin :
https://github.com/apache/cordova-plugin-console
If you are looking for non remote options:
On earlier and non rooted Jellybean releases a logcat viewer can be used if android.permission.READL_LOGS is granted via adb once.
On firefox, there is a console addon that reads and shows all app logs and there is also firebug lite.
You can try "javascript-compiler-deva" from npm library by running "npm install javascript-compiler-deva" command and then running the compiler.is using "node compiler.js".
It creates a server at port 8888. You can then hit "http://localhost:8888" and enter your JavaScript code and can see the result of any JavaScript code including "console.log" in phone browser itself.
It is also hosted in "https://javascript-compiler-deva.herokuapp.com/"
The local debugging/about:config... options seem not to work in 2020+ chrome/ff/.. browsers anymore.
Another browser with non-remote js console is
DevBrowser
or
WebInspector
(file picker not working)
You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.
try "vconsole", maybe help you