Typescript breakpoints not hit when debugging in WebStorm 7

Question

I am using Typescript SDK 0.9.1.1 and WebStorm 7. I have a .ts file with a file watcher transpiling its .js and sourcemap files. I also have an HTML file that looks like this...

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p id="output">5</p>
    <script src="HelloWorld.js"></script>
    <script>
        var u = new Utils();
        document.getElementById('output').innerHTML = u.plusOne(5);
    </script>
</body>
</html>

The plusOne function simply takes the number (in this case, 5) and returns that number plus one. My page, javascript and Typescript work fine, because the page says "6" when loaded.

I can set breakpoints in the .js file and they are hit (showing me the Typescript file's equivalent line) but if I set breakpoints in the original .ts file they are not. I've searched for this issue but my problem seems different from others' - I am running locally (not remotely) and I am setting the breakpoints in WebStorm, not Chrome's debug view.

In WebStorm, the Scripts tab shows only the .js and .html files. Should I be seeing more here? If that's the problem, how do I fix it? I've opened the debug configuration but I don't see a way to add the .ts file there.

Mattwmaster58 · Accepted Answer · 2023-05-31 14:58:16Z

9

Some of you might have ended up here from Google:

All I had to do was make sure that sourceMap was set to true in my tsConfig.json like so:

{
  ...
  "compilerOptions": {
    ...
    "sourceMap": true,
    ...
  },
  ...
}

edited May 31, 2023 at 14:58

answered Oct 9, 2018 at 3:08

Mattwmaster58

2,6004 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pat Dec 5, 2024 at 14:22

As the documentation states: Enables the generation of sourcemap files. These files allow debuggers and other tools to display the original TypeScript source code when actually working with the emitted JavaScript files. This allows the debugger to recognize the breakpoints correctly when actually working with the original .ts or .tsx files

lkee00 · Accepted Answer · 2013-10-11 21:08:29Z

1

Turns out this is due to an open bug in WebStorm. In practical terms, the workaround is to reload the HTML page from the browser (which is NOT the same as rerunning the HTML page in debug mode from WebStorm). If you do that then the breakpoints in the .ts file will be hit.

answered Oct 11, 2013 at 21:08

lkee00

1213 silver badges7 bronze badges

1 Comment

Flion Over a year ago

hmm same issue here, but not getting it to work. only way I get Webstorm to stop at all is by typing "debugger;" in the code, but still that only brings me to the .js file, not the .ts

Collectives™ on Stack Overflow

Typescript breakpoints not hit when debugging in WebStorm 7

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related