Though PhoneGap is very quick way of making applications, debugging becomes difficult.
Is there any good debugging/testing tool for javascript written for PhoneGap such as IE developer tools?
Thank you.
There's a way to go for mobile debugging to get as good as desktop, but weinre and ripple come the closest that I've seen.
Weinre does web inspection to a remote device (no breakpoints). Ripple is a Chrome plug-in that uses simulation to run and debug mobile apps in the Chrome browser.
Yes! Today there are some new tools.
Right now I am debugging a cordova application programmed for android.
My suggestion is to use GapDebug for Debugging. This is a real debugger where you have:
a full JavaScript Debugger (setting breakpoints works great)
CSS and DOM inspector as good as in "chrome developer tools"
in GapDebug GUI you can deploy your .apk files directly to the smartphone
the process between the cmd-command "cordova build" and the "starting of the app on the smartphone" is even quicker than starting it in the cordova-emulator
Have fun:
https://www.genuitec.com/intro_gapdebug/
Related
Ok! fine as we might be aware of that we also user browser Console for debugging and development of Apps Related to Javascript, Jquery etc...
But coming to point of Angular feeling big difference while debugging.
like getting elements,Objects.
Browser Console came very handy for jQuery.
Any Good documentation, article for development using browser console.
Angular Batarang
Angular Batarang is a Chrome extension developed by the Angular team at Google that integrates very nicely as a debugging tool for Angular apps.
To install Batarang, we simply need to download the application from the web store or from the GitHub repo: angular Batarang.
Once our installation is set, we can start up the extension by navigating to our developer tools and clicking enable to enable Batarang to start collecting debugging information about our page.
Batarang allows us to look at scopes, performance, dependencies, and other key metrics in Angular apps.
ng-inspector for AngularJS
Firebug and Google chrome developer are great for catching errors. ng-inspector can be used to view data returned by the application. ng-inspector works in Google chrome, Firefox and safari. You can download it from the official website ng-inspector
I want to program a desktop app in javascript (with web technologies) and looked for a comparison between Electron and Chrome Apps.
Everything I need seems to be possible with Chrome Apps, but there's a big hype around Electron/NW.js. What are the advantages of Electron? Is it due to the large amount of Node packages?
I think the functional differences are clear to me.
Pros and cons like:
+ Chrome Apps can run on Chrome OS
- Chrome Apps needs an installed Chrome Browser
...
UPDATE 2016-08-20:
As Eduardo pointed out, Google announced that they'll discontinue Chrome Apps for all platforms except ChromeOS. So I think the answer to this question is obvious now.
For all of you who developed a Chrome App and are interested in migrating it to the web here's a guide from Google: https://developers.chrome.com/apps/migration
Or, as Google also mentioned, you migrate it to Electron or NW.js.
You can totally compare electron and chrome packaged Apps. They are very similar. For both of them you get:
Develop your Desktop App using Web Technologies
App runs on top of Chrome
Automatic updates. Though in Chrome you get it for free, for Electron you need to do some work.
OS Integration - Both have better integrations with the OS than a normal website, but Electron supports a wider range of OS integration.
Work offline or online.
Both work on Linux, OSX and Windows. Chrome Web Apps also work on Chromebooks.
Here are the differences:
Electron uses node.js. So you can import many modules not easily available in Chrome Apps.
Distribution, with electron you package and distribute the app yourself. With Chrome Apps you distribute them through Chrome Webstore.
Environment. An Electron App is packaged with its full environment. Chrome Apps just use Chrome environment so they are lighter, but may behave differently for different users depending on the Chrome version they use.
Chrome Apps require the user to have Chrome installed, Electron doesn't.
Electron has better developer tools for testing and debugging.
Electron is an open source platform. Chrome Apps is also built on top of multiple open technologies but specially distribution is controlled by Google.
Electron documentation is much better even though it's a much younger platform.
Adoption: There are quite a lot of big and successful apps built on top of Electron such as Visual Studio Code, GitHub client, Slack. Chrome Apps just never picked up as much momentum.
Chrome Apps can be tightly integrated into Google Drive
UPDATE 2016-08-19:
It seems Google recently deprecated Chrome Apps on any platform other than ChromeOS. So I'd say it's no longer a valid option.
http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html
I think it is not really possible to compare electron and chrome-apps. It depends on, what your program should do.
So, when should I use electron?
On the first look electron looks like chrome, because the views of electron is based on the chrome browser. But electron is a full node.js environment with a chrome view on top. So the powerful features are not just insight the chrome part.
Like you mentioned there are a lot of node modules (over 1.700.000), which you can very easy install or update. You should also take a look at the node.js api (https://nodejs.org/api/). All that allows you to write complex apps, which are fully integrated on your desktop. For nearly all problems are some modules available.
With node you can first make your program with a command line interface and after that you can use electron to make a gui.
So, when you already have a online app which is written in JS, maybe a chrome-app is better. Chrome-apps are great for a google drive use. Or if you want to have a full integration in chrome-os.
So my pros for electron:
more than 1.700.000 modules over npm available
very easy integration of jQuery, Angular, React, ...
first make a program with a CLI and then make a gui
works perfect with github
very good desktop integration
provide windows installers
I would like to chime in on Electron vs nw.js.
I have a very popular Chrome App which cannot be converted to neither a web app nor an extension because it uses several unsupported APIs, most notably the chrome.fileSystem API.
The app is still only accessible on Chrome's webstore since app support will be abandoned not before early 2018. Nevertheless, I have already spent lots of thoughts and time on deciding what to do about Google's move.
Until now I have been mainly aiming at Electron since that seems to get most attention, but I have just recently found that nw.js can actually run Chrome apps out of the box because it implements all Chrome's APIs whereas Electron only implements a subset of them.
Simply run your Chrome app like this:
/path/to/nw.exe <folder path of the manifest.json file>
Except for a very few things such as intercommunication between my app and a helper extension, everything works as expected with zero changes even though it is an advanced app with nearly 3000 lines of JS code.
For new cross platform apps, Electron might be the better choice (I have actually no idea) but for existing Chrome apps I would say that nw.js is really something you should consider.
Hope this can help someone in the same position.
I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
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
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.
I have a strange behavior on the iPhone browser. Is there a tool to debug the JavaScript of the iPhone browser?
I'm hoping there's something more advanced than simple alert() messages. Is there something with advanced tools like setting breakpoints and viewing object states?
With the release of iOS 6, Apple released Remote Web Inspector for their Mobile Safari, and this is huge. Basically you have all the features and power of Web Inspector in regular Safari, for your mobile apps, including Phonegap apps.
I've used weinre but this tool makes it obsolete for newer versions of iOS (unfortunately not for old versions of iOS, non-iOS devices, or if you're on Windows) since its a full-featured debugger with breakpoints and everything.
Requirements:
A Mac with Safari 6+
Either a USB-attached iOS 6+ device or xCode 4.5+ running an iOS 6+ simulator
How to activate the inspector:
In your simulator or device, open Settings > Safari > Advanced > Web Inspector > On
(this is on by default in the simulator)
In Safari 6+ for Mac, access your page from the Develop menu. You can enable Develop menu in Safari's Advanced Preferences if its not showing up.
More discussion at the bottom of:
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
(Also, if you read about a "secret private interface" or iWebInspector somewhere, these are also made obsolete.)
check out weinre or use the remote version debug phonegap.
cu
you can also inject firebug using a simple bookmark. I've used it on the ipad and my debugging abilities were immensely enhanced.
I faced a simple use case in which I only needed to test my code on a Safari's JS engine (Merely debugging, simply running it and consuming traces).
To that end I used Epiphany web browser, which is both free and uses JavaScriptCore JS engine which is also used by Safari.
Epiphany isn't provided with developer tools, so I used http://jsconsole.com/ to view my traces.
Though it is a thin solution, it helped me find a line which worked on Chrome but didn't on Safari.
Step by Step Guide How To Enable JavaScript in iPhone
Open your iPhone settings.
Tap on safari in the app list.
Tap on Advanced option.
Enable Javascript iPhone with the help of switch push.
I have to do some JavaScript in the future, so it is time to update my toolbox. Right now I use Firefox with some addons:
JavaScript Shell from https://www.squarefree.com/bookmarklets/webdevel.html
Firefox Dom Inspector
Firebug
Greasemonkey
Stylish
I plan to use Venkman Javascript debugger as well as jsunit and js-lint.
For programming I'm stick with vim.
So what other tools do you use when developing JavaScript?
I use both Firefox and IE for Web Development and a few add-ons in each:
Firefox:
Firebug
Web Developer Toolbar
Internet Explorer:
IE Developer Toolbar
Fiddler
Visual Studio for JS Debugging
I sometimes use Emacs with Steve Yegge's js2-mode, evaluating code with Rhino & John Resig's env.js to load jQuery or Prototype in my standalone scripts.
This allows me to explore javascript, jQuery, and Prototype outside of a browser.
Example:
var window;
load("Library/env.js");
window.location = 'index.html'; // Load the page 'index.html'
print($('aForm').id); // Play with the Dom in a standalone script!
Web Developer Toolbar (Firefox Addon)
Nikhil's Web Development Helper (IE Toolbar)
Firefox:
Firebug - Invaluable for debugging markup and code while testing ideas directly in the browser
Rainbow for Firebug - JavaScript syntax highlighting
Pixel Perfect - Overlay images on any page, make it match the design on every pixel
Web Developer Toolbar - Just about any tool you can think of
Firecookie - Manage your cookies
YSlow - Suggests how to boost the download performance
Windows-only:
Fiddler - A great HTTP proxy with debugging capabilities
Internet Explorer:
- Web Developer Toolbar - Missing a few things but still very complete
Firebug on Firefox
IE Web Developer toolbar on IE
JS Lint
A couple more::
IE Explorer Toolbar
Firefox Developer Toolbar
Best way to debug JavaScript in Internet Explorer is to use Visual Web Developer Express.
If you like a cross browser logging solution check out Firebug Lite!