如何在Visual Studio Code中调试Angular CLI应用程序

介绍 (Introduction)

In this post, you’ll create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

在本文中，您将创建一个Angular CLI应用程序，然后添加配置以在Visual Studio Code中对其进行调试。

TLDR-对于Angular CLI应用程序，在VS Code中创建调试配置，安装Debugger for Chrome扩展程序，然后在调试模式下运行。 (TLDR - For an Angular CLI application, create a debug configuration in VS Code, install the Debugger for Chrome extension, then run in debug mode.)

步骤1 –创建一个入门项目 (Step 1 – Creating a Starter Project)

To be able to test an Angular CLI application, you need an Angular CLI application. This tutorial provides the basic steps, but for more reference on how to get started look at the Angular CLI page.

为了能够测试Angular CLI应用程序，您需要一个Angular CLI应用程序。 本教程提供了基本步骤，但有关如何入门的更多参考，请参阅Angular CLI页面 。

First, you’ll need to install the Angular CLI globally:

首先，您需要全局安装Angular CLI：

• npm install -g @angular/cli

  npm install -g @angular / cli

Once the installation completes, you can use Angular CLI to generate your new application. Execute the following command:

安装完成后，您可以使用Angular CLI生成新应用程序。 执行以下命令：

• ng new my-app
  ng new my-app

This creates the my-app directory and installs the Angular dependencies.

这将创建my-app目录并安装Angular依赖项。

Open the project in VS Code and you’ll see the following:

在VS Code中打开项目，您将看到以下内容：

In your Terminal, execute the following command to run your application and make sure everything works:

在终端中，执行以下命令以运行您的应用程序，并确保一切正常：

• ng serve
  ng服务

You’ll see the following output:

您将看到以下输出：

第2步–创建调试配置 (Step 2 – Creating Your Debug Configuration)

To debug your application, you’ll create a debug configuration. Debug configurations are saved in a launch.json file which is stored inside of a .vscode folder, which is where you’ll find all of the configuration files for Visual Studio Code

要调试您的应用程序，您将创建一个调试配置。 调试配置保存在launch.json文件中，该文件存储在.vscode文件夹中，您可以在其中找到Visual Studio Code的所有配置文件。

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the Extension tab in Visual Studio Code:

在创建调试配置之前，您需要安装Debugger for Chrome扩展程序。 在Visual Studio Code的“ 扩展”选项卡中找到并安装此扩展：

After installing, reload VS Code and reopen your project.

安装后，重新加载VS Code并重新打开您的项目。

Now, to create a debug configuration, you can open the debug panel. It looks like a “bug” and it’s located on the left panel of the user interface. At the top of the debug panel, you’ll see a dropdown that says No Configurations.

现在，要创建调试配置，您可以打开调试面板。 它看起来像个“错误”，位于用户界面的左侧面板上。 在调试面板的顶部，您会看到一个下拉菜单，其中显示No Configurations 。

Click the gear icon located to the right of that dropdown. VS Code automatically generates the .vscode folder and launch.json file for your project.

点击该下拉菜单右侧的齿轮图标。 VS Code会为您的项目自动生成.vscode文件夹和launch.json文件。

Select Google Chrome as your browser.

选择Google Chrome浏览器。

You’ll have the following configuration created for you.

您将为您创建以下配置。

In the configuration provided, update the port from 8080 to 4200.

在提供的配置中，将端口从8080更新到4200 。

Visual Studio Code is now configured to debug your application.

现在将Visual Studio Code配置为调试应用程序。

步骤3 –调试您的应用 (Step 3 – Debugging Your App)

Ensure that your Angular app is still running in your Terminal.

确保您的Angular应用仍在终端中运行。

Click the Play button at the top of the Debug panel. This launches an instance of Google Chrome in debug mode. In VS Code, you’ll see the Debug toolbar pop up.

单击“ 调试”面板顶部的“ 播放”按钮。 这将以调试模式启动Google Chrome浏览器的实例。 在VS Code中，您将看到“调试”工具栏弹出。

Set a breakpoint in your App.component.ts file. Open the App.component.ts file in Visual Studio Code and add a breakpoint inside of the component by clicking in the area to the left of the line numbers, called the gutter, as shown in the following figure:

在您的App.component.ts文件中设置一个断点。 在Visual Studio Code中打开App.component.ts文件，并通过单击行号左侧的区域(称为装订线)，在组件内部添加断点，如下图所示：

Now, refresh debugging by clicking the Refresh button on the Debugging toolbar. This opens your application again and triggers the breakpoin. You’ll be directed back to VS Code directly to the place where you set your breakpoint:

现在，通过单击“ 调试”工具栏上的“ 刷新”按钮来刷新 调试 。 这将再次打开您的应用程序并触发Breakpoin。 您将直接回到VS Code，直接到达设置断点的位置：

From here, you can set more breakpoints, inspect variables, and debug your projects.

在这里，您可以设置更多的断点，检查变量并调试项目。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-debug-angular-cli-applications-in-visual-studio-code