I have a webpage that I want to show in a WebView embedded in a mobile application (for Android as well as iPhone). That webpage is for testing javascript scripts. The page calls a certain set of JS scripts (tests) and these tests give their output into the console (this is where I can diagnose what happened during the tests). Using console.log. Plus exceptions are shown in the console.
When the tests fail, the JS error handler will notify me about and I can show that fact on my webpage so that I can see it on the phone. But I also need to look at the JS console to understand what went wrong.
How do I access the JS console on the phone when the test result tells me it failed?
One option that I was thinking about was to output the content of the console somehow into the webpage content (DOM) so that I can look at it in the app (in the embedded webview since it would be the content of the page shown). But I don't know whether it is possible in Javascript to output the console into HTML somehow.
I do not develop the mobile application, just deliver the content that the application shows in the WebView. Therefore I would need a solution that does not depend on the application itself, just have something I can see in the WebView ideally. Something like when you debug your javascripts in Chrome, you open the DevTools window and work with it. If there was no DevTools on Chrome, would there be a way to see the contents of the console?
Sure I can use various simulators or do the test on other browsers without real phones but this is specifically for tests that fail only on the mobile and I need to find out why.
For Android:
Maybe this link should help you : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
Using the Chrome dev mode on your computer, you should be able to debug your webview
About IPhone, I don't know but Xcode or something like should help
Related
I would like to inject an external javascript code into a certain webpage in a mobile phone browser such as chrome or opera mini. On computers, we can do this directly in the console or through extensions such as Scripty. Unfortunately, phone browsers don't show consoles nor do they have extensions. Please how can I achieve this?
You can use eruda. It's a console for mobile browsers. It also has many plugins such as eruda-touches which visualizes all current touches and their positions.
Personally, I made a bookmark using chrome browser on my phone to implement this console directly in any page when i search for its name. Watch this youtube video for more details.
If you are using android, then you can use chrome inspect to access console on phone browser using a computer.
First you should connect your phone to your computer via USB and authorize it.
In Chrome on your computer open the following link chrome://inspect
There you can see opened tabs on your mobile device, and open their console.
You can use the address-bar to run javascript in that page.
(Tested in Chrome)
Like this:
Since all the codes will be in one line, make sure you use semicolons properly.
I have a simple website that loads a URL into a WebView.
The website I load then loads another external website which in one instance is generating an error. I need to see what JavaScript errors are being generated by this website.
I've tried using the Debugger but this just seems to debug the WebView itself rather than what's inside it.
Is it possible to debug/view the console for the website that is inside the WebView?
It seems the only way to do this is the connect the debugger to Safari and then you can see the console in Safari as if you were debugging a normal mobile site.
I'm currently using the "Developer mode" on the chrome://extensions page of the chromium browser, loading it by clicking on "Reload (Ctrl+R)".
I'd like to be able to make a change to my unpacked chrome extension and load it into the browser in an automated way, especially since I'm testing the extension on a virtual machine so doing all this completely headlessly would be ideal. However, I would at least like to avoid having to click every time I want to load my extension, and I'd like to be able to collect any errors produced into a file/tty.
What is the best way of doing this? Does chrome provide tools for automating extension building and testing?
Regarding the other question linked below:
It doesn't really address my problem, since I am looking for a way to get console output, stack traces and any output generated by the extension reload to be accessible via a file/stream in my OS, as opposed to being displayed in a chromium browser window. The linked answers provide a way to reload the extension programmatically, but not much else.
There are a few avenues for you to research.
You could look into enabling logging with a high verbosity. In principle, I would think there is a level that echoes console output; I'm no expert though.
You could use Native Messaging to speak to a daemon that will log things for you; the downside is that you probably can't catch errors this way.
You could take this one step further and create an extension that attaches to your target extension with Remote Debugging protocol (which provides the same info as DevTools) using the chrome.debugger API, and then log stuff with Native Messaging.
Or, you could eschew using an extension as a supervisor and just use/write an external Remote Debugging client.
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 have made a webpage that stores cookies to remember what ID a user has put in a scheme viewer. It works in desktop versions of IE, Firefox and Chrome. But when I try to visit it with Android or iPhone it doesn't work.
What I would like to know is how you see stored cookies or how you debug JavaScript/HTML/CSS. If I look at errors in desktop Firefox I get no errors for JavaScript and CSS.
I recommend you use the remote debugger built into the chrome for android app.
e.g.
Start adb with your phone connected via usb (usb debugging enabled)
Launch chrome, goto settings, developer tools, enable remote debugging.
On your pc in command prompt execute adb forward tcp:9222 localabstract:chrome_devtools_remote
Navigate to localhost:9222 from your pc for live interaction/console from your phone.
Source: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
well i believe that you can't quite view the cookies of the browser in android. are you sure you have cookies enabled? (menu>more>settings>accept cookies should be checked). or if you're using javascript to set the cookies, you'd wanna make sure javascript is also enabled.
to debug, all you can really do is get the cookies via PHP or javascript and print them on the webpage. if they're blank, you for sure know the cookies aren't there. if you wanna see if the javascript is being run at all, just put print a "hello world" to the page at the line above where you set the cookie. (same concepts for php, use an echo)
it's a little fishy that desktop works and not mobile. it could be the fact that mobile browsers aren't rendering the page correctly though this is probably not the case. i would try debugging first and see if your setcookie code is actually being called by with the mobile browsers
hope this helps!
For Android 2.2 or 2.3 you can try this:
Type about:debug in you url bar while on your page;
A javascript debug bar will be opened on top of your url bar;
Type in console.log(document.cookie) and hit evaluate > It should print the cookies
Bear in mind that the js debug bar on Android will only show once the web app logs something ( e.g. if a js error occurs or if you trigger it via console.log so you might want to trigger it inside your app to open)
For Android above 2.3 you have more debug options ;)
EDITED:
As per Zeb's answer check here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging