Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug typescript code, which is bundled using webpack in vscode/vs2015

Tags:

People also ask

How do I use a breakpoint in Visual Studio code TypeScript?

If you run that configuration, your browser will launch with your web page. Open helloweb. ts in the editor and click the left gutter to add a breakpoint (it will be displayed as a red circle). Press F5 to start the debug session, which launches the browser and hits your breakpoint in helloweb.

How do I debug a TS file in Chrome?

To debug TypeScript, we need to create an index. html and inside that we need to link our findbug. js file, this is because we will use the Chrome DevTools and we will be able to debug our TypeScript file. After that, we need to install live-server or use the live-server extension for VS Code.


Here is my workflow.

I have moduled typescript code. Imports like the following: import { Logger } from './../data/logger';

Then I bundle it using webpack (precisely - webpack-stream) with ts-loader. I run webpack using gulp.

So I have the following workflow: gulp --> webpack (ts-loader) --> bundled *.js with source-maps. I also use the browsersync to run simple server and auto update the page.

I can debug this code from the browser, but I can't from vscode (using Chrome Debugging for VS Code, or even from vs2015.

What could cause the problem ?