I've created a basic Vue.js app from VS2017 template.
Everything is working, but I cannot debug any code.
Could You explain why this happens and is there any workaround?
debugger
Vue is a front-end framework, which means it runs inside a browser, not locally (NodeJs). The best way to debug Vue.js application is to install a VueDevtolls from chrome's app store. Install this, it will help you accelerate your development process.
On a component you want to debug with, right click inspect, on the dialog appeared there should be some tags, find the Vue option and click it, you will see all data flows within any Vue components.
alternatively, if you really prefer break points, you can set up a webpack (if you created your vue project using #vue/cli then its already there), and set a break point inside the sources tag on the chrome's inspection dialog.
It is most certainly possible.
All you have to do is start the browser in debug mode (--remote-debugging-port=9222) and set it (Chrome or Edge) as a Debug target (Attach the debugger to it).
https://learn.microsoft.com/en-us/visualstudio/javascript/debug-nodejs?view=vs-2019
Actually what made me wonder was that the template you used should be preconfigured for debugging without the need of anything else. There is a catch however, due to the specifics of Vue packaging with WebPack there is a problem with resolving sourcemaps correctly. See: https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html (follow the links in the discussion there). I am not sure if these issue can be resolved in Visual Studio however. I plan to ask about it, for now it can be resolved in Visual Studio Code by overriding the Source Map Paths:
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
using the following recipe: https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli
What wasn't mentioned in the recipe however is that the maps need to be manually built beforehand with vue-cli-service build referenced as preLaunchTask in launch.json (or eventually, should the override be possible in Visual Studio 2017/2019 in <PostBuildEvent> of .njsproj).
Related
I am trying rebuild a C++/winrt app by beginning with the BlankApp1 that is created by VS2017 - at first the blankapp built and ran just fine, but then I tried disabling xaml designer using the disable switch in tools/options/xaml (I prefer not to use the designer). However, the original sample xaml files remained, so the sample interface remained. I tried deleting the xaml files, after which nothing would build. Finally I trashed the whole blankapp directory, turned xaml designer back on in VS, restarted VS, and now have tried twice to create and run new BlankApps without changing anything in them. I get build errors: "Cannot open include file 'XamlMetaDataProvider.g.h' (compiling source file GeneratedFiles\XamlTypeInfo.Impl.g.cpp)" Does anyone know what to change in VS to make it functional again? And if I want to disable designer, is it enough to turn it off in options, or do certain files also need changing?
I think I know how to make it build and run, though I haven't yet succeeded in programmatically adding xaml elements as I had done with a previous app. Here's what makes the blankapp compile and run with the xamldesigner disabled: (1) Use the switch in Tools/Options/Xaml to turn off the designer, then restart Visual Studio. (2) Find the mainpage.idl and insert this declaration:
runtimeclass XamlMetaDataProvider : Windows.UI.Xaml.Markup.IXamlMetadataProvider
{
XamlMetaDataProvider();
};
That seems to be the missing step required if the designer gets turned off. I hope someone will correct me if I'm mistaken, but this appears to do the trick.
[Update] In Visual Studio 15.9.0 Preview 3, now with support for xaml designer in C++/winrt apps, I cannot find a way to use the complex and dynamic xaml interface I had created programmatically in the previous VS. I may have to post a new and separate question about this: is it still possible to programmatically add xaml elements?
I want to run my cordova app in the browser (not ripple emulator, but directly in the browser). One way of doing it I found on SO and it's simply set up IIS to the www folder. That works pretty fine, but I was wondering if it's possible to add a platform for the browser directly, so that it runs on F5. I am not very experienced at it, but I saw that e.g. in raw Ionic tools you can do "ionic serve" and it starts the web server and opens the browser. I suppose it runs node behind the scenes. It there an easy way to do that in Visual Studio either via node or IIs?
I do not think that it is possible to add a "browser" environment in Visual Studio or even native Cordova. If you really need such a functionality, you could use IBM MobileFirst (which I would not recommend, as long as you are not using their server, too).
I personally have no need of F5 functionality in Visual Studio. Just save, go to the browser and press F5 there. For debugging, I am using Chrome with the developer tools.
BTW: I do not set up IIS to the www folder, but to the project folder. I am doing this, because I am using TypeScript as script language. The TypeScript files are beside the www folder. With my setup, Chrome is able to find the TypeScript source corresponding to the JavaScript code.
right click on the index.html file and then select Open With..-> add->
then select the browser from available programs and then click on OK
To open your cordova app in a browser while using Visual Studio 2015, I suggest using Gulp + BrowserSync:
Download browser.sync from NPM. The best way to download is to add it to package.json and automatically download it.
{
"name": "content_md_app",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.9.0",
"browser-sync": "2.10.0",
},
"dependencies": {
}
}
Add a gulp task to make launching easier. Create a gulpfile.js in the project root and add task. Example gulp task:
gulp.task('browser.sync', function () {
browserSync.init({
server: {
baseDir:"./www/"
}
});
// Note. you can add browserSync.reload to the tasks runner explorer array to make
// all browsers reload after a build is complete.
});
Use Task Runner Explorer to launch the gulp task manually or automatically.
If you are using phonegap to test your app, you may type "phonegap serve" in command line NOTE: your cd has to be your application file path.
Then you may see the ip address:port number which can be used in browser,android and ios platform.
Example:
You can create an IIS node, for example http://localhost/cordovaApp, I use this approach in one of my project and it's really conveniently.
I'm having issues debugging TypeScript in VS2013 Update 3. The breakpoints for the .ts files will not load. The associated .map files are generated and included in the project. I've tried the suggestion on Typescript 1.0 map files do not load and even specifying the location of the .map files explicitly in the TypeScript configuration for the project properties. None of it worked.
This doesn't seem to be a browser issue either as none of various browsers when run load the breakpoints. That rules out this issue on GitHub as well: https://github.com/Microsoft/TypeScript/issues/556
I have the most current version of Web Essentials, so all of the components are up to date.
How do I get TypeScript debugging to work in VS2013?
EDIT: Just to be clear I wish to debug via VSNET regardless of the browser. Meaning I would like to hit the VSNET breakpoints regardless of which ever browser I choose to start the app with (i.e. Chrome, FF, IE, etc.).
Taking into account you said you want to debug it inside VS2013 and not on a browser (which is what I prefer do it in, namely chrome), you need to use Internet Explorer.
You'll do the following
a) Go to IE Internet Options and UNCHECK these two options
b) On the top menu of VS2013 to Set Internet Explorer as the default browser for Debug activity:
c) Put a break-point on the constructor of your Typescript file:
d) Run your web application
e) That's it - your break-point is hit inside VS2013!
If you have any problems let me know, but this should suffice.
Regards
Edson
Well the issue is quite obvious but I suppose easily overlooked. One cannot debug minified files. The scripts I was trying to debug were all set up to be bundled and minified in the BundleConfig.cs class. I could leave the bundle assignments in the class, but just set it up so that during debug files are not bundled and minified:
#if (!DEBUG)
BundleTable.EnableOptimizations = true;
#endif
Another option, but one you will have to remember to toggle is to turn off minification all together:
BundleTable.EnableOptimizations = false;
This really should have been step 1 when I set up the app but had forgotten and didn't think to re-check. Now that I have bypassed it, the debugging works perfectly.
My Visual Studio 2010 debugger sometimes has a very strange behaviour...
Sometimes it doesn't stop at breakpoints, but when it stops, and I want to step into a method, the debugger just steps over it. Also the breakpoints in those over-stepped methods are ignored.
When this strange behaviour occurs, it also does not break on exceptions but simply ignores them.
I've tried to rebuild my project, reset the Visual Studio settings and disabled debugger settings like "Break only in my code", but nothing has worked.
How do I solve this problem?
Here are a couple of reasons and workarounds for why Visual Studio will avoid stepping into a particular method.
Just My Code is enabled. In certain circumstances the "Just My Code" setting will prevent you from stepping into a method / property. To avoid this you can disable "Just My Code" in the debugger options page (Tools -> Options -> Debugger -> Uncheck "Just My Code")
Symbols are not loaded for the target method. If the target method is a part of another DLL it's possible that symbols are not loaded for that DLL and hence Visual Studio will not be able to step into it by default. To force the symbols to load, open up the Modules view (Debugger -> Windows -> Modules), navigate to the DLL containing the method, right click and load symbols.
The method is explicitly marked with a debugger attribute such as DebuggerNonUserCode which causes the debugger to step over the method.
The method is actually a property or operator and you have "Step Over Properties and Operators" setting enabled (this is the default). This can be disabled via the debugger options dialog.
In my case it was "Step Over Properties and Operators" in Tools -> Options -> Debugger. Just had to uncheck that and after that everything was fine, I could step into.
Another source of confusion is iterator methods that use the yield return operator because they are rewritten by the C# compiler in such a way that stepping into them (F11) is kind of a "no-op".
You must wait for the iteration to occur to break into the method's code.
I've found the solution of the problem and it is really simple:
In my solution's build configuration, the "Build" check-box of the project where the methods are, that get over-stepped, was not checked. I checked it, and now everything works.
The most important thing to check is whether when trying to put a new breakpoint inside the method it refuses to step into, if the breakpoint is filled red liked the others, or half filled or has a special "look". If it does, hover over the breakpoint you created to find out why it isn't working.
If the breakpoint looks normal but still you can't seem to step into the method, try clearing the shadow copy cache: http://weblogs.asp.net/mreynolds/archive/2003/08/11/23576.aspx
Another thing to try is to make sure that you are indeed using the DLL you've just rebuilt by adding a MessageBox.Show (or something similar) to the method you can't seem to stop at, and make sure you get the box.
I struggled with this for a while. None of the answers given worked for me. I finally got it to work by doing the following:
Make sure the project is in debug mode (all projects)
From Windows go to a Command prompt and be sure to run as administrator
Navigate to c:\windows\syswow64\ (or folder where gacUtil.exe is located)
Run the following command (substitute path below to where your debug output version of the DLL is located.
gacutil /i "C:\Users\John\Documents\Visual Studio 2008\Projects\Project1\Project1\bin\Debug\MyAppDLL.dll"
You should get "Assembly successfully added to the cache"
Now run your project and you should be able to step into the DLL code.
WAG here, but I'd say you've referenced another project in your solution by BROWSING to a dll (project/bin/debug/mydll.dll) rather than by adding a "Project Reference." If you have multiple projects in your solution, remove ALL references to each project. Then, in the Add Reference dialog, hit the "add project reference" tab and select the project you wish to reference.
Project references are always updated on a new build. But if you, say, browse to bin/release and add a reference to a dll in that directory, when you switch to debug mode and add code and try to debug it, the old release version of the dll is loaded into the appdomain and VS won't be able to hit any breakpoints (you'll notice the breakpoints are empty circles and the tooltip will say something about the code not being loaded).
I have just found another reason for the problem, and a fix. I am creating a Windows Forms application using C++ in Visual Studio 2010. I am using the FreeType library and some code which depends on it and for various reasons this code has to be compiled with 'No Common Language Runtime Support' selected (Properties -> Configuration Properties -> General). I was not able to get breakpoints to be hit in this non-CLR code.
The fix is that the main app must be compiled with 'Common Language Runtime Support (/clr)', NOT 'Pure MSIL Common Language Runtime Support) (/clr:pure)'. That immediately solved the problem. I can now debug into, and hit breakpoints in, the non-CLR code, including the FreeType C code.
I have experienced the same recently. Not sure what I did exactly though. Try to physically clean up your solution, i.e. delete all bin directories from all projects of the solution. That usually helps to solve a lot of problems.
Try disabling "Require source file to be exactly matched" option in tools->options->debugging->general.
My solution was to create a new project and load all my .vb files into the new project. Solved all of my issues.
My problem was simple. I have multiple projects in the solution and I just need to set the project I am working with as Set As Startup Project.
I have a web project running in Visual Studio 2010 and target .Net framework 4. When I 'Build' the solution it will tell me the build was successful even though there are (known) errors in the code. If I open a page that has an error, the compiler will then pick up on the error and underline it in blue instead of red.
Is there a setting that would drive this kind of behavior? Any ideas on how to fix?
If you have multiple projects in your solution it is possible that one of them is not set to build. In your build output window did you see the name of the web project you are having issues with?
Also, check the build configuration manager to make sure you have it set.
If it's an MVC app, the view files (*.as{p,c}x) will not be compiled unless you explicitly enable it by passing /p:MvcBuildViews=true or enabling that flag in the project file for a given configuration.
I'm having similar (if not identical) problems with compiling an ASP.net 4.0 WebForm. I have a page that is a copy of an existing page in terms of markup, but the code-behind has not been created. As an example, the markup has an ASP:Button with a click event, but the event handler has not been declared in the codebehind yet. When I do a full Build/Rebuild/Clean etc., no errors are found. I open the page, and a compiler error is thrown. As far as I know I haven't made any changes to settings anywhere, just started doing this recently. Additionally, it appears that my break points aren't being caught anymore either. I'm not sure if the two are related, but they did start happening around the same time.