# @angular-extensions/pretty-html-log 中文文档

规范地址：https://npmcn.com/package/%40angular-extensions/pretty-html-log/

版本：5\.1\.1
npm 元数据更新时间：2024-07-12T16:33:18.831Z
中文译文更新时间：2026-11-06T04:11:13.754Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular-extensions/pretty-html-log
原文对照：https://npmcn.com/package/%40angular-extensions/pretty-html-log/?lang=original
项目主页：https://github.com/angular-extensions/pretty-html-log#readme
源码仓库：https://github.com/angular-extensions/pretty-html-log

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：61 kB，23 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@angular/common \>=9，@angular/core \>=9
- 首次发布：2019-11-06T21:48:54.076Z
- 最新版本发布：2024-07-12T16:33:18.551Z
- 近 30 天下载量：537147（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

**用Jest改进角元件测试的调试!**

## 安装

```sh
npm install @angular-extensions/pretty-html-log
```

也可以使用：`pnpm add @angular-extensions/pretty-html-log`、`yarn add @angular-extensions/pretty-html-log`、`bun add @angular-extensions/pretty-html-log`

## README

# @angular-extensions/ pretty-html-log 页面存档备份,存于互联网档案馆

**用Jest改进角元件测试的调试!**

> @angular-extension/pretty-html-log是一个模块,它用Jest的微风进行调试组件测试. 增加了一个 `phl` 用于打印 _内侧HTML_ 页:1 `ComponentFixture`页:1 `DebugElement`页:1 `NativeElement` 或HTML字符串.

![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/logo.png)

-   [为什么你要使用这个模块](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-why-you-should-use-this-module)
-   [特征](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-features)
-   [开始](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-getting-started)
    -   [安装](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-installation)
    -   [使用量](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-usage)
        -   [通过导入使用](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-usage-via-import)
        -   [通过全球使用](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-usage-via-globals)
-   [API 密码](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-api)
-   [实例](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-examples)
    -   [在特定调试中通过](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-pass-in-specific-debugelement)
    -   [实例](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-examples-1)
    -   [打印角评语](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-print-angular-comments)
    -   [更改主题](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-change-the-theme)
-   [进一步资源](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-further-resources)
    -   [博客文章](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-blog-post)
    -   [视频教程](https://npmcn.com/package/%40angular-extensions/pretty-html-log/#readme-video-tutorial)

## 为什么你要使用这个模块

当调试组件测试时,往往需要检查DOM. 最常见的做法是使用古老的 `console.log` 有一些缺点.

首先,总是打字很烦人

```typescript
fixture.debugElement.nativeElement.innerHTML;
```

此外 `console.log` 语句不会非常容易读取地打印 HTML 。 因此,我们仍然需要将字符串复制到一个新的HTML文件并格式化,才能检查. 不是用这个 **@angular-extensions/ pretty-html-log 页面存档备份,存于互联网档案馆**来啊!

![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/before-after.png)

## 特征

-   规定 a `phl` 突出显示和漂亮打印a `fixture`, (中文(简体) ), `debugElement`, (中文(简体) ), `nativeElement` 甚至是简单的 HTML 字符串 - 您不必担心如何到达 HTML, 只需将您要打印的东西传递给 `phl` 方法.
-   如果你使用更漂亮的(你应该使用;);), pretty-html-log将选择 根据您更漂亮的配置, 将您更漂亮的配置上上并相当的打印 HTML 字符串 。 @ @ info

## 开始

### 安装

此模块只在开发期间使用,因此可以被安装为dev依赖.

```
npm i -D @angular-extensions/pretty-html-log
```

### 使用量

pretty-html-log可以用两种不同的方式使用. 第一个也是最 简单的方法就是简单地导入 `phl` 函数输入测试中.

#### 通过导入使用

这个 `@angular-extensions/pretty-html-log` 软件包提供 `phl` 可以用来打印一个 `fixture`, (中文(简体) ), `debugElement`, (中文(简体) ), `nativeElement` 甚至是普通的 HTML 字符串。 只需在调试和打印HTML时导入它.

```typescript
import { phl } from '@angular-extensions/pretty-html-log';

describe('my test suite', () => {
  it('should be green', () => {
    phl(fixture); // This will pretty print the fixture
    expect(myTable.getRows()).toBe(5);
  });
});
```

导入 phl 函数是直接的 。 然而,由于phl常被作为临时工具使用,因此在文件的顶部添加一个导入会很麻烦. 这很容易被遗忘,需要在事后进行人工清理.

如果我们能用一下 `phl` 函数不需要导入。 让我们来看看如何设置 `phl` 全球功能.

> 为了确保未使用的进口说明得到清理,我们应该配置我们的eslint来清理未使用的进口. 更多内容: [https://www.npmjs.com/package/eslint-plugin-未使用-进口](https://www.npmjs.com/package/eslint-plugin-unused-imports)。 。 。 .

#### 通过全球使用

来做 `phl` 全球可用、导入和运行下列方法: `jest.setup.ts` 文档.

```typescript
import { setupPhl } from '@angular-extensions/pretty-html-log';

setupPhl();
```

## API 密码

这个 `phl` 方法有下列签名:

```typescript
<T>(
  ngHTMLElement: NgHTMLElement<T>,
  enableComments = false,
  theme = THEMES.DRACULA
)
```

| 财产 | 说明 |
| --- | --- |
| ngHTMLELEN (英语) | 从 html 从控制台取出并精确打印到控制台的值: 组件Fixture |
| 启用Comments( 默认: 假) | 当设定为真实时, 我们按 Angular 打印生成的评论 。 例如: <!-bondings-"ng-reflect-ng-for-of":. |
| 主题:(默认: DRACULA) | pretty-html-log主题(DRACULA,VSCODE和材料) |

## 实例

### 在特定调试中通过

在测试中您只需写出以下一行 .

```typescript
phl(fixture.debugElement.query(By.css('mat-tab-body')));
```

这将打印以下字符串到您的控制台 。 取决于您的测试配置 可能会遇到一个问题 与控制台的补丁。 在这种情况下,它最好报告: [问题](https://github.com/angular-extensions/pretty-html-log/issues) 并使用 `logNgHTML` 函数直接.

```typescript
phl(fixture.debugElement.query(By.css('mat-tab-body')));
```

![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/output.png)

### 实例

记录固定器的内容内置HTML

```typescript
phl(fixture);
```

调试元素(或多个调试元素)

```typescript
phl(fixture.debugElement);
```

土著元素(或多个土著元素)

```typescript
phl(fixture.debugElement.nativeElement);
```

甚至是简单的 HTML 字符串

```typescript
phl('<h1>Foo</h1>');
```

### 打印角评语

Angular 为我们的HTML文件添加了一些注释. 通常,在调试我们的测试时,我们不需要它们. 因此,他们 未默认打印。 不过,有些情况下,你想要刊登这些评论。 要这样做,你 可以通过 `true` 作为额外的一面旗子 `logNgHTML` 方法.

```typescript
phl(fixture, true);
```

### 更改主题

`@angular-extensions/pretty-html-log` 允许您打印不同主题的 html 日志. 目前,我们支持(DRACULA、VSCODE和材料)。 主题可以导入自 `pretty-html-log`,基础库 `@angular-extensions/pretty-html-log` 取决于.

```typescript
import { THEMES } from 'pretty-html-log';

console.logNgHTML(fixture, false, THEMES.VSCODE);
```

## 进一步资源

### 博客文章

[Jest 改进角部件测试的调试](https://medium.com/angular-in-depth/improved-debugging-of-angular-component-tests-in-jest-ac035e521763) 是一个在 AngularIn Depth 上显示 `@angular-extensions/pretty-html-log` 在项目中使用和设置.

### 视频教程

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/jW_B91PKzMY/0.jpg)](https://www.youtube.com/watch?v=jW_B91PKzMY)

## 常见问题

### @angular-extensions/pretty-html-log 是什么？

用Jest改进角元件测试的调试\!

### 如何安装 @angular-extensions/pretty-html-log？

在项目目录运行 npm install @angular-extensions/pretty-html-log，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=9）、@angular/core（\>=9）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-extensions/pretty-html-log 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angular-extensions/pretty-html-log 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @angular-extensions/pretty-html-log 可以商用吗？

@angular-extensions/pretty-html-log 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular-extensions/pretty-html-log 的下载量有多少？

根据 npm 官方下载统计，@angular-extensions/pretty-html-log 在 2026/10/06 – 2026/11/04 这 30 天内被下载 537,147 次，日均约 17,905 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular-extensions/pretty-html-log 还在维护吗？

最新版本 5\.1\.1 发布于 2024/07/13（2 年前）；至今共发布 17 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。