Search code examples
javascripthtmlwebstorm

WebStorm : debugging typescript

Issue updated. Please check the edit

I want to use the debugger included in Webstorm to run my project. I'm using Angular2 and TypeScript. I need to place breakpoints into my typescript files.

Basically, my index.html just imports some .js files and starts my app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title></title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

    <script src="build/core/system.config.js"></script>
    <script src="build/core/moduleLoader.js"></script>
    <script src="build/core/bootstrap.js"></script>
    <script src="../node_modules/angular2/bundles/router.dev.js"></script>

    <script>
        bootstrap();
    </script>
</head>
<body>

    <app-view>Loading...</app-view>

</body>
</html>

bootstrap is defined as follow : 

const bootstrap:()=>Promise<void>= async function() {
    await ModuleLoader.loadAll();
    System.import('core/app').then(null, console.error.bind(console));
};

window.bootstrap = bootstrap;

When I run my index.html in debug mode, an error is thrown, bootstrap() is not defined.

When I run the app inside a browser, it works well. Have I missed some configuration ?

I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.

EDIT

Maybe a usefull information :

I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.

Solution

  • You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.

    enter image description here

    Another important point: make sure you generate source maps when compiling your TypeScript code.