Skip to content

Commit ffcd15f

Browse files
committed
chore(docs): adjust README
1 parent 69edee7 commit ffcd15f

File tree

1 file changed

+41
-3
lines changed

1 file changed

+41
-3
lines changed

README.md

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
11
# @angular-extensions/pretty-html-log
22

3+
> Improved debugging of Angular component tests.
4+
> The @angular-extension/pretty-html-log is a module that makes debugging component tests with Jest a breeze.
5+
> It adds a console.logNgHTML method which pretty prints the innerHTML of a ComponentFixture, a DebugElement, a NativeElement or an HTML string.
6+
37
![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/logo.png)
48

5-
This module allows you to pretty print the inner HTML
6-
of `ComponentFixture`, single or multiple `DebugElements`, single or multiple `NativeElements` or even plain HTML `strings` to the console.
7-
**This is very useful for debugging Angular component tests in Jest**
9+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
10+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
11+
12+
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
13+
14+
- [@angular-extensions/pretty-html-log](#angular-extensionspretty-html-log)
15+
- [Why you should use this module](#why-you-should-use-this-module)
16+
- [Features](#features)
17+
- [Getting started](#getting-started)
18+
- [API](#api)
19+
- [Examples](#examples)
20+
- [Pass in specific DebugElement](#pass-in-specific-debugelement)
21+
- [Examples](#examples-1)
22+
- [Print Angular comments](#print-angular-comments)
23+
- [Change the theme](#change-the-theme)
24+
25+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
26+
27+
## Why you should use this module
28+
29+
When 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.
30+
First of all, it’s annoying always to type
31+
32+
```
33+
fixture.debugElement.nativeElement.innerHTML
34+
```
35+
36+
Moreover, 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`
837

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

40+
## Features
41+
42+
- patches the console and adds a new method `console.logNgHTML`
43+
- pretty prints a fixture, debugElement, nativeElement or plain HTML string - you don't have to worry
44+
how to get to the HTML, just pass the thing you want to print to the `console.logNgHTML` method.
45+
- highlights the HTML
46+
- in case you are using prettier (which you should ;)), pretty-html-log will pick
47+
up your prettier config and pretty print the HTML string based on your prettier configuration. 🤩
48+
1149
## Getting started
1250

1351
This module will only be used during development and can therefore

0 commit comments

Comments
 (0)