全部：
我是Angular2的新手，我发现在Chrome中调试比Angular1还要难（这只是我的感觉，当我按照Angular2官方网站上的教程进行操作时，大多数时候代码有错误，控制台输出来自 system.js 或 angular.dev.js 等，我不记得这些错误来自什么 js 文件，但一件事是大多数时候，它不能帮助指出错误的真正来源）。
我想知道在哪里可以找到有关如何在 Chrome for Angular2 中追溯错误的教程？
谢谢
【问题讨论】：
标签： angular
事实上，调试 Angular2 应用程序比 Angular1 应用程序要复杂一些，因为涉及到几个额外的机制：
此外，还需要其他工具，例如 SystemJS 来处理模块。
也就是说，您可以利用您的 IDE 和开发工具来帮助找出问题。
让我们对一些经典错误进行抽样。
导入一个不存在的模块
代码：
import {Component} from 'angular2/angular2'; // <-------
@Component({
selector: 'my-app',
template: `
(...)
`
})
export class AppComponent {
}
错误：
angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/angular2
Error loading http://localhost:3000/app/boot.js
说明：如果您查看“网络”选项卡，您将看到 http://localhost:3000/angular2/angular2 请求收到 404 状态代码，并且响应负载是 HTML。 SystemJS 尝试将此代码评估为 JavaScript。这就是您收到语法错误的原因。
当找不到模块时，SystemJS 会尝试从 URL 加载它。如果没有相关配置（在package块内，map块内），它只是使用/
Angular2 捆绑的 JS 文件丢失
代码：
import {Component} from 'angular2/core';
import {Http} from 'angular2/http'; // <-----
@Component({
selector: 'my-app',
template: `
<div>Test</div>
`
})
export class AppComponent {
constructor(private http:Http) {
}
}
错误：
angular2-polyfills.js:1243 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/boot.js
解释：和上一个问题差不多。当您添加 http.dev.js 文件时，angular/http 模块会自动使用System.register 在 SystemJS 上注册。如果它不存在，SystemJS 会尝试使用 HTTP 请求加载它。
加载模块的 SystemJS 配置错误
代码：
import {Component,Inject} from 'angular2/core';
import {TranslateService,TranslateStaticLoader,TranslateLoader} from 'ng2-translate/ng2-translate';
@Component({
selector: 'first-app',
template: `
(...)
`
})
export class AppComponent {
constructor(translate:TranslateService) {
}
}
错误：
TypeError: Cannot read property 'getOptional' of undefined at runAppInitializers (localhost:8000/angular2.dev.js:12628:25) at PlatformRef.initApp
解释：在这种情况下，错误消息没有给出提示。我们需要测试一下，发现问题是在组件构造函数中添加translate:TranslateService时出现的。所以它与ng2-translate 的加载有关，因此可能与它在 SystemJS 中的配置有关。看到这个问题：ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)。
导入中有错误的元素
代码：
import {Component1} from 'angular2/core'; // <-----
@Component1({
selector: 'my-shop',
template: `
(...)
`
})
export class AppComponent {
}
错误：
angular2-polyfills.js:1243 Error: core_1.Component1 is not a function(…)
解释：Component 不是 angular2/core 模块导出的东西。当然，这里很明显，但我们在错误消息中没有非常有用的提示。在大型代码库中很难找到。对于这样的用例，您应该利用您的 IDE（即使在带有 TypeScript 插件的 Sublime 中），因为它会显示错误。这是我在这种情况下遇到的错误：
Module '".../node_modules/angular2/core"' has no exported member 'Component1'. Line 16, Column 16
执行处理时出错。
代码：
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<div>Test</div>
`
})
export class AppComponent {
constructor() {
this.test.test();
}
}
错误：
angular2.dev.js:23083 TypeError: Cannot read property 'test' of undefined
at new AppComponent (app-component.ts:33)
at angular2.dev.js:1412
at Injector._instantiate (angular2.dev.js:11453)
解释：我认为这是很容易修复的错误，因为您在 TypeScript 文件中有发生错误的行。不要忘记启用sourceMap 以便能够在编译的 JS 文件和 TypeScript 源文件之间使用行映射。
使用 ES6 代替 TypeScript
代码：
@Page({
templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
constructor(nav: NavController){
this.nav = nav;
}
}
错误：
/app/pages/list/list.js Module build failed: SyntaxError: /focus/projects/ionic-todo/app/pages/list/list.js:
Unexpected token (10:17) 8 | 9 | export class ListPage {
10 | constructor(nav: NavController){ | ^ 11 | this.nav = nav; 12 | 13 | this.items = [
说明：看来问题出现在:字符上的构造函数参数的定义级别。 ES6 支持类但不支持方法级别的类型...请参阅此问题：Ionic 2 Syntax Error While Compiling TypeScript
【讨论】：
来自 Rangle.io 的Augury 现在也是官方支持的用于 Angular 2 调试的 Chrome devtool 扩展。
这是一篇更深入地探讨该主题的文章，Debugging Angular 2 Applications from the Console
【讨论】：
您可以参考这个链接，它将为您提供在 chrome 中调试 Angular2 的完整指南，这真的很有帮助。
【讨论】：
对于 chrome 用户，您可以使用 chrome 提供的开发者工具调试您的代码。只需按F12键即可打开它
点击此链接查看图片->Debugging code of angular 2 using chrome developer tools
打开开发者工具后，转到源选项卡， 当 Angular 应用程序运行时，你所有的 Angular 文件都放在 webpack 文件夹中。您可以在 Angular 组件文件中使用断点来调试您的代码。
【讨论】：
Augury 称赞 DevTools
安装 Augury
安装 Augury 的最佳方式是从 chrome web store 安装。从侧面板中选择 Extensions，在搜索字段中输入“Augury”，然后按 Enter。
当您单击“添加到 Chrome”时，将打开一个弹出窗口。选择“添加扩展”以完成该过程。插件安装成功后，浏览器地址栏旁边会出现一个预兆图标。
占卜图标提供更多信息。立即单击图标以了解它是什么。
使用占卜
要开始使用 Augury，您必须在浏览器中运行 Angular 应用程序以进行检查。如果您从未调试过 JavaScript 应用程序，您可能不知道每个现代 Web 浏览器都直接在浏览器中提供了一个调试环境。 DevTools，使用以下快捷方式打开调试环境：
打开 DevTools 后，您会在最右侧找到 Augury 选项卡。
占卜特征
我们将快速介绍 Augury 中可用的主要功能。这是为了熟悉这些功能以及如何在需要时找到它们。
可见的第一个视图是组件树，它显示了已加载的属于应用程序的组件。
【讨论】：