angular1怎么用vscode调试

在vscode中调试Angular 1应用程序可以按照以下步骤进行：

1. 首先，确保你的Angular 1应用程序已经安装了`angular-cli`工具。如果没有安装，可以使用以下命令进行安装：`npm install -g @angular/cli`。

2. 打开vscode，并在左侧的侧边栏中选择“调试”选项。

3. 创建一个新的调试配置。点击配置面板右上角的齿轮图标，选择“添加配置”选项，并选择“启动调试-Node.js”。

4. 在打开的`launch.json`文件中，将配置改为以下内容：

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch Chrome”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:4200”,
“webRoot”: “${workspaceFolder}/src”,
“sourceMaps”: true
}
]
}
“`

5. 确保你的Angular 1应用程序在本地服务器上运行，例如使用`ng serve`命令启动开发服务器。

6. 点击vscode左侧的调试按钮，然后点击左上角的绿色箭头“启动调试”按钮。这将自动打开Chrome浏览器，并开始调试。

7. 在Chrome浏览器中访问你的应用程序（通常是`http://localhost:4200`），然后在vscode中设置断点，并开始进行调试。

通过上述步骤，你应该能够在vscode中成功地调试你的Angular 1应用程序。请注意，这只是一种常见的调试配置，具体的配置可能因项目的不同而有所差异。例如，你可能需要更改`url`和`webRoot`选项来适应你的项目结构。

要在VSCode中调试Angular 1应用程序，您需要按照以下步骤进行设置和操作：

1. 安装必要的插件：打开VSCode，选择“扩展”图标，搜索并安装“AngularJS”插件。这个插件将帮助您更好地调试Angular应用程序。

2. 准备调试配置文件：在您的Angular 1项目根目录下，创建一个名为`.vscode`的文件夹。在该文件夹中创建一个名为`launch.json`的文件，并将以下配置复制到其中：

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Chrome”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:4200”,
“webRoot”: “${workspaceFolder}”
}
]
}
“`

3. 启动调试：在VSCode的侧边栏中选择Debug图标，然后点击运行按钮（绿色的三角形）。这将启动调试器，并在窗口底部显示一个调试控制台。

4. 启动应用程序：在终端中使用`ng serve`命令启动Angular应用程序。确保应用程序在本地主机的4200端口上运行。

5. 开始调试：在调试控制台中，选择“Chrome”配置，然后点击运行按钮。这将自动打开一个Chrome浏览器实例，并将其连接到调试器。您可以在浏览器中交互式地调试Angular应用程序。

在Chrome浏览器中，您可以使用常用的调试功能，例如设置断点、单步执行代码、查看变量值等。在VSCode的调试控制台中，您也可以查看调试器的输出和日志信息。

请注意，上述过程是基于Angular CLI的默认配置。如果您对项目配置进行了自定义，可能需要相应地调整调试配置文件中的端口和URL。

在VSCode中调试Angular1应用程序可以按照以下步骤进行操作：

1. 配置launch.json 文件
在VSCode中，我们需要配置一个launch.json文件，以指定调试器的配置。在项目的`.vscode`文件夹中创建一个名为`launch.json`的文件，并将以下内容复制到该文件中：

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch Chrome”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:8080”,
“webRoot”: “${workspaceRoot}/src”
}
]
}
“`

在这个配置中，我们使用了Chrome调试器。根据Angular1应用程序使用的端口，可以修改`url`和`webRoot`的值来适应特定的使用情况。

2. 安装插件
在VSCode中，我们需要安装`Debugger for Chrome`插件来启动和连接Chrome调试器。打开VSCode并点击左侧边栏的扩展按钮，在搜索框中输入”Debugger for Chrome”插件并点击安装。

3. 启动调试器
在VSCode中，打开需要调试的Angular1应用程序的源代码文件。点击左侧边栏的调试按钮，在调试视图中选择”Launch Chrome”配置，并点击启动按钮。这将启动Chrome浏览器并与VSCode的调试器进行连接。

4. 设置断点
在VSCode中，在需要调试的代码行上单击左侧边栏的行号，我们可以在那里设置断点。这将在应用程序运行时触发断点，并使我们能够逐步调试应用程序的代码。

5. 运行应用程序
在调试视图中点击启动按钮后，浏览器将自动打开并加载应用程序。我们可以在VSCode中执行各种调试操作，如单步执行、查看变量、查看调用堆栈等。

6. 进行调试操作
一旦应用程序加载完毕并开始运行，我们可以使用调试视图中的各种按钮来控制调试操作。例如，我们可以使用继续按钮继续运行应用程序，使用单步跳入按钮进入函数调用，使用单步执行按钮逐行执行代码等。

通过以上步骤，我们可以在VSCode中成功地调试Angular1应用程序。请注意，具体的操作步骤可能根据项目的特定设置而有所不同，但基本原理和配置步骤是相似的。