Pretty Html Log

Overview

The @angular-extensions/pretty-html-log module is a game changer for anyone working with Angular component tests in Jest. It streamlines the debugging process by providing a simple yet powerful method, phl, that enhances the readability of your HTML logs. This tool is particularly handy for developers who want to quickly inspect the DOM without the hassle of messy and confusing console.log outputs.

By using this module, you can easily print and format the innerHTML of various Angular elements, making it an essential addition to your development toolkit. Whether you're dealing with ComponentFixture, DebugElement, or just plain HTML strings, the phl method ensures that your debug output is clean and easy to analyze.

Features

• Pretty Printing: The phl method highlights and pretty prints ComponentFixture, DebugElement, NativeElement, or plain HTML strings with ease, enhancing your debugging process.

• Prettier Integration: If you use Prettier, the module automatically picks up your configuration to format the HTML output accordingly, ensuring consistency throughout your code.

• Simple Installation: As a development-only dependency, you can install pretty-html-log as a dev dependency, making it easy to keep your production code clean.

• Flexible Usage: Utilize the phl function in two ways: by importing it directly in your tests or by setting it up globally, allowing for quick and uncomplicated debugging.

• Linting Support: With the right eslint configuration, you can ensure that your imports are automatically cleaned up, preventing clutter in your files.

• Angular Comments Support: The module is capable of printing Angular comments along with your HTML, providing additional context when debugging.

• Theme Customization: Users can change the output theme, catering to personal preferences or team guidelines for better visual clarity.