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".
Related
In my company we recently adopted sourcemaps generation in our ts -> js -> minification flow.
Without those maps of course code is almost unreadable/untestable, but as far as I can see those maps don't give me the opportunity to live-edit the code and test it directly in chrome: i edit/save it, but the js interpreter run as if I don't.
This force me to have a local copy of the project and run it, instead of try a fix directly in remote.
Is possible in chrome to edit sourcemapped typescript and run it?
No, this isn't possible because Chrome doesn't have access to / knowledge of the specific TypeScript compiler / config used by your project.
Chrome Devtools does have Workspaces which allows you to map files to a local folder. This would mean that if you have a process watching the TypeScript files for changes, you can live-edit in Chrome which in turn triggers the local TypeScript compiler.
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
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.
I am new to Eclipse - inherited unfinished project after employee who left. I downloaded war file and by trial and error installed missing components till it actually built app. I can edit java files, but when I try to open java script files, I get error:
Could not open visual page editor
no more handles
could not load SWT library
no swt-xulrunner-gtk-4234 in java.library.path
Linux Fedora 17, Eclipse Juno, SWT is reported as installed by yum. ~/.swt/lib/ is empty
It looks like you do not have the proper library to load browser widgets in your Eclipse, that is what swt-xulrunner refers to. This FAQ should help you.
What it is saying is that you need to start Eclipse with the following system property:
-Dorg.eclipse.swt.browser.XULRunnerPath=<path_to_xulrunner>
There should be a xulrunner already included in your Eclipse, but if not, you will need to download a new one from here.
Also, it could be that you are using the Ubuntu pre-packaged Eclipse. I would avoid doing that. This pre-packaged eclipse often has some missing things in it. I'd instead recommend downloading directly from Eclipse.org
My goal is to create a project (don't know yet if it has to be html5 or java project) in netbeans, add js file with any line of code and then press compile it and run.
I wuld like to have my js files compile to *.class files as it can be done via js console according to rhino tutorial on mozilla page.
But as i said i would like to have it via pressing run/compile button in my netbeans
Currently i'm using netbeans 7.3(i'm honestly open to change version if necesarry) and windows
I already try to do many things but only 2 are worth describing:
-edit build.xml file to use js.jar from rhino
-just run java project with javascript files - according to some articles it should be possible but in my case in just left js files uncompiled
Please help
Aleksandra