直到使用Intellij进行Angular开发的调试

2 年 ago
文, 翔
1 minute

首先

作为Angular开发的IDE，我使用了Intellij，这是关于从项目创建到调试的简化笔记。由于配置Angular CLI和npm的路径有点麻烦，所以我将其记录下来。

开发环境

MacBook Air (M1, 2020) – 2020 年 Macbook Air（M1 芯片）
Mac OS Big Sur 11.0.1 – Mac OS Big Sur 11.0.1 版本
IntelliJ Ultimate 2020.3 – IntelliJ Ultimate 2020.3 版本
Node v15.4.0 – Node v15.4.0 版本
Nodeのバージン管理 anyenv/nodeenv – Node 的版本管理 anyenv/nodeenv

创建项目

01.png
02.png
03.png

输入Angular CLI的路径，然后点击完成按钮。

~/.anyenv/envs/nodenv/versions/15.4.0/lib/node_modules/@angular/cli
30.png
31.png

Angular CLI的路径会因个人环境而异。
我在anyenv/nodeenv的版本管理下，通过npm全局安装了Angular CLI。

npm的包管理器路径设置

在中国的软件中，找到[运行]>[编辑配置]，然后设置“包管理器”，最后点击确定按钮。

~/.anyenv/envs/nodenv/versions/15.4.0/lib/node_modules/npm
34.png

在想要停止的调试位置上设置断点。

在”app.component.ts”文件中的示例

05.png

进行调试执行

36.png
40.png

按住 Cmd + Shift 键，然后点击 Console 中显示的 [http://localhost:4200]。
这将启动一个用于调试的 Chrome 实例，并使其可供调试。

42.png
43.png

处理会在设置断点的位置停止。

44.png

這是在IntelliJ中進行Angular調試的步驟。

bannerAds