Question

我正在使用Typescript SDK 0.9.1.1和WebStorm 7.我有一个.ts文件，文件监视器会转换其.js和源映射文件。我还有一个看起来像这样的HTML文件......

<!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>

plusOne函数只取数字（在本例中为5）并返回该数字加1。我的页面，javascript和Typescript工作正常，因为页面在加载时显示为“6”。

我可以在.js文件中设置断点并且它们被命中（向我显示Typescript文件的等效行）但是如果我在原始的.ts文件中设置断点则它们不是。我搜索过这个问题，但我的问题似乎与其他问题不同 - 我在本地运行（不是远程），我在WebStorm中设置断点，而不是Chrome的调试视图。

在WebStorm中，“脚本”选项卡仅显示.js和.html文件。我应该在这里看到更多吗？如果这是问题，我该如何解决？我打开了调试配置，但是我没有看到在那里添加.ts文件的方法。

Answer 1

原来这是由于WebStorm中的open bug。实际上，解决方法是从浏览器重新加载HTML页面（这与从WebStorm以调试模式重新运行HTML页面不同）。如果这样做，那么.ts文件中的断点将被命中。

Answer 2

对于那些通过Google来到这里的人：

我要做的就是确保在sourceMap中将true设置为tsConfig.json，就像这样：

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

在WebStorm 7中调试时未打到Typescript断点

2 个答案: