{"id":13983083,"url":"https://github.com/angular-extensions/pretty-html-log","last_synced_at":"2025-07-09T11:32:02.611Z","repository":{"id":36379071,"uuid":"215332901","full_name":"angular-extensions/pretty-html-log","owner":"angular-extensions","description":"A module that allows you to pretty print the inner HTML of ComponentFixtures, DebugElements, NativeElements or even plain HTML strings to the console. This is very useful for debugging Angular component tests in Jest","archived":false,"fork":false,"pushed_at":"2024-07-12T16:35:27.000Z","size":9811,"stargazers_count":38,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-02T10:46:23.172Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-extensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-15T15:27:48.000Z","updated_at":"2025-04-21T06:29:40.000Z","dependencies_parsed_at":"2024-06-21T16:52:36.098Z","dependency_job_id":"56b00005-0f0b-46f5-9f9f-1e43bf5cecc8","html_url":"https://github.com/angular-extensions/pretty-html-log","commit_stats":{"total_commits":99,"total_committers":4,"mean_commits":24.75,"dds":"0.29292929292929293","last_synced_commit":"e09d2820004c57ce66a454738fb8702a6c7dcf3a"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/angular-extensions/pretty-html-log","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fpretty-html-log","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fpretty-html-log/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fpretty-html-log/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fpretty-html-log/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-extensions","download_url":"https://codeload.github.com/angular-extensions/pretty-html-log/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fpretty-html-log/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263077626,"owners_count":23410167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T05:01:37.523Z","updated_at":"2025-07-09T11:32:02.188Z","avatar_url":"https://github.com/angular-extensions.png","language":"TypeScript","readme":"# @angular-extensions/pretty-html-log\n\n**Improved debugging of Angular component tests with Jest!**\n\n\u003e The @angular-extension/pretty-html-log is a module that makes debugging component tests with Jest a breeze.\n\u003e It adds a `phl` method which pretty prints the _innerHTML_ of a `ComponentFixture`, a `DebugElement`, a `NativeElement` or an HTML string.\n\n![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/logo.png)\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Why you should use this module](#why-you-should-use-this-module)\n- [Features](#features)\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Usage via import](#usage-via-import)\n    - [Usage via globals](#usage-via-globals)\n- [API](#api)\n- [Examples](#examples)\n  - [Pass in specific DebugElement](#pass-in-specific-debugelement)\n  - [Examples](#examples-1)\n  - [Print Angular comments](#print-angular-comments)\n  - [Change the theme](#change-the-theme)\n- [Further resources](#further-resources)\n  - [Blog post](#blog-post)\n  - [Video tutorial](#video-tutorial)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Why you should use this module\n\nWhen debugging component tests, it’s often necessary to inspect the DOM. The most common approach to do so is by using the good old `console.log` which has some downsides.\n\nFirst of all, it’s annoying to always type\n\n```typescript\nfixture.debugElement.nativeElement.innerHTML;\n```\n\nMoreover, the `console.log` statement doesn’t print the HTML in a very readable way. Therefore we still need to copy the string in a new HTML file and format it to be able to inspect it. Not with **@angular-extensions/pretty-html-log**!\n\n![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/before-after.png)\n\n## Features\n\n- Provides a `phl` method that highlights and pretty prints a `fixture`, `debugElement`, `nativeElement` or even a plain HTML string - you don't have to worry how to get to the HTML, just pass the thing you want to print to the `phl` method.\n- in case you are using prettier (which you should ;)), pretty-html-log will pick\n  up your prettier config and pretty print the HTML string based on your prettier configuration. 🤩\n\n## Getting started\n\n### Installation\n\nThis module will only be used during development and can therefore be installed as a dev dependency.\n\n```\nnpm i -D @angular-extensions/pretty-html-log\n```\n\n### Usage\n\npretty-html-log can be used in two different ways. The first and most\nsimple way is to simply import the `phl` function into your test.\n\n#### Usage via import\n\nThe `@angular-extensions/pretty-html-log` package provides a `phl` method that you can use to pretty print a `fixture`, `debugElement`, `nativeElement` or even a plain HTML string. Simply import it while debugging and pretty print that HTML.\n\n```typescript\nimport { phl } from '@angular-extensions/pretty-html-log';\n\ndescribe('my test suite', () =\u003e {\n  it('should be green', () =\u003e {\n    phl(fixture); // This will pretty print the fixture\n    expect(myTable.getRows()).toBe(5);\n  });\n});\n```\n\nImporting the phl function is straightforward. However, since phl is often used as a temporary tool, it can be bothersome to add an import at the top of the file. This is easy to forget and requires manual cleanup afterward.\n\nWouldn't it be cool if we can simply use the `phl` function without the need of an import. Let's check out how to setup the `phl` function globally.\n\n\u003e To make sure unused import statement get cleaned up we should configure our eslint to clean up unused imports. More: https://www.npmjs.com/package/eslint-plugin-unused-imports.\n\n#### Usage via globals\n\nTo make `phl` globally available, import and run the following method within a `jest.setup.ts` file.\n\n```typescript\nimport { setupPhl } from '@angular-extensions/pretty-html-log';\n\nsetupPhl();\n```\n\n## API\n\nThe `phl` method has the following signature:\n\n```typescript\n\u003cT\u003e(\n  ngHTMLElement: NgHTMLElement\u003cT\u003e,\n  enableComments = false,\n  theme = THEMES.DRACULA\n)\n```\n\n| Property                        | Description                                                                                                        |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| ngHTMLElement\u003cT\u003e                | Value to extract the html from and pretty print it to the console: ComponentFixture                                | DebugElement | DebugElement[] | HTMLElement | HTMLElement[] | string; |\n| enableComments (default: false) | When set to true we print the generated comments by Angular. For example: \u003c!--bindings={\"ng-reflect-ng-for-of\":... |\n| theme: (default: DRACULA)       | pretty-html-log themes (DRACULA, VSCODE and MATERIAL)                                                              |\n\n## Examples\n\n### Pass in specific DebugElement\n\nIn your test you can simply write the following line.\n\n```typescript\nphl(fixture.debugElement.query(By.css('mat-tab-body')));\n```\n\nWhich will print the following string to your console. Depending on your test configuration you\nmight run into an issue with the patch of the console. In such cases its best to report an [issue](https://github.com/angular-extensions/pretty-html-log/issues) and use the `logNgHTML` function directly.\n\n```typescript\nphl(fixture.debugElement.query(By.css('mat-tab-body')));\n```\n\n![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/output.png)\n\n### Examples\n\nLog the content innerHTML of a fixture\n\n```typescript\nphl(fixture);\n```\n\nof a debugElement (or multiple debugElements)\n\n```typescript\nphl(fixture.debugElement);\n```\n\nof a nativeElement (or multiple nativeElements)\n\n```typescript\nphl(fixture.debugElement.nativeElement);\n```\n\nor even a simple HTML string\n\n```typescript\nphl('\u003ch1\u003eFoo\u003c/h1\u003e');\n```\n\n### Print Angular comments\n\nAngular adds some comments to our HTML file. Usually, when debugging our tests, we don't need them. Therefore they\nare not printed by default. However, there are cases where you want to print those comments. To do so, you\ncan pass `true` as an additional flag tot he `logNgHTML` method.\n\n```typescript\nphl(fixture, true);\n```\n\n### Change the theme\n\n`@angular-extensions/pretty-html-log` allows you to print the html logs in different themes.\nCurrently, we support (DRACULA, VSCODE and MATERIAL). The themes can be importet from `pretty-html-log`, the base library `@angular-extensions/pretty-html-log` depends on.\n\n```typescript\nimport { THEMES } from 'pretty-html-log';\n\nconsole.logNgHTML(fixture, false, THEMES.VSCODE);\n```\n\n## Further resources\n\n### Blog post\n\n[Improved debugging of Angular component tests in Jest](https://medium.com/angular-in-depth/improved-debugging-of-angular-component-tests-in-jest-ac035e521763) is a write up on AngularInDepth that shows how `@angular-extensions/pretty-html-log` is used and set up in a project.\n\n### Video tutorial\n\n[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/jW_B91PKzMY/0.jpg)](https://www.youtube.com/watch?v=jW_B91PKzMY)\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Loggers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-extensions%2Fpretty-html-log","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-extensions%2Fpretty-html-log","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-extensions%2Fpretty-html-log/lists"}