Angular 2错误和Typescript - 如何调试？

我刚开始学习Angular2和Typescript + Javascript的项目.我来自Java背景,我调试项目的方法通常是堆栈跟踪,编译错误和 - 在大型项目上 - 大量测试用例的组合.然而,其中大部分似乎并没有直接转化为web-dev的世界; 特别是调试我与Angular2的库交互的代码.

任何人都可以建议我可以采取任何方法来调试使用Angular2的代码吗？特别; 如何查看HTML/TS的哪些部分导致问题？我已经检查了控制台,从中我可以看到我已经破坏了Angular2,但它似乎没有更多信息.

只是为了澄清; 我不想要这个具体实例的帮助.我想学习如何诊断+自己修复这些问题.

假设您使用的是Chrome,则可以在控制台的"来源"标签中添加断点.可以在ts文件上设置这些断点.如果您需要来自js文件的信息,您可以在控制台设置中取消选中Javascript源图:这将允许您在js文件中放置断点.

在断点处,您可以执行常规操作(监视,间谍,堆栈跟踪等).您还可以在控制台中直接访问本地变量来编写js,例如:

function b(){
    var c = 1;
    // if you put a breakpoint here and type c in the console, it will write "1"
}

特别是在角度2中,您可能希望在其库中的"throw e"行中添加断点,您将获得更详细的堆栈跟踪.如果单击堆栈跟踪中的"...",您将可以访问导致错误的文件.

这是实际的错误.现在,为了提高性能,在"时间轴"选项卡上,您可以单击左上角的"记录"按钮.完成录制后(单击"完成"),您将看到CPU使用情况.您可以缩放时间轴中的事件,以查看代码的哪一部分耗尽了太多资源.

您还可以通过选中"内存"复选框来跟踪内存.

如果您需要调试iframe,控制台中会有一个选择框,上面写着"顶部框架",您可以将其设置为您想要的iframe.

如果我忘记任何重要的事情,请问:).

打开Web开发人员控制台,转到"来源"部分.按"cntrl + p".将打开一个搜索框,其中键入".ts"并找到您的文件或直接搜索您的文件,如"myfile.ts".打开它,你可以直接在代码中放置断点,就像我们在js文件和Voila中放置断点一样,你可以调试Typescript.

我认为这不仅适用于Angular2,但鉴于您来自Java背景,我认为这更像是"我如何成功调试JavaScript Web应用程序".

与此相关,我强烈建议您查看Chrome Devtools页面(假设您使用内置非常整洁的devtools的Chrome).
在该页面上有很多有用的教程.特别是在你的情况下,可能是关于调试JavaScript的文章,它有一些很酷的标签,如条件调试,打破DOM修改,甚至打破捕获/未捕获的异常等.

我还经常建议人们在Discover Devtools上免费开设Code School课程,这也很不错.

对于TypeScript,还要确保启用源映射.您可能知道TypeScript不是由浏览器直接执行的,而是将其"编译"(或称为"已编译")到JavaScript中.也就是说,您可能不想调试已编译的JS,而是调试您编写的TypeScript代码.要启用源映射,请在以下位置设置正确的标志tsconfig.json:

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}