如何用Vscode调试跟踪代码?

调试代码的前置工作

1. 安装 Angular CLI 和 Node.js

确保你的开发环境已经安装了 Node.js 和 Angular CLI。你可以通过运行以下命令来安装 Angular CLI（如果尚未安装的话）：

npm install -g @angular/cli

2. 安装 Chrome Debugger 扩展（可选）

虽然不是必需的，但安装一个浏览器的调试扩展（如 Chrome Debugger）会让调试过程更加方便。在 Visual Studio Code 中，你可以通过扩展商店搜索并安装"Debugger for Chrome"扩展。

3. 创建或打开你的 Angular 项目

使用 Angular CLI 创建一个新项目或打开一个现有项目。如果是创建新项目，可以使用以下命令：

ng new your-project-name
cd your-project-name

4. 创建配置文件 launch.json

在 Visual Studio Code 中，打开你的 Angular 项目，然后按以下步骤创建调试配置：

• 在侧边栏中点击带虫子图标的"Run and Debug"按钮。
• 点击"create a launch.json file"链接。
• 选择环境时，如果你已经安装了 Chrome Debugger 扩展，选择"Chrome"。否则，选择"Node.js"（对于 Angular 项目，推荐使用 Chrome Debugger）。

5. 配置 launch.json 文件

编辑 launch.json 文件，为你的 Angular 应用添加一个配置。如果你选择了 Chrome Debugger，配置可能看起来像这样：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

确保 "url" 匹配你的 Angular 应用运行时的 URL（Angular CLI 默认是 http://localhost:4200）。

6. 启动你的 Angular 应用

在终端中运行以下命令以启动你的 Angular 应用：

ng serve

7. 启动调试会话

• 确保你的 Angular 应用正在运行。
• 回到 Visual Studio Code，确保你的 launch.json 配置文件已正确设置。
• 在"Run and Debug"视图中，从下拉菜单中选择你刚才创建的配置（例如，"Launch Chrome against localhost"）。
• 点击绿色的播放按钮（或按 F5）启动调试会话。

此时，如果一切设置正确，Visual Studio Code 应该会自动打开一个新的 Chrome 窗口（或你选择的浏览器），并且开始调试你的 Angular 应用。你现在可以设置断点、观察变量、步进代码等。

记得，调试 Web 应用可能需要一些实践来熟悉工具和过程。如果遇到问题，检查你的 launch.json 配置、确保 Angular 应用正确运行，以及确保已正确安装和配置了所有必要的扩展。 要在 Visual Studio Code 中跟踪到你点击按钮时触发的具体代码，你可以通过以下步骤操作：

8. 理解事件绑定

Angular 应用中，按钮点击通常通过事件绑定来处理，如 (click)="yourClickFunction()"。首先，确保你知道按钮点击是触发哪个函数。

9. 设置断点

在 Visual Studio Code 中，打开包含你的点击事件处理函数的 TypeScript 文件。找到对应的函数或方法，比如 yourClickFunction()。

在该函数的第一行（或你想要开始跟踪的特定行）左侧点击，你会看到一个红色的圆点出现，这表示在这里设置了一个断点。当你的应用运行并且该代码行被执行时，程序会在这里暂停，允许你检查当前的程序状态、变量值等。

10. 运行调试会话

按照前面的说明启动你的 Angular 应用（ng serve）并开始调试会话（按 F5 或点击 Visual Studio Code 的"Run and Debug"视图中的绿色播放按钮）。

11. 触发事件

在浏览器中，执行触发你设置断点的按钮点击事件。如果一切配置正确，Visual Studio Code 会在你设置断点的地方暂停执行。

12. 使用调试工具

现在，Visual Studio Code 的调试工具栏会被激活，你可以：

• 查看变量：在左侧的"变量"区域，你可以看到当前作用域中的变量及其值。
• 单步执行：使用工具栏上的"单步执行"（Step Over）、"单步进入"（Step Into）、"单步跳出"（Step Out）功能来逐行执行代码。
• 观察表达式：你可以添加表达式到"观察"区域来监视特定变量或表达式的值随代码执行而变化。
• 调用堆栈：查看调用堆栈，了解当前执行点是如何从其他函数或方法调用到达的。

13. 分析和修改

利用调试会话，你可以理解和分析问题、修改代码并即时测试修改。如果需要调整断点位置，简单点击以移除旧的断点并在新位置添加断点。

通过这种方式，你可以精确地跟踪和理解按钮点击事件如何触发特定代码的执行，进而帮助你调试和优化你的 Angular 应用。

如何更有效地去调试自己的项目代码

当你在调试 Angular 应用时，很容易遇到步进到框架或库代码中，而非你自己的项目代码。这通常不是你想要的，因为你更关心的是如何通过自己的代码逻辑来解决问题。为了避免进入非项目代码，你可以使用 Visual Studio Code 的"跳过"功能，通过配置来忽略特定的文件或目录。下面是如何设置的步骤：

1. 使用 skipFiles 属性

在你的 launch.json 配置文件中，你可以使用 skipFiles 属性来指定调试器应该跳过的文件或路径。这样，当你使用调试功能（如"单步执行"）时，调试器不会进入这些指定的文件或路径中。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**"
            ]
        }
    ]
}

在这个例子中，skipFiles 配置跳过了所有 node_modules 目录下的 JavaScript 文件，以及 Node.js 内部的一些文件。这意味着当你在调试时，调试器将不会停在这些文件中，让你能更专注于你自己的项目代码。

2. 动态添加跳过的文件

除了在 launch.json 中静态配置之外，Visual Studio Code 也允许你在调试会话中动态地添加或移除跳过的文件。如果你发现自己不小心进入了一个不想调试的文件，你可以：

• 在调用堆栈视图中找到该文件。
• 右键点击文件，并选择"跳过该文件"。

3. 理解和调整

理解和调整你的跳过文件列表可能需要一点时间和实践，因为你可能需要根据项目的不同引入的库和框架进行调整。如果你发现有特定的库代码频繁出现在调试会话中，考虑将它们添加到 skipFiles 中。

结论

通过合理配置 skipFiles 和利用 VS Code 的调试工具，你可以有效地将调试焦点保持在自己的项目代码上，避免深入到底层库或框架代码中，从而提高调试效率和体验。这让你能更快地定位和解决问题，而不是在不相关的代码中迷路。