角度2错误和Typescript - 如何调试？ [英] Angular 2 Errors and Typescript - how to debug?

问题描述

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

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

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

解决方案

假设你使用Chrome，你可以放您的控制台的来源标签中的断点。这些断点可以在ts文件上设置。如果您需要js文件的信息，您可以在控制台设置中取消选中Javascript源代码：这将允许您在js文件中放置断点。

在断点上，你可以做平常的（手表，间谍，堆栈跟踪等）。您还可以在控制台中直接使用本地变量来编写js，例如：

 函数b（）{
 var c = 1; 
 //如果在这里放置一个断点，并在控制台中输入c，则会写入1
} 
  

具体在角度2中，您可能需要在其库中的throw e行中添加断点，您将获得更详细的堆栈跟踪。如果您点击堆栈跟踪中的...，您将可以访问导致错误的文件。

这是针对实际的错误。现在，对于性能，在时间轴选项卡上，您可以单击左上角的记录按钮。完成录制后（点击完成），您将看到CPU的使用情况。您可以放大时间轴中的事件，以查看代码的哪个部分使用的资源太多。

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

如果您需要调试iframe，控制台中会显示一个顶部框架，您可以将其设置为您想要的iframe。

如果我忘记了什么重要，请问：）。

I've just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack traces, compile errors, and - on larger projects - lots of test cases. However, much of this doesn't seem to directly translate to the world of web-dev; particularly debugging my code that's interacting with Angular2's libraries.

Could anyone suggest any approaches that I can take to debug code working with Angular2? Specifically; how can I see what parts of my HTML/TS is causing issues? I've checked the console, from which I can see that I've broken Angular2, but it doesn't seem much more informative from that.

Just to clarify; I don't want help for this specific instance. I'd like to learn how to diagnose+fix these problems myself.

解决方案

Assuming you're using Chrome, you can put breakpoints in the "sources" tab in your console. Those breakpoints can be set on the ts files. If you need informations from the js file, you can uncheck Javascript sourcemaps in the console settings: this will allow you to put breakpoints in the js files.

On a breakpoint, you can do the usual (watch, spies, stack trace, etc...). You can also write js in the console accessing local variables directly, for instance:

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

Specifically in angular 2, you might want to add breakpoints in the "throw e" lines in their library, you'll get more detailed stack traces. If you click on the "..." in their stack traces, you'll get access to your file that caused the error.

That's for actual bugs. Now, for performance, on the "timeline" tab, you can click on the "record" button on the top left. Once you're done recording (click "finish"), you'll see CPU usage. You can zoom on events in the timeline to see which part of the code is using up too much resource.

You can also track memory by checking the "memory" checkbox.

If you need to debug an iframe, there is a select box in console saying "top frame" which you can set to whichever iframe you want.

If I've forgotten anything important, just ask :).

这篇关于角度2错误和Typescript - 如何调试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！