I'm doing research on choosing a w3 framework for mobile apps(native) and came across trigger.io
As some of the team come from a very corporate / enterprisey background, Breakpoints + Debug is a key feature. I've watched the catalyst video and it looks very cool. However I didn't see breakpoints being set.
Do you know if its possible to set breakpoints + debug in trigger.io? Can I remote debug javascript when my app is running on device?
Thanks
Trigger.io Catalyst is a hosted version of the Weinre open-source project. Unfortunately it does not support setting break-points.
It is possible to display log messages in the console and to query the DOM and JavaScript namespace from the console which is a big step up from alerts.
One approach to development is to build the user flow on the web first so you can use the Chrome debug tools with breakpoints. And then add the native features (which can only be tested on the device / emulator) at end. Trigger.io's build to web feature supports this mode of development:
Related
Is there a way to attach a VSCode debugger to an SPFx app running in a modern page or a Teams app? I've been using DevTools this entire time by attaching the following query string:
?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
I'd prefer to use Edge if possible. If it makes any difference, I'm using the fast-serve library.
I am using Visual Studio 2015 tools for Apache Cordova for mobile application development on Windows 7.
To build and run my app, I have to choose one solution platform and one target.
Is there any way to view the output on my browser just like a web app with no emulator?
When I press f5, the result will open in a browser in an emulator mode which I choose as system platform and target device. But I want to run my app like a web application, when you right click on index.html and select view in browser.
I look for a project setting or a ‘system platform’ and ‘target device’ value that work like that.
PS:Selecting any windows solution platform and local machine target needs Windows 8 or higher and the build process is failed.
Thank you.
The solution I found for my problem:
I used the url of my output result with emulator: "http://localhost:4400/index.html?enableripple=cordova-3.0.0-NexusS"
and then removed the emulator settings in url: "http://localhost:4400/index.html".
Using this url will cause some popups asking some things. These are for 'cordova.js' script which is referenced in index.html file of cordova project. As we do not need this in browser, commenting the line <script src="cordova.js"></script> from index.html, no dialog will open any more and the project will compile so faster for initial design that do not need cordova.
Now I will use chrome mobile mode (f12-> phone icon) to see mobile view of my app.
#A.M.
The answer depend on your expectations.
If you just want to view the page layout and test some of the associated Javascript, the answer is YES.
If you want to test the plugin libraries and associated JS, the answers is NO.
However, here are some items to be cautious with - either way.
When running your code on a device, you MUST wait for the
'deviceready'. There are not ifs, ands, ors, or buts on this - you
must wait.
You can emulate some of the plugins. This Summer some of HTML5 APIs have become available. If you want to write a shim, you can emulate some plugins with the HTML5 APIs, and use the Phonegap plugins on the mobile device. NOTE: some emulators now support HTML5 APIs.
Not all browsers are equal and not all webview libraries are equal. Cordova and Phonegap both use a webview library with their respective platforms. On Android, it is called Webview. On iOS, it is WKWebview. These libraries are finally starting to get some attention. So Google, Apple, Intel and others are all making competing libraries. *better for us* ;) One new library for Android is called crosswalk. Many developers like it, but it is bloated.
Best of Luck
We work on a web application (HTML5 / JS) where performance is critical (physics simulation).
There are a few great options to trace performance on desktops: Chrome Dev Tools timelines, chrome://tracing or the promising Web Tracing Framework. The last option seems like the most powerful one. It also supports remote control of Chrome for Android, but unfortunately Mobile Safari is unsupported.
Do you know any other tool that can be used to precisely measure performance on Mobile Safari?
I know I can debug pages on Mobile Safari with Mac Safari and perhaps access timeline and/or profile tools too. Is this the only option? Do you know other interesting ways of performance tracing a webapp on Mobile Safari?
Have a look into Weinre a fantastic remote debugging tool based on webkit's developer tools:
http://people.apache.org/~pmuellr/weinre/docs/latest/
The timeline tool is still in the early stages but you can create your own timeline events.
For webapp's performance,with enough experience you can tell from the page's debug borders(Compositing Render Layers) and repaint counters,they are not powerful like Web Tracing Framework does,but in many case they help a lot.Web Tracing Framework already works on android chrome,for mobile safari,mac safari's develop tool also can enable to inspect mobile safari's debug borders and repaint counters,also if you dont got a mac,you can just try MIHTool which you can enable debug borders and repaint counters in the app on you iOS device.
Check out Mobile Web Thursday: Dev Tools to learn more about it.
Are there any tools/methods for debugging phonegap Blackberry(5,6,7) app . Presently am using Alert for debugging which is very tedious .
Since you are using PhoneGap, its always better to view/debug you app on a webkit browser like Chrome/Safari. Also try Ripple emulator from BlackBerry which is the best web emulator for mobile devices: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en
Since you are developing a web app, and as far as I know there's no "official" IDE for BlackBerry Webworks, this question is not BB or Phonegap specific. You are just asking how to debug JavaScript. There are a lot of questions in SO about this, just run a search. I'll give you my two cents:
As the JavaScript code runs in a browser, you need to debug in the browser. Most browsers have built-in debugger or extensions. For Firefox I'd reccomend Firebug extension, in Chrome the built-in debugger is pretty good. I can't tell about IE but I think there's something similar.
If you need to debug on device, then use console instead of alert.
Finally, have a look at WebStorm. Probably the best IDE for JavaScript right now, but you need to purchase a license. It allows you to attach to the browser debugger and debug in the IDE.
I have a web app that works fine on desktop browsers, but struggles on the palm pre browser (via the emulator). How do I debug the app on the palm pre browser? There doesn't seem to be any error console, dom inspector, etc... I'd expect such tools from a web-app oriented phone.
The debugging tools on the webOS platform are generally still poor, and thats speaking for the application development.
I dont think there is any debugger for the web browser. You're stuck with document.write and related.
And for applications themselves, its better, but not by much. There is a command line debugger that you can use to set break points and inspect. There is also an inspector based on Safari that you can use to inspect the dom and such. And there is basic info/warn/error debugging to syslog. But these are for applications using the Mojo framework, and not exposed to web pages.
That said, the browser is based on Webkit, so its fairly close to Safari 4. There are some good sized chunks missing in Canvas and advanced CSS support. Browsing the developer forums will help see what CSS and Canvas features are missing or broken.