Angular项目中为什么不能在开发者工具中进行Debug?_angular debug

概述       

         在Angular项目中，我们通常可以通过浏览器的开发者工具（如Chrome开发者工具）进行调试。如果在Angular项目中无法通过开发者工具进行调试，可以从下面几个方面找原因：

1. Source Maps未启用：确保在构建项目时启用了Source Maps。Source Maps是一种文件，它将编译后的JavaScript代码映射回原始的TypeScript代码，以便在开发者工具中显示原始代码而不是编译后的代码。您可以在angular.json或angular-cli.json中的配置中启用Source Maps。

2. 断点未命中：确保在您希望调试的代码中设置了断点。如果断点未命中，可能是因为代码路径不正确或代码没有被执行。

3. 错误导致调试器停止：如果应用程序中存在错误，可能会导致调试器停止执行。确保应用程序没有任何错误，并且可以正常运行。

4. 缓存问题：有时候浏览器会缓存JavaScript文件，导致不会加载最新的代码。可以尝试清除浏览器缓存或者在开发者工具中禁用缓存。

5. 调试器设置问题：确保开发者工具设置正确，例如断点设置、监视变量等。

详解第一点 ：设置如何启用Source Maps

        在Angular项目中，可以通过在angular.json文件（Angular CLI 6及更高版本）或angular-cli.json文件（Angular CLI 1.x版本）中配置来启用Source Maps。

在angular.json中

1. 打开angular.json文件，这个文件通常位于项目根目录下；
2. 在文件中找到下面这个路径projects > [your-project-name] > architect > build > options部分；
3. 确保sourceMap属性的值为true，如下所示：

   "sourceMap": true
   

4. 保存文件并重新构建项目。

在angular-cli.json中

1. 打开angular-cli.json文件，该文件通常位于项目根目录下。
2. 找到apps > [your-app-name] > sourcemap部分。
3. 确保sourcemap属性的值为true，如下所示：

   "sourcemap": true
   

4. 保存文件并重新构建项目。

        启用Source Maps后，Angular将会生成与编译后的JavaScript文件对应的Source Maps文件，这样在浏览器的开发者工具中就可以将编译后的JavaScript代码映射回原始的TypeScript代码，方便调试和定位问题。