Use javascript source-maps with phonegap - javascript

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.

Related

Debug an External Javascript against Documents inside Mobile Safari

This question is related to my earlier question How to Debug Javascript in IOS Action App Extension. Basically, I am developing an mobile safari extension, and part of the work is to develop a javascript (operating on top of "document" provided by mobile safari) to run inside the app extension.
However, I have not found a way to debug a javascript file inside an app extension. Now, I am trying to ask the question a bit differently - given mobile safari on a page, can I somehow run an external javascript on that page and debug this external javascript? I suppose that Safari Web Inspector could help with that? Thanks.
(This is a slightly customized answer from your other question)
The official documentation for this is [here][1].
It's not too hard, although recently I've had an issue with the page showing up when connected to the iOS simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
Ensure that on the device Settings->Safari->Advanced->Web Inspector is on.
(Make sure you've Trusted the computer from the device)
Start MobileSafari on your device.
Start Safari on your desktop, make sure Show Develop menu in menu bar is on in Preferences.
In the Develop menu you will see your device name, say 'BSharer's iPhone'.
select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device's page on your desktop. The developer page will open and you can debug as if it was running on the desktop machine. You should now see all the JavaScript that is available to that page and set breakpoints.
(The app extension requires the debugger; statement because we don't see the javascript files injected by the app extension. You can still use the debugger statement but it's not usually necessary.)

How to enable javascript console on Android 4.2.2

I'm trying to enable the JavaScript Console to debug a webpage in the stock Android browser on a Samsung Galaxy S4 running 4.2.2.
On the S3 I just type in about:debug in the address bar and it comes up but it doesn't work on the S4, it seems to do an autocomplete for chrome://debug.
Firstly it would be great to know how to get the console open and secondly why would Chrome's autocomplete be coming up for the stock browser?
Thanks
I don't know how to activate this console.
But I have used a tool that can allow you to remote debug any browser with limited changes to your web page (only add one script).
It is VorlonJS and you can find demo here: http://vorlonjs.com/#demo
try this link remote debugging chrome.
Well if are you developing on android greater than 4.0.3 you can type adb logcat and you would be able to catch your console.log or errors.
Or if you want chrome enables mobile screen to test the view.It depends if you are testing the functionality or the graphics

Firebug like debugging on Android

I have seen several posts that talk about remote debugging of javascript code on Android, but they all miss the point of what I am trying to do.
I have a Nexus 7 and I want to use it as a remote development environment when I am away from my desktop. I have created a chrooted debian distribution to run apache and php and git (via ssh). This chrooted environment mounts a subdirectory of the /sdcard directory from outside the chroot environement. Apache document root of a virtual host is pointing at a directory within this. Before leaving the desktop I can git push the latest release to the tablet. When I return git pull can get what I have done back again.
I then (when away from home and NOT connected to any network) can edit the code using an Android editor (using the 920 text editor), but then run the browser to look at what I have developed using localhost the apache virtual host picks this up and displays it.
The application I am developing IS NOT FOR ANDROID - it is ultimately for the desktop. But I want to be able to debug it like I was on the desktop. Breakpoints and single stepping are the prime thing, but also I tend to use the html section in firebug to adjust my CSS before editing it.
Is there a way to get either the chrome developer tools or firebug add on for firefox to load into a browser that will run in android?
I use Firebug lite bookmarklet for iPhone and iPad, never tried on Android, check this out http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone it must be similar on Android.
To activate it use this steps:
Create a new bookmark or bookmark a page
Rename the bookmark to “Firebug”
Copy the textarea link:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?Fi+'NS':Fi;Er;Er;Er;(Fe[0]||Fe[0]).appendChild(E);E=new%20Image;Er;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Edit the Firebug bookmarklet, remove the URL and paste the
bookmarklet
Choose “Done” (on the virtual keyboard) and you’re all set
Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your mobile device.
At least not for Firefox Mobile, because all the devtools are still partially based on XUL, where the Firefox Mobile is using Native UI.
I don't think there is any plan in the close future to change this situation; it's not a common scenario.
However, you should be able to do something using the Debugger API, creating an add-on for Firefox Mobile. But I don't know if it's worthy.

Is there a kind of Firebug or JavaScript console debug for Android? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I'm developing a website for mobile. It works on Firefox desktop. It works on iPhone, but when I press a buton on Android 2.x (and maybe lower).
my JavaScript code crashes or what else...
Can I get access to the logger or JavaScript console for those devices?
The better should be a kind of Firebug application.
One option is weinre. It provides DOM & Style editing along with the console. If you don't want to set it up yourself, there is an instance hosted at http://debug.phonegap.com
The other option is JSHybugger. It's certainly the most complete debugging environment available for android browser. It's a paid product, but probably worth it.
Chrome has a very nice feature called 'USB Web debugging' which allows to see the mobile device's debug console on your PC when connected via USB.
See here for more details.
EDIT: Seems that the ADB is not supported on Windows 8, but this link seems to provide a solution:
http://mikemurko.com/general/chrome-remote-debugging-nexus-7-on-windows-8/
You can type about:debug in some of the mobile browsers to pull up a JavaScript console.
I sometimes print debugging output to the browser window. Using jQuery, you could send output messages to a display area on your page:
<div id='display'></div>
$('#display').text('array length: ' + myArray.length);
Or if you want to watch JavaScript variables without adding a display area to your page:
function debug(txt) {
$('body').append("<div style='width:300px;background:orange;padding:3px;font-size:13px'>" + txt + "</div>");
}
I had the same problem, just use console.log(...) (like firebug), and the install a log viewer application, this will allow you to view all the logs for your browser.
We are following the below steps in our project for debugging a website on mobile.
Install mobogenie software on mobile and desktop (both have the same version).
Open your site in mobile Google Chrome browser.
Open Google Chrome on desktop. Go to Option --> More Options --> Inspect Device.
Here you find a list of sites which are open on mobile and click on inspect and you get the JavaScript console which you want.
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>
"USB Web debugging" is one option
"printing it on the screen" another.
But I prefer remote debugging through 'adobe edge inspect' formally known as adobe shadow. It uses weinre internally (=WEb INspect REmote)
You just install it + a small plugin in the browser (Chrome) and a free app you can download in the play-store. Then you have all the tools like the Chrome Development tools.
It has also support for iOS and Kindle Fire
Update
Like Chris noticed, you have to pay a subscription to use edge inspect. A cheap alternative is to use weinre directly, it's the base of edge inspect. Here's an article about how to set it up.
If you're using Cordova 3.3 or higher and your device is running Android 4.4 or higher you can use 'Remote Debugging on Android with Chrome'. Full instructions are here:
https://developer.chrome.com/devtools/docs/remote-debugging
In summary:
Plug the device into your desktop computer using a USB cable
Enable USB debugging on your device (on my device this is under Settings > More > Developer options > USB debugging)
Or, if you're using Cordova 3.3+ and don't have a physical device with 4.4, you can use an emulator that uses Android 4.4+ to run the application through the emulator, on your desktop computer.
Run your Cordova application on the device or emulator
In Chrome on your desktop computer, enter chrome://inspect/#devices in the address bar
Your device/emulator will be displayed along with any other recognised devices that are connected to your computer, and under your device there will be details of the Cordova 'WebView' (basically your Cordova app), which is running on the device/emulator (the way Cordova works is that it basically creates a 'browser' window on your device/emulator, within which there is a 'WebView' which is your running HTML/JavaScript app)
Click the 'inspect' link under the 'WebView' section where you see your device/emulator listed. This brings up the Chrome developer tools that now allow you to debug your application.
Select the 'sources' tab of the Chrome developer tools to view JavaScript that your Cordova app on the device/emulator is currently running. You can add breakpoints in the JavaScript that allow you to debug your code.
Also, you can use the 'console' tab to view any errors (which will be shown in red), or at the bottom of the console you'll see a '>' prompt. Here you can type in any variables or objects (e.g. DOM objects) that you want to inspect the current value of, and the value will be displayed.
If you don't mind forwarding through a 3rd party server, JSConsole is a rather useful remote debugger for JavaScript.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
I also looked for a simple console replacement, just to dump text. So what I did was this function:
function remoteLog (arg) {
var file = '/files/remoteLog.php';
$.post(file, {text: arg});
}
The remote PHP file recorded all the output to a database in arg. It took me 5 minutes (OK, on the server side I used a simple logging library that records and displays text messages, but still...).
On 2013-12-03 Google launched Chrome DevTools for Mobile, which lets developers remote debug mobile web applications via emulation and screen-casting with Zero Configuration.
For all features, checkout Paul Irish's talk on YouTube.
Try js-mobile-console
MobileConsole can be embedded within any page for debugging. It will catch errors and behave exactly as the native JavaScript console in the browser. It also outputs all the logs you've written via an API of window.console.

Debugging Web-Applications on Android [duplicate]

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.

Categories