|
1 | 1 | # @angular-extensions/pretty-html-log
|
2 | 2 |
|
| 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 | +
|
3 | 7 | 
|
4 | 8 |
|
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` |
8 | 37 |
|
9 | 38 | 
|
10 | 39 |
|
| 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 | + |
11 | 49 | ## Getting started
|
12 | 50 |
|
13 | 51 | This module will only be used during development and can therefore
|
|
0 commit comments