Question

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

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

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

Answer 1

假设您使用的是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。

如果我忘记了任何重要的事情，请问：）。

Answer 2

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

Answer 3

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

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

我还经常建议人们做免费的Code School course on Discover Devtools，这也很好。

对于TypeScript，还要确保启用源映射。您可能知道TypeScript不是由浏览器直接执行的，而是将其“编译”（或称为“已编译”）到JavaScript中。也就是说，您可能不想调试已编译的JS，而是调试您编写的TypeScript代码。要启用源映射，请在tsconfig.json：

中设置正确的标记

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

Answer 4

如果您来自Java世界，那么您很有可能已经使用JetBrains的IntelliJ IDEA。如果是这样，那么可以使用与Java应用程序相同的接口直接在IDE中调试JavaScript（和TypeScript）应用程序。

JetBrains对此主题有some documentation可能会有所帮助。

正如其他答案所述，您也可以使用Chrome Inspector的调试器。就个人而言，我更喜欢使用IntelliJ来代替。

如果您只是想了解工作流程的示例，请查看此Github project that shows the use of Webpack with Angular2。

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

4 个答案: