Are there any means of debugging JS code, or at least get errors, on Android devices?
This helps:
http://www.nanaze.com/2009/01/debugging-javascript-on-android.html
There are Firebug like methods (e.g. console.debug, console.info) that will log to logcat, so you can snoop there.
In my testing I'm getting logs to W/browser, not D/WebCore, but the info is being logged there.
Error messages should show up in the log with the WebCore tag.
Answered previously.
As it says http://www.technomancy.org/android/javascript-debugging/ you use can use console.log(...) to log messages, and then install a log viewer to view the logs if you filter based on browser (at least on Android 2.2)
Related
FF25.0, Fedora 18.
This just keeps going round in circles. The staging extension installs, and parts of it are active as the extension modifies a bit of the dom (I think even the background script is running too as the local storage is initialized). Not all of the extension works, such as the sidebar and other dom injection that should run on page load. But the debug mode page in crossrider fails to recognise the running extension.
I suspect this is due to a bug in my code but there appears to be no way to debug it. When I commented out the sidebar, it still showed briefly after another install, which makes me suspect a proxy/cache is getting in the way but adding an extra GET argument on the extension URL didn't help. I've tried adding debugger to extension.js. The console is empty. No errors are reported by firebug. The extension works fine in chrome, and I really don't want to go back to a blank extension and try adding bit by bit till it fails. There must be a simpler way such as making firefox just say, "here's your problem, right on line number X". Any ideas?
[EDIT]
After turning on some debug options, I've got errors in the console, but clicking on the offending file/line number just opens the "Source of:..." window. In google chrome I get the file in the debugger, can hit break points, refresh and catch the error as it happens. Better yet, how about a "break-on-exceptions" option that both works but also actually works.
[EDIT]
I finally got the Browser Debugger working. The first error is a NS_ERROR_XPC_BAD_OP_ON_WN_PROTO.
Well, to start actually getting messages you need to set some flags in "about:config" listed here: Setting_up_extension_development_environment
I'll copy a few...
javascript.options.showInConsole = true (this was already on for me)
browser.dom.window.dump.enabled = true
javascript.options.strict = true (there's also a debug version I turned on too)
devtools.chrome.enabled = true (nothing to do with google chrome)
devtools.debugger.remote-enabled = true (the important one, allowing Firefox->Web Developer->Browser Debugger, make sure to allow the remote debugger otherwise it undoes the config change)
devtools.errorconsole.enabled = true
extensions.logging.enabled = true
It looks like quite a few options have been removed too. This has at least got me started.
[EDIT]
This answer also mentions the "Web Developer->Browser Debugger" (which is currently blank - "no sources" - I have no idea) and "Web Developer->Browser Console" windows (just seems to have the same output as the in-window console).
Throw a giant try/catch around ALL your extension code. At least this allows the crossrider "staging" extension to install and be recognised.
Print the exception (I assume all the stupid about:config stuff has to be set for this to work)
appAPI.ready(function($) {
try {
...rest of extension code
}
catch (e)
{
console.log("#################", e);
}
}
Locate the error in the console, and click on the [object exception]. Note the line number (it won't be correct as other code is injected). Also note we've managed to print an exception and firefox failed to break on it. FFFFFFFFFFFFFFFFFFFF
Add some newlines approximately in the middle of the code.
Reload. Note the line number. If it's changed the error is after the newlines. If not the error is before.
Repeat from step 4 until the error is found.
Take a moment to reflect on the stupidity of this process. (this isn't exactly a comment directed at crossrider, more at the severe lack of simple web development tools and APIs currently available)
So I need to check some results in a Firefox add-on I'm working on, however the console.log() does not work. I've tried simply putting,console.log("Hello World"); in the main.js file and loading it, but it doesn't log anything.
By default the minimum log level is error. Everything else is not printed, and that includes console.log(). Please see the Log Levels for more information on how to use and configure logging and associated levels.
If you are working on an extension/addon (not SDK), simply import the Console.jsm and then the console.log() will work normally. That is what I do.
Components.utils.import('resource://gre/modules/devtools/Console.jsm');
Update: As of Firefox 44+
Components.utils.import('resource://gre/modules/Console.jsm');
You can use Firebug for your firefox extension development. If you install this add-on, you can use its console with "Firebug.Console.log();" command. Please be careful, in this command you should not type "Console" with a small letter!
In addition, you can use Firefox "Browser Console" (not Web Console) by the following command:
Application.console.log();
Using the Addon SDK? You must set the Log level for your extension:
var self = require("sdk/self");
var prefService = require("sdk/preferences/service");
prefService.set('extensions.'+ self.id +'.sdk.console.logLevel','all');
This question already has answers here:
Suppress Chrome 'Failed to load resource' messages in console
(3 answers)
Closed 5 years ago.
The Chrome Developer Tools console logs an error each time a page asset (including an image) isn't found (i.e. returns 404).
In my work, I'm often working on sites where images are provided by third parties and may not be available during development. Having each missing image show up as an error in the console makes other more important errors (e.g. JavaScript errors) harder to notice.
Is there a setting that stops the console logging unfound images as errors?
Or is there some way to filter console messages by the same sort of criteria that you can filter requests by in the Network tab?
(See e.g. http://chromium.googlecode.com/issues/attachment?aid=1337330000000&name=Screenshot-Google%2B+-+Google+Chrome.png&token=1F05er8uKjAQEEBrUITFjsIGJ2A%3A1358867878658&inline=1)
Work has "started" on this by the Chromium team: https://code.google.com/p/chromium/issues/detail?id=96212
Update: The feature request was closed on March 18, 2013. I'm not sure in which version of Chrome this feature first appeared, but I can confirm console filtering options in my Chrome v33.0.1750.152 (Linux).
Update 2: Currently, when a filter (plain text or regular expression) is entered, it is tested against the message text (e.g. GET http://example.com/foobar 404 (Not Found)) as well as the text of the right side link (e.g. test.html:65). (I have filed an issue with Chromium to track this.)
As a workaround, use a regular expression filter like:
^(?!.* 404 \(Not Found\))(?!.*[file name])
where [file name] is the file name from the right side link.
For example, if my page is test.html, then ^(?!.* 404 \(Not Found\))(?!.*test\.html) will work.
Note: This will also filter out messages that have the file name in the message text. I'm not sure there is a way around this for now.
Update (2019-06-05): This expression will filter out 404s in my current version of Chrome (75.0.3770.80):
-/404\s\(Not\sFound\)$/
It seems the filtering first splits the filter string by whitespace before processing each token, but it will also split spaces inside of a regular expression, so the \s's are necessary.
Technically, this will filter out any message ending with the (case insensitive) string "404 (Not Found)", including console.log messages.
In the chrome developer tools, it's under the "Console" tab. Click "Filter" and it will be on the filter line as a checkbox.
As an alternative answer you could run a bit of javascript to alter the src attribute of the offending images when on your dev server (just make sure you don't publish it to your production environment!).
If you don't want to actually add javascript to the page (understandably) you could probably run the script on load of the page via a chrome plugin (perhaps the greasemonkey chrome clone - tampermonkey).
n.b. Thanks for the feedback, notably for this to work it'll need to be within an event after the dom is ready and before the images load.
In your app, in your 'catch' statement.. log the exception under 'console.warn' .. know it works with firebug. In Firebug, you can then find these 'errors' under the 'warnings' tab. I would like to think the same can be true for Chrome Developer Tools..
actually did something similar day ago.. my app would stop on some error, so, I instead used the 'try' and 'catch' block. My catch looks like:
catch (e) {
console.warn(e);
}
I am facing this weird problem. The WebApp I'm debugging right now, is invoking the javascript console.log/console.log/error/debug/etc., the Firebug console however, doesn't print them at all.
This application uses Dojo/Dijit toolkit. Not sure if there is anything special about it
It doesn't appear to be a problem with the Browser, I tried another simple web-page with a console.debug call, and the message appears on the console as expected.
Please advise about what should I look for. I have also tried Chrome/IE.
Thanks in Advance/
console is not write protected, it can be replaced with anything. You could try
alert(console.log.toString());
to find out what console.log really is
Edit:
A better method would be
var originalConsole = console;
// now include your library
// ...
originalConsole.log(console.log);
In Firebug, clicking on the function takes you directly to its definition.
did you try window.console.log()? Maybe you are not in window scope
In case like this do not forget to check if "Logging" is enabled or active at your console of browser.
Just to update this question -:
Ensure that firebug is Enabled - - > On for all Web Pages.
Reload the application.
Then in the firebug panel - - > Console - - > All.
All the console.log messages will appear.
I am developing the application in HTML which is calling the console.log() from Javascript to provide me logs during the development about what happens in the web page code.
Unfortunately when I use the adb logcat command to check logs I can see output from all other applications, but not the output from my JavaScript code. I can see even the log from web browser that the page is loaded, but not console.log() output from my JavaScript code executed in the web browser.
According to information on this page (http://developer.android.com/guide/webapps/debugging.html) it should work.
I am testing on HTC WildFire and HTC Desire HD.
Edited after more then 6 months
After some time and experience with different devices (phones, TVs, set top boxes, WebViews, UIWebViews...) my advice is to do the remote logging from JavaScript and not relying on the console.log() or other methods - see the nice trick with the image loading here.
Do not miss the presentation here
Hope this helps!
STeN
In the default browser on Android 2.3.3 (and presumably from then on) you can simply use the built in javascript console:
open the browser
go to your webpage
type about:debug in the address bar and hit enter
you'll see a section for debug options appear if you go into the browser app's settings
tick "Show JavaScript Console" if not already enabled
refresh your webpage
At the top, you'll see a bar labeled "JavaScript Console".
I have been using three different HTC phones, almost exclusively, and have never had this issue. Here are a few things to check:
Make sure USB debugging is enabled.
Make sure your Webview has a WebChromeClient set. The browser used in Webview does not implement console.log().
It should be easy to see the output of adb logcat, but to make it easier, filter the output.
Turn on USB debugging:
Disconnect your device from your computer.
Go to Settings -> Applications -> Development -> Select "Enable USB Debugging"
Plugin to computer. (Make sure you have the correct drivers installed to use ADB - more info here: http://developer.android.com/guide/developing/device.html)
Set a WebChromeClient that overrides onConsoleMessage():
//Set the output prefix so you can filter adb logcat results later
public static final String TAG = "Your-Application-Name";
myWebView = (WebView) findViewById(R.id.webview);
//Not going to have much luck running JS without this:
myWebView.getSettings().setJavaScriptEnabled(true);
//Override onConsoleMessage() to output to the Log.
myWebView.setWebChromeClient(new WebChromeClient() {
#Override
public boolean onConsoleMessage(ConsoleMessage cm) {
Log.d(TAG, cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId() );
return true;
}
});
More info on onConsoleMessage() here: http://developer.android.com/reference/android/webkit/WebChromeClient.html#onConsoleMessage(java.lang.String, int, java.lang.String)
More info on debugging in general here: http://developer.android.com/guide/webapps/debugging.html
Filter the output of adb logcat:
adb logcat tag-name:log-level *:S
tag-name matches the string specified in Log.x
log-level matches the log level you indicated when calling Log.x <---
Example relating to code above:
adb logcat Your-Application-Name:D *:S
This will show all d level logs for the matching tag, Your-Application-Name, and silence everything else.
More info on adb filtering here:
http://developer.android.com/guide/developing/tools/adb.html#logcat
Hope it helps! I know it was a bit of summarizing of the other answers, but, the fact is, it takes all of the steps to make it work. :)
I had the same problem, I solve it by doing the following:
1/ when you initialize your webview, add a javascript bridge class:
appView.addJavascriptInterface(new JSBridge(), "JSBridge");
2/ create the class JSBridge with a log function
class JSBridge {
public void log(String msg){
Log.d(msg);
}
}
3/ in your javascript you can now call
JSBridge.log("my log message");
Might be a bit overkill for your problem, but you can also do a LOT more with that solution
Logcat generates a lot of stuff on devices in addition to yours so you may have to filter this.
You can try to "grep" your log output if you've tagged it.
For example: acording to your article the output should look like:
Console: Hello World http://www.example.com/hello.html :82
If you use the command (assuming you are using a Linux, Mac OS or anything else with a grep command)
adb logcat | grep -i "console"
it will reduce the output to the keyword specified within these quotation marks. If you add a unique tag to your output you can also filter this so you get only things you want to see.
[ctrl]+c
will stop this logcat process.
See this: How to display console.log() output in PhoneGap app using Eclipse and HTC Desire HD?
It seems that console.log is disabled
on HTC devices running Android 2.2.
You can get around it by using remote debugging in jsconsole.com.
Try the following:
1) Open the devices tab and make sure that the device you have connected is selected/highlighted.
2) Make sure USB Debugging is enabled on your device. Here is what you need to do for this:
2a) From the Home screen, press MENU, and then tap Settings > Applications > Development.
2b) Make sure the USB debugging check box is selected.