Debug JavaScript code in Visual Studio bundled with WebPack - javascript

I'm new to JS development and experience issues with debugging JS code in Visual Studio 2013. JS part of our web app is bundled into a single app.bundle.js file by WebPack, this file is automatically updated everytime any js file changes (we use special watch script which uses npm).
I'm able to debug JS code using Chrome and debugger; derecitve. It shows correctly mapped file under such kind of paths "webpack:///./Scripts/". It means that WebPack creates mapping correctly. But I'd like to debug directly from VS using Call Stack, break points, etc.
Any ideas?
Thanks in advance!

There is a a series of ongoing issues with Debugging webpack bundles Visual Studio. Depending on your webpack configuration and your dependency versions, this Webpack plugin may work for you. Be sure to check out the issues where can you see the ongoing conversation. If you are doing anything with Babel / ES2015+, you probably will want to upgrade to Visual Studio 2015 for syntax support.

Related

Why does Debugging of TypeScript in VS 2015 makes a dynamic file?

I am currently working on a project with AngularJS, ASP.NET and TypeScript. The problem is to get TypeScript debugging working with the original file in VS 2015. Source-maps are created and loaded from the Browser, and the breakpoint hits, but not in the original file, but in a dynamic file, which has the same code as the original. It's very painful, because in the dynamic files, you don't have any data tooltips. I have installed the latest TypeScript MSBuild (2.2.1) from NuGet and the transpiling step is working. My source-maps, JS and TS files are on the same project hierarchy in VS and the source-maps look like this:
{"version":3,"file":"LinksController.js","sourceRoot":"","sources":["LinksController.ts"],"names":[],"mappings":"..."}
My hierarchy on the browser is vstatic/[MD5Hash of file]/[jsFile]. I have searched a lot in the web, tried something like changing the 'checking for new versions of stored pages' option in IE, that didn't work. I couldn't find any solution regarding TypeScript. I use IIS, IE11 and VS 2015 Update 3.
Thanks for your time!

Recommended way to add Typescript to an existing asp.net 4 Webforms project

I am working on quite an old asp.net 4.0 Webforms project in Visual Studio 2015.
I want to start using TypeScript instead of Javascript for some of the client side code. I have used TypeScript in other projects outside of Visual Studio (e.g. using Visual Studio Code, and the node tools such as npm, gulp etc)
Now, I am trying to see how to use the TypeScript in Visual Studio, and see quite a few conflicting posts, and various versions of TypeScript / VS referred to.
I have added a TypeScript file to VS, and VS reported it now supporting Typescript and added a few lines to the project file. A have also added the VS extension for Typescript (version 2)
I build my project and get the .js and .map files. The files are in CommonJS format so I need to either load these or convert using a some sort of bundling.
This is where I don't know where to go. Also, I have read conflicting reports on how to configure the Typescript (e.g whether or not Visual Studio will use a tsconfig.json file)
In non asp.net projects I have use gulp with the gulp-typescript browserify etc gulp plugins.
Do I do the same thing in my asp.net project, or is there some other way to bundle and convert the JS to browser usable code?
If I use the gulp method, I assume this then means I will now not be using the TS compiler installed via the Visual Studio plugin (so what is the point of this if it emits CommonJS formatted cod that I can't use in the browser?
Thanks in advance for any suggestions here!
Yes, Web forms can do TypeScript and Gulp. Below are some steps:
Configure npm
Configuring Bower
Configure Bootstrap and My CSS with Gulp
Update the Master page
Configure Gulp-Watch
A complete solution can be found here.
For TypeScript ,
Unless you have a .ts file created with "Add New Item" in your project, the option "TypeScriptCompile" on the "Build Action" of the file properties is not available and it raises an exception. After the first file is created, then you find this option and can manually set it to a .ts file.
The option "Typescript file" is not available in the "Add File" options unless you have a .ts file created with "Add New Item" in your project and you are in a "Scripts" folder (if you name differently the folder where you want to add this file, this option wont be available). Of course you can add a .ts file from "Add New Item".
Please read this SO thread Type Script Web Forms

node typescript client-side debug

Is is possible to debug (breakpoints, watches) client-side .ts typescript files from visual studio (2015) directly? Most of the related issues that I have found on google and stackoverflow suggest using other browser devtools such as chrome. Is it possible to do it in visual studio?
When I create a .ts script (say index.ts), it will be transpiled into a index.js which will then be referenced from the corresponding index.html file in the script tag.
How can I set breakpoints in the .ts file (although it is the .js which is referenced?)
It is possible with IE. You have to set "Browse with" to Internet Explorer and in the project properties/web unchecked all debuggers. Than you should be able to debug client-side TS in VS.
I figured out that I can debug in visual studio but launching a a new debug session from internet explorer: menu->view->external script debugger which will start a new visual studio ide with all my files (.js and .ts mapped) loaded. I just have to make sure that the .js and .ts files are in the same directory (example: ./public/js/ ). It is not a perfect solution (for example bringing the cursor over a variable does not show the variable value. You must manually open the watch window...) But it allows me to step through my .ts files thus keeping a unified development environment: typescript with node.js on the server, typescript on the client-side within the same solution
You might try with this HTML Application with TypeScript project template from Web Essentials 2015 extension, as suggested in this post from Telerik blog.
If that works, it seems just a matter of usual VS scenario "set breakpoint; hit F5".

Can I fail asp.net visual studio 2013 project builds if there's syntax errors in javascript files?

Sometimes I have syntax errors underlined in my .js files in my Asp.net MVC project. I noticed that the project still builds though, and when I build then debug I waste a few valuable seconds navigating to the place that runs that code in order for it to fail (fairly silently at that) in the browser.
Can I tell visual studio to fail the build if it detects an error in my javascript syntax?
If not, is there a command line tool out there that can detect javascript syntax errors? If so, I can call it post-build.
Thanks.
There's JSLint.NET. It's a .NET wrapper around JSLint and there is a NuGet Package which installs an MSBuild target into your project for JS validation:
https://jslintnet.codeplex.com/
Install the package into your MVC project using:
PM> Install-Package JSLintNet.MSBuild
I just tried it and it works nicely. You'll want to set up a JSLintNet.json settings file in your project to ignore third party js libraries like jQuery and Bootstrap e.g.
{
"ignore": [
"\\Scripts\\Libraries\\"
]
}

Web Essentials, command line utility to bundle script files?

I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.

Categories