How to debug JS on Windows Phone 8.1 Cordova Project - visual-studio-2013

I have been trying to debug a Windows Phone 8.1 app using Cordova on Visual Studio.
I would like to debug the Javascript in the app - set break points and such in Visual Studio.
I have tried Weinre, and it gives me DOM elements, and read logs from console, but I would like to know if there is any way I can set breakpoints in the Javascript and see if a code path is executed and look at the local variables and step-in.
I have tried to search online, but couldn't really find a good way to do this - actually I couldn't find any way that was working.
If you guys were able to find a way to debug Javascripts effectively in Windows Phone 8.1 apps, please let me know :).

Debugging Apache Cordova apps on Windows Phone targets is not yet supported in the current release but you can open up the native Windows Phone project (CordovaApp.Phone.jsproj) that's under the bld\Debug\platforms\windows folder of your Cordova project and you'll have full JS debugging support from within Visual Studio for that one.

Since this is not yet answered: You can debug Windows Phone 8.1 apps perfectly (=breakpoints, watches, ...) using Visual Studio 2015 (e.g. the free community version).

Related

Can't create a UWP app

I recently, upgraded to Windows 10 and got Visual Studio 2015 Community hoping to build UWP apps and ASP.Net 5 apps. At first, I installed everything, but ended up skipping / canceling the Windows 8.1 / 10 mobile emulators (my PC can't even run them). After everything was installed, I went to create a new UWP app (C#), and got this error:
Next, I try the same thing, but with JavaScript. It works perfectly! on the same UAP 10.0.0.0 that is supposedly missing. The link it provides is completely useless (it sends me to http:/microsoft.com/en-us) -_-. Oddly, this only happens when I try to use C# or VB.Net, JavaScript UWP apps seem to work fine. What is going on here? Where can I find the real link to the SDK I need?
UPDATE
JavaScript UWP apps will be create just fine, but when I attempt to build, I get:
Error "10.0.0.0" is not a supported value forTargetPlatformVersion.
Please change it on the Project Property page. Test
C:\Program Files (x86) \MSBuild\Microsoft\VisualStudio\v14.\JavaScript\Microsoft.VisualStudio.JavaScript.UAP.targets
This is the download link for the standalone SDK, maybe reinstalling the sdk will fix the problem.
https://dev.windows.com/en-us/downloads/windows-10-sdk
Normally you don't always have to reinstall visual studio when something goes wrong because it takes a lot of time to reinstall again. From your question you skipped/cancel that feature, the first thing to do is go to the control panel and double click on visual studio under programs to Modify the software and enable those features.
In the case, visual studio was working properly before but due to some updates it stopped, go to control panel right click the visual studio version you have under programs to repair.
If the above doesn't work try to reinstall it again. I hope this helps.

Unable to receive debug messages for crashing cordova app on windows 8.1 phone device

I have VS 2015 Enterprise RC installed and am in the process of porting a Cordova app, deployed on iOS and Android, to Windows 8.1 Phone / Universal
After making the necessary changes I have an App that crashes shortly after the splash screen is displayed on device.
I don't see any error messages in visual studio Error / Output windows or on the device. The app just vanishes
Can anyone provide a method to capture information surrounding critical app failure on the device in VS or otherwise for debug purposes?
I think it was because you got a native exception which cannot be captured by current debugger type. In classic windows phone project like c# and winjs project, we can set the debugger type to support both managed and native. I think it's worth to try if you can get more info by enable native debugger.
By default, for Cordova project, the default debugger type is Script only. We can find it out by enable Diagnostic build log: Tools->Options->Projects and Solutions -> change "MSBuild project build output verbosity" to Diagnostic.
Then let's take an example to show what we can find:
Create a new black cordova project.
Change Solution Platform to Windows Phone (Universal) and select "Emulator 8.1 WVGA 4 inch 512MB".
Build the solution. Then let's check the build log in output window.
When searching "debuggertype" in output window, we will be able to find the following info:
DebuggerFlavor = PhoneEmulator81Wvga4512
DebuggerType = Script
DebugSymbols = false
DebugSymbolsProjectOutputGroupDependsOn =
DefaultContentType = Default
DefaultReferenceGroup = Implicit (Apache Cordova)
DefineCommonReferenceSchemas =
DefineExplicitDefaults = true
We can see the DebuggerType was set to Script. This is inherited from globle settings in MSBuild. You will be able to find what the file is from the Diagnostic build output log as well.
Then let's see how we can change it to capture native exceptions. Go to your project folder and open .jsproj.user file. We can find the following setting:
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|Windows Phone (Universal)'">
<DebuggerFlavor>PhoneEmulator81Wvga4512</DebuggerFlavor>
</PropertyGroup>
Now, change it to the following will change the debugger type, you can verify that in build log.
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|Windows Phone (Universal)'">
<DebuggerType>Mixed</DebuggerType>
<DebuggerFlavor>PhoneEmulator81Wvga4512</DebuggerFlavor>
</PropertyGroup>
Then you can run your app again to see if it will get any info in your visual studio output windows.
From my experience, debugging the solution from the platform/windows directory is easier but I don't know if that will help in your situation.
There is also plugin that helps with console.log logging.
The most popular bug in Windows Phone 8.1 / Universal Cordova apps is using libraries that manipulates DOM without Winstore Jscompat library. If you are using Angular, Ember, Knockout or something similar it causes the crash with first operation on DOM.
Windows Phone collects all crash data in a dump file. Activate this feature under:
Settings > Reports
After that, the dump files are created in the following folder on the phone:
WindowsPhone/Phone/Documents/Debug/
You can open an analyze them with Visual Studio.

Deployment of application to device failed Visual Studio 2013

I'm trying to develope my first Windows Phone 8.1 app in Visual Studio 2013 Ultimate (Update 2). I've registered developer account and my phone, Lumia 635, is also activated. My OS is Windows 8.1 Pro x64. Both OS and Visual Studio are clean installed just few days ago. My phone is plugged into USB-port and I can see it in file explorer.
I've tried different USB-ports, not different USB-cable tho, also tried to google for solutions, no help.
I've followed exactly these orders to point where I am now: https://msdn.microsoft.com/en-us/library/windows/apps/ff402526%28v=vs.105%29.aspx
Code builds fine but when I try to deploy it comes this:
1>------ Deploy started: Project: firstapp, Configuration: Debug Any CPU ------
1>Deployment of application to device failed.
1>Error: Value cannot be null.
I cannot emulate project either, it just shows Start in menu with green arrow, nothing more.
Is my best guess to reinstall everything and try again?
Okay, I got it solved already. I'm not sure what actually fixed it, creating new WP 8.1 app project or installing some SDKs. Only thing matters is that its now working. :)

Does Worlklight Studio really supports Windows 8.1?

I am working with Eclipse Kepler 4.3.2 and latest Worklight Studio downloaded and installed through Eclipse Marketplace (6.2.0.00-20140801-1709).
There are a lot of official IBM docs and web pages stating that WL 6.2 supports Win 8.1 hybrid store app development. At the same time, the IBM tutorials lead to complete the build cycle using MS Visual Studio 12 Express.
As long as I know, VS 12 targets Win 8 only, so VS 13 is needed to target Win 8.1 store apps.
So, after creating a new hybrid app, I add the Window 8 desktop and tablet environment (and the JSONStore optional feature also), then build that environment. At this point I use VS 2013 to open the .jsproj located in the windows8/native folder. VS 2013 notifies that the project must be retargeted from Windows 8 to Windows 8.1, then asks confirmation to make writable two read-only files: index.html and cordova.js. The reason for changing the content of these files during the migration from Win 8 to Win 8.1 is to change several references from "Microsoft.WINJS.1.0" to "Microsoft.WINJS.2.0".
At this point the Visual Studio project is fully functional, and also correctly runs on the Windows 8.1 tablet simulator. The noisy problem is that at every build of the windows8 environment Worklight regenerates index.html and cordova.js adding again the references to WinJS.1.0.
So, the question is: does the current Worlkight Studio version full supports Windows 8.1 development? Or, there is something wrong in my approach?
Worklight Studio is certified to work on Windows 8.1 using Visual Studio 2013.
From reading your question, and specificically this part:
At this point the Visual Studio project is fully functional, and also
correctly runs on the Windows 8.1 tablet simulator. The noisy problem
is that at every build of the windows8 environment Worklight
regenerates index.html and cordova.js adding again the references to
WinJS.1.0.
What I think is going on here is this:
You are creating your project in Worklight Studio and then open it in VS13 which then asks to migrate WinJS 1.0 to 2.0 and everything is working for you.
What you then do is re-build your project in Worklight Studio which brings back WinJS 1.0 as well as index.html
If you do changes in Visual Studio but do not bring them back into Eclipse, then your changes from VS will be lost. That is expected, because you are working with 2 IDEs, so you need to make sure that you copy back your code.
The template for a Windows8 app from Worklight Studio seems to be generating WinJS 1.0 regardless of targetting VS12 or VS13
So the only issue here is 2 above. It is worth investigating and it will be.
As for a "workaround", as long as you properly manage your code in 1, 2 should not prevent anything as you will still be given the option in VS to migrate to WinJS 2.0; it's an annoynace, though.

Visual Studio (2013) doesn't list "Device" option for Windows Phone app deployment

I have Visual Studio 2013 with Windows Phone 8 SDK installed. The phone is unlocked and recognized by the machine. However, very often Visual Studio doesn't list either "Device" (not emulator either) in the list of deployment target. If I create a new solution and add a Windows Phone application, then I can see "Device" and emulators in the list, but when I load an existing solution with project of various types, I can only see "Start" and "Attach to IIS" as deployment choices. I tried to delete solution temporary files, but this didn't help.
So what makes VS lose Windows Phone deployment options and is there any way to fix it?
As #WiredPrairie suggested, setting a project as a Startup project (and the single Startup project) resolved this issue. Sometimes you may need to delete *.suo file and reload the solution.
In case anybody has problems in getting the "Device" option in the application toolbar, I noticed that it makes a difference, which programming language you use: using a Lumia from Nokia:
with a windows phone c++ project Visual Studio did not list the "Device", just various emulators, with Windows phone 8.1 visual basic project it did list the "Device" option. Probably there are no c++ libraries on the phone. Just to let you know.

Resources