Enable Debugging Javascript in Visual Studio (WebView Android app Xamarin)? - javascript

I am building a Xamarin Android webview mobile app. I have gotten to a point that I need to debug some Javascript code but I cannot get the debugger to work on the razor views in Xamarin. Not a single breakpoint is hit on the client-side during debugging.
I have tried using the below code to enable debugging of my web contents in my main activity OnCreate method. Link: Android.Webkit.WebView.SetWebContentsDebuggingEnabled :
WebView.SetWebContentsDebuggingEnabled(true);
I also tried using the debugger keyword in my script to see if I could be lucky.
But none of the above seem to help the situation.
Are there any pointers on how to enable client-side debugging in Xamarin?

Related

Eclipse Neon - Javascript Console Output not showing

I'm developing a PHP project which utilizes Javascript with jquery for a number of functions (particularly authentication/api calls). The long and short of my problem is that I cannot get Javascript console logs to appear in the eclipse console. At all.
Not only this, but some of my functions work...sometimes. I'm trying to debug the cause of this, but without any form of logging occurring, it's extremely difficult.
How do I configure my Eclipse Neon PHP project to output Javascript console logs?
Edit: The project is a PHP Web Application. I'm currently running a local PHP server for the project via the php command php -S localhost:8000
The JavaScript built-in function console.log(message); logs the given message to the console in the browser window, which is accessible via the developer tools of your browser.
If you open your webapp via the built-in Eclipse browser, you do not have access to those tools, just because Eclipse is using a closed, minified browser (just like the browser widget for QT or Visual C# WinForms or even a distributed Electron app).
Using the Eclipse browser is not really helpful when trying to debug webapps, because you can't even see loading times of the pages and so on.

PyCharm: Debug Javascript in Django Template

I cannot figure out how to debug javascript, using PyCharm, in a Django template.
When I attempt to debug a template -- by using the context menu item Debug while in the template -- the debugger launches, chromium launches, and I see the following error message in the PyCharm debugger console:
GET http://localhost:8000/login net::ERR_CONNECTION_REFUSED
Needless to say nothing shows up in the chromium window.
I've seen hints that I'm supposed to "open the generated file" from within the PyCharm debugger scripts tab. But since chromium isn't loading anything there's nothing to open.
I have the JetBrains chromium debugger installed and, so far as I can tell, running.
What's the procedure for debugging javascript in a Django template from within PyCharm?
Set up a debug configuration for Javascript (not Remote Firefox/Remote Chrome as the documentation might lead you to). Set the URL to the entrypoint of your application that renders the template and run this config. It should launch a browser and stop at any breakpoints you set in your javascript in pycharm.
Why not using a browser tool like firebug in browser or google chome debugging tools (depending on the browser you use), If your code is client side, since I assume that the server side part of the application is written in python scripts it's the easiest solution.
I have also used JSDT in eclipse but it was not as convenient.
For the error you posted I think it's server-side / networks error, check your views.py or an example from the django tutorial to see if it is exposed in WSGI (django default web server ).

Use javascript source-maps with phonegap

we are shipping a Cordova WebApp for tablets with minified source using uglify2-compressor via grunt-contrib-requirejs. We generate source-maps for debugging which work flawlessly using the chrome desktop browser via remote Debugging on a KitKat Android Tablet.
Now we like to send error reports from our customers to our server. The Android WebView does not seem to care about our source maps. Therefore we get error message like "line 1, char 1231231" - not very helpful...
The Question is: Is it possible to use source-maps with the Android (and iOS) Webview maybe using a Cordova plugin or do we have to wait for an update (Chrome and Firefox Desktop are able to parse the maps...) and ship un-minifies code so that we are able to get the line number of the occurred error?
From Chromium discuss topic
DevTools downloads source maps using the front-end browser, not the one that runs the inspected page. So file://android... is never going to be accessible. You need to point to the files on your development box instead.

Debug JavaScript code in vs.net 2010

I have a win-form Application with a web browser control.
i use a JavaScript code in this web browser.but some times my JavaScript code return error
I want to know is it possible to debug JavaScript code in vs.net 2010?
You can debug Javascript running in an ASP.Net application (WebForms or MVC), but not in your Win Forms application. If you have the code for the site that the browser control is running then you can start a session of that in VS 2010 and debug away.

debug javascript in android emulator with phonegap

I am new to phonegap and android development. May I know how can I debug javascript error on the emulator? I have heard about ADB may I know how can I use and install it on windows 7 system? I have an ajax called with jsonp but no response on emulator. However, I can call that ajax with browser on windows. May I know what went wrong?
Update Nov 2016: looks like this doesn't work anymore.
The easiest and one of the most powerful ways is using http://debug.phonegap.com (it uses Weinre in the background, if you care). You just
pick a random string, say r4nd0m,
inject <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script> into your index.html
visit http://debug.phonegap.com/client/#r4nd0m and you will instantly be debugging your mobile web app.
Things you can do (similar to Firebug or Web Inspector):
Viewing and changing the DOM
Editing CSS
Console for live debugging and running Javascript remotely.
Other stuff, like: storage, resources, timeline, profile, etc.
You could at least log debug stuff to the adb console by calling console.log() in JavaScript. Maybe that would suffice?
To view log output using adb, navigate to your SDK platform-tools/ directory and execute:
adb logcat
See logcat Command-line Tool
You can now use Chrome dev tools to remotely debug Android Phonegap apps! I wrote up instructions here: Remote debugging Phonegap apps with Chrome Dev Tools
Steps for Android emulator:
Navigate to chrome://inspect/ in Google Chrome on your desktop computer.
Locate Android emulator on Devices tab and click 'inspect' link
See also Get Started with Remote Debugging Android Devices
I'd recommend jsconsole. It lets you inject any JavaScript into the page and provides a basic console. There's a nice tutorial on remote debugging.
Yes, you have log errors with console.log and show the LogCat tab in Eclipse. There, Web Console messages (including JS errors) will show up. It's a little verbose so you have to filter to show just the Web Console tags but it works well. Described here: SHOWING CONSOLE CONSOLE.LOG OUTPUT AND JAVASCRIPT ERRORS WITH PHONEGAP ON ANDROID/ECLIPSE
I've found that this works for debugging javascript errors for Android/Phonegap when testing the app through Eclipse on Windows 7.
Simply go to Window > Show View > Other...
Then select LogCat under the Android folder.
The window/tab that just poped up is where the Android emulator will send its logs and error messages. You can detach this window and place it outside of the Eclipse IDE (I found this useful). You can also control the types of errors you see by selecting any of the 5 colored letters in the top right hand corner of the window.
To hide the useless information so you just see errors, make sure you only have (E) selected. Personally, I also like to have (W) warnings selected as well as (E) errors selected.
Hope that helps!
There is (finally) a tool available to allow proper JavaScript debugging for Android - http://www.jshybugger.org/
Features:
add/remove/enable/disable line breakpoints
watch expressions
step into/over/out
pause on exception
call stack navigation
local variable inspection
remote console
javascript syntax and runtime error reporting
view/edit/delete Local Storage items
view/edit/delete Session Storage items
view/edit/delete WebSQL Database records (watch Video)
view page resources (images, scripts, html)
remote console support enhanced (stacktrace)
Debugger: enhanced object inspection
Debugger: conditional breakpoints
Debugger: continue to here
I solved it easily on two steps.
Change the level of logging
In config.xml add this line
<log level="DEBUG"/>
Run the cordova Log
It's a bat file that you can just run and track all the log messages go to your phonegap project and navigate to \platforms\android\cordova then open log.bat you can now emulate your application using the command line
cordova emulate
and the log will be shown in the cmd which will be pop-uped when you open log.bat
If you are willing to set up NodeJS somewhere you can do some extended debugging with John Boxall's iBug, which although was designed for the iPhone I have tested on Android and it works fine. It's basically firebug lite for mobile devices. I'm pointing to my fork cause Node changed a lot and John's code wouldn't run on a modern nodeJS so I patched it to get it up and running on nodeJS 0.2.3, YMMV on more recent versions of nodeJS.
If you use console.log you can do simple print statements. Aswell as using adb to view them, you can use a log viewer on the device and view the logs there. More info: http://www.technomancy.org/android/javascript-debugging/
The best solution to catch exceptions and show in your console is this code:
window.onerror = function(msg, uri, line) {
console.log(msg + uri + line);
}
In Eclipse you can add an hook to the android emulator back button and inspect a value on the fly. Add the onBackPressed event manager and call the javascript console from there.
From the eclipse debug perspective you will change the value of a String variable to what you want to inspect, and pass it to your app by calling super.loadUrl.
See the code below.
Do not forget to enable the debugging of your application from DDMS view
public class MyActivity extends DroidGap {
private String js = "";
#Override
public void onBackPressed() {
//add a breakpoint to the follow line
//and change the value for "js" variable before continuing execution
super.loadUrl("javascript:console.log(" + js + ")");
return;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setBooleanProperty("keepRunning", false);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 20000);
}
}
If you're using Phonegap Build and would like to debug using the Chrome console, here's a working solution. It's possible to debug WebViews using USB debugging (https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews)
First, make sure your widget tag contains xmlns:android="http://schemas.android.com/apk/res/android"
<widget
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="me.app.id"
version="1.0.0">
Then add the following
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
It works for me on Nexus 5, Phonegap 3.7.0.
<preference name="phonegap-version" value="3.7.0" />
Build the app in Phonegap Build, install the APK, connect the phone to the USB, enable USB debugging on you phone then visit chrome://inspect.
Source:
https://www.genuitec.com/products/gapdebug/learning-center/configuration/
Phonegap debug still exists. the one I know of is in phonegap build found in the settings and tick the debug application option. It will then rebuild your app when you save it. A debug button will appear in the application page along with the rebuild options. (this service also uses a built in weinre)
Another option which I also find the fastest is jsconsole.com.
Its very easy to set up and requires almost no configuration compared to other methods of debugging where you need to install lots of things like drivers and SDKs.
NOTE!
In PhoneGap 10 when you build your app and any requests outside the app(as if there is no internet) fails,you will have to add this in your config.xml
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
I was pulling my hair out trying to get any remote debugging tool to work only to find out outside requests were blocked by default. this saved me.
Debugging PhoneGap / Apache Cordova Application is easy with GapDebug
Download & Install GapDebug from https://www.genuitec.com/products/gapdebug/
Run a GapDebug on You PC / Mac
Enable Developer Option & USB Debugging on your android device (Settings -> Developer Option (ON) -> USB Debugging (ON))
If Developer option is not found (Settings -> About Phone -> Click Build Number for 7 times)
You can Debug your application from your GapDebug
Refer
https://www.youtube.com/watch?v=QHTI-utHfEE
https://www.youtube.com/watch?v=AZJUSomFOwk
https://www.youtube.com/watch?v=XEeWFIsgtsU
https://www.youtube.com/watch?v=kiY03MBGkLo

Categories