Chrome调试

1. Augury： Angular专用的chrome 调试插件1.1 Augury安装
augury.angular.io/
Augury是一个Chrome插件，直接安装即可。1.2 使用方法
打开浏览器控制台，你会看到Augury菜单。
1.2.1 查看Component结构
Angular调试 - 图1
1.2.2 查看属性/方法/依赖注入/源码
还可以双击修改属性，会实时反馈到页面上。Angular调试 - 图2
1.2.3 Component关系图
Angular调试 - 图3
1.2.4 路由结构
可以查看完整的路由关系、路由详细等：Angular调试 - 图4
2. Sources调试

熟悉JS调试的应该都使用过

  1. Sources调试

。

按

  1. F12

打开浏览器控制台，选择

  1. Sources

标签，然后在左侧的树中选择

  1. webpack://

节点展开后进入源码目录设置断点即可

注意：

  • 如果用的 Angular CLI，那么 ng serve 默认就提供完整的 sourcemap，直接点鼠标打断点就行
  • 如果是自己配置的 Webpack 环境（Devtool），需要选择带 module 版本的 sourcemap 才会把 bundle 中的内容映射回源文件，例如 cheap-module-eval-source-map。