我使用的是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文件的方法。
事实证明这是由于WebStorm中的open bug。实际上,解决方法是从浏览器重新加载HTML页面(这与从WebStorm以调试模式重新运行HTML页面不同)。如果这样做,那么.ts文件中的断点将被命中。
对于那些通过谷歌来到这里的人:
我所要做的就是确保sourceMap
在我的true
中设置为tsConfig.json
,如下所示:
{
...
"compilerOptions": {
...
"sourceMap": true,
...
},
...
}